<template>
  <BasicModal
    :maskClosable="false"
    :width="800"
    @register="registerModal"
    v-bind="$attrs"
    :title="getTitle"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getNewStation, getUpdateTree } from '/@/api/swHome/index';
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();
  export default defineComponent({
    name: 'AccountModal',
    components: { BasicModal, BasicForm },
    setup(_, { emit }) {
      let accountFormSchema = ref([
        {
          field: 'name',
          label: '信道名称',
          component: 'Input',
          colProps: { span: 12 },
          required: true,
          componentProps: {
            maxLength: 30,
            // disabled: true,
          },
        },
        {
          field: 'tx_pro',
          label: '通信协议',
          component: 'Input',
          colProps: { span: 12 },
          required: true,
          componentProps: {
            maxLength: 30,
          },
        },
        {
          field: 'data_pro',
          label: '数据协议',
          component: 'Input',
          colProps: { span: 12 },
          required: true,
          componentProps: {
            maxLength: 30,
          },
        },
        {
          field: 'ip',
          label: 'IP',
          component: 'Input',
          colProps: { span: 12 },
          required: true,
          componentProps: {
            maxLength: 30,
          },
        },
        {
          field: 'port',
          label: '端口',
          component: 'Input',
          colProps: { span: 12 },
          required: true,
          componentProps: {
            maxLength: 30,
          },
        },
        {
          field: 'note',
          label: '备注',
          component: 'InputTextArea',
          colProps: { span: 24 },
          componentProps: {
            maxLength: 255,
            placeholder: '请输入备注',
          },
        },
      ]);
      const isUpdate = ref(false);
      const isDetails = ref(false);
      let name_old = ''
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log('data', data);
        isDetails.value = !!data?.details;
        isUpdate.value = !!data?.isUpdate;
        if (data?.details) {
          setFieldsValue({
            tx_pro: data?.formData.tx_pro, //通信协议
            data_pro: data?.formData.data_pro, //数据协议
            ip: data?.formData.ip, //IP
            port: data?.formData.port, //端口
            name: data?.formData.com_name,
            note: data?.formData.note,
          });
          accountFormSchema.value.forEach((element) => {
            element.componentProps.disabled = true;
          });
          updateSchema(accountFormSchema.value);
          return;
        }
        // 编辑
        if (unref(isUpdate)) {
          name_old = data?.formData.com_name
          setFieldsValue({
            tx_pro: data?.formData.tx_pro, //通信协议
            data_pro: data?.formData.data_pro, //数据协议
            ip: data?.formData.ip, //IP
            port: data?.formData.port, //端口
            name: data?.formData.com_name,
            note: data?.formData.note,
          });
          accountFormSchema.value[0].componentProps.disabled = true
        } else {
          await resetFields();
        }

        accountFormSchema.value.forEach((element) => {
          element.componentProps.disabled = false;
        });
        updateSchema(accountFormSchema.value);
      });
      const [
        registerForm,
        { setFieldsValue, updateSchema, resetFields, validate, getFieldsValue },
      ] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });
      const getTitle = computed(() => {
        if(unref(isDetails)){
          return '详情'
        }
        if(!unref(isUpdate)){
          return '新增'
        }else{
          return '编辑'
        }
      });
      async function handleSubmit() {
        setModalProps({ confirmLoading: true });
        if(unref(isDetails)){
          setModalProps({ confirmLoading: false });
          closeModal();
          return
        };
        try {
          const { createMessage } = useMessage();
          const values = await validate(['name', 'tx_pro', 'data_pro', 'ip', 'port']);

          let formData = getFieldsValue();
          
          formData.type = 'com';
          formData.attr = {
            tx_pro: formData.tx_pro, //通信协议
            data_pro: formData.data_pro, //数据协议
            ip: formData.ip, //IP
            port: formData.port, //端口
            note: formData.note, //端口
          };
          delete formData.tx_pro;
          delete formData.data_pro;
          delete formData.ip;
          delete formData.port;
          delete formData.note;
          // 新增
          if (!unref(isUpdate)) {
            let resData = await getNewStation(formData);
            if (resData.code != 200) {
              createMessage.warning(resData.msg);
              return false;
            }
            console.log(resData);
          } else {
            const userInfo = await userStore;
            formData.attr.user = userInfo.userInfo.username;
            //编辑
            formData.name_old = name_old
            let resData = await getUpdateTree(formData);
            if (resData.code != 200) {
              createMessage.warning(resData.msg);
              return false;
            }
            console.log(resData);
          }
          closeModal();
          emit('success');
          createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
        } finally {
          setTimeout(() => {
            setModalProps({ confirmLoading: false });
          }, 300);
        }
      }
      return {
        registerModal,
        getTitle,
        handleSubmit,
        registerForm,
      };
    },
  });
</script>
