<script setup lang="ts">
import { useRoute } from 'vue-router';
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from '@ant-design-vue/pro-layout';
import { Form, message } from 'ant-design-vue/lib';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getOperationSet, updateOperationSet } from '@/api/mmlManage/mmlSet';
import { regExpIPv4 } from '@/utils/regular-utils';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const route = useRoute();

/**路由标题 */
let title = ref<string>((route.meta.title as string) ?? '标题');

/**对象信息状态类型 */
type ModalStateType = {
  /**标题 */
  title: string;
  /**表单数据 */
  from: Record<string, any>;
  /**表单数据 loading */
  fromLoading: boolean;
  /**确定按钮 loading */
  confirmLoading: boolean;
};

/**接口设置信息状态 */
let operationSetState: ModalStateType = reactive({
  title: '接口设置',
  from: {
    listeningAddress: '',
    listeningPort: 3000,
  },
  fromLoading: true,
  confirmLoading: true,
});

/**接口设置信息内表单属性和校验规则 */
const operationSetStateFrom = Form.useForm(
  operationSetState.from,
  reactive({
    listeningAddress: [
      {
        required: true,
        pattern: regExpIPv4,
        message: '请输入远程IP地址',
      },
    ],
    listeningPort: [
      {
        required: true,
        message: '请输入远程端口，0~65535',
      },
    ],
  })
);

/**接口设置对象保存 */
function fnFormOperationSetFinish() {
  operationSetStateFrom.validate().then(() => {
    operationSetState.confirmLoading = true;
    const from = toRaw(operationSetState.from);
    updateOperationSet(from)
      .then(res => {
        if (res.code === RESULT_CODE_SUCCESS) {
          message.success(`接口设置保存成功`, 3);
        } else {
          message.warning(`接口设置无变更`, 3);
        }
      })
      .finally(() => {
        operationSetState.confirmLoading = false;
      });
  });
}

onMounted(() => {
  Promise.allSettled([getOperationSet()]).then(resArr => {
    // 查询操作维护接口设置
    if (resArr[0].status === 'fulfilled') {
      const result = resArr[0].value;
      if (result.code === RESULT_CODE_SUCCESS) {
        operationSetState.from = Object.assign(
          operationSetState.from,
          result.data
        );
        operationSetState.fromLoading = false;
        operationSetState.confirmLoading = false;
      }
    }
  });
});
</script>

<template>
  <PageContainer :title="title">
    <a-row :gutter="16">
      <a-col :span="8">
        <!-- 接口设置 -->
        <a-card
          :title="operationSetState.title"
          :loading="operationSetState.fromLoading"
        >
          <template #extra>
            <a-space :size="8" align="center">
              <a-button
                type="primary"
                :loading="operationSetState.confirmLoading"
                @click.prevent="fnFormOperationSetFinish"
              >
                <template #icon><SaveOutlined /></template>
                保存设置
              </a-button>
            </a-space>
          </template>
          <a-form
            name="operationSetState.from"
            layout="horizontal"
            autocomplete="off"
            :label-col="{ span: 6 }"
          >
            <a-form-item
              label="侦听IP地址"
              name="listeningAddress"
              v-bind="operationSetStateFrom.validateInfos.listeningAddress"
            >
              <a-input
                v-model:value="operationSetState.from.listeningAddress"
                allow-clear
                placeholder="请输入侦听IP地址"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="侦听端口"
              name="listeningPort"
              v-bind="operationSetStateFrom.validateInfos.ftpLolisteningPortg"
            >
              <a-input-number
                v-model:value="operationSetState.from.listeningPort"
                placeholder="3000"
                :min="3000"
              />
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </PageContainer>
</template>

<style lang="less" scoped></style>
