<template>
  <BasicModal
    :maskClosable="false"
    :width="800"
    :minHeight="360"
    @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, getDcharList } 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: 'st_name',
        label: '所属测站',
        component: 'Input',
        colProps: { span: 12 },
        required: true,
        componentProps: {
          maxLength: 30,
          // disabled: true,
        },
      },
      {
        field: 'name',
        label: '传感器名称',
        component: 'Input',
        colProps: { span: 12 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      {
        field: 'senid',
        label: '传感器代码',
        component: 'Input',
        colProps: { span: 12 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      // {
      //   field: 'sensor_type',
      //   label: '传感器类型',
      //   component: 'Input',
      //   colProps: { span: 12 },
      //   required: true,
      //   componentProps: {
      //     maxLength: 30,
      //   },
      // },
      {
          field: 'dchar',
          label: '传感器类型',
          component: 'ApiSelect',
          colProps: { span: 12 },
          required: true,
          componentProps: {
            placeholder: '请选择传感器类型',
            api: getDcharList,
            resultField: 'data',
            labelField: 'dcharNM',
            valueField: 'dchar',
          },
        },
      {
        field: 'pid',
        label: '分辨率',
        component: 'Input',
        colProps: { span: 12 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      {
        field: 'multiple',
        label: '倍比',
        component: 'Input',
        colProps: { span: 12 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      {
        field: 'baseV',
        label: '基值',
        component: 'Input',
        colProps: { span: 12 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      {
        field: 'maxv',
        label: '最大值',
        component: 'Input',
        colProps: { span: 12 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      {
        field: 'minv',
        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);
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      console.log('data', data);
      isDetails.value = !!data?.details;
      isUpdate.value = !!data?.isUpdate;
      if (data?.details) {
        setFieldsValue({
          st_name: data?.formData.st_name,
          name: data?.formData.sensor_name,
          senid: data?.formData.senid,
          // sensor_type: data?.formData.sensor_type,
          dchar:data?.formData.dchar,
          pid: data?.formData.pid,
          multiple: data?.formData.multiple,
          baseV: data?.formData.baseV,
          maxv: data?.formData.maxv,
          minv: data?.formData.minv,
          note: data?.formData.note,
        });
        accountFormSchema.value.forEach((element) => {
          element.componentProps.disabled = true;
        });
        updateSchema(accountFormSchema.value);
        return;
      }

      // 编辑
      if (unref(isUpdate)) {
        setFieldsValue({
          st_name: data?.formData.st_name,
          name: data?.formData.sensor_name,
          senid: data?.formData.senid,
          // sensor_type: data?.formData.sensor_type,
          dchar:data?.formData.dchar,
          pid: data?.formData.pid,
          multiple: data?.formData.multiple,
          baseV: data?.formData.baseV,
          maxv: data?.formData.maxv,
          minv: data?.formData.minv,
          note: data?.formData.note,
        });
        accountFormSchema.value.forEach((element) => {
          element.componentProps.disabled = false;
        });
        accountFormSchema.value[0].componentProps.disabled = true;
        updateSchema(accountFormSchema.value);
        return;
      } 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 = 'sensor';
        formData.attr = {
          st_name: formData.st_name,
          senid: formData.senid,
          // sensor_type: formData.sensor_type,
          dchar: formData.dchar,
          pid: formData.pid,
          multiple: formData.multiple,
          baseV: formData.baseV,
          maxv: formData.maxv,
          minv: formData.minv,
          note: formData.note,
        };
        delete formData.st_name;
        delete formData.senid;
        delete formData.sensor_type;
        delete formData.dchar;
        delete formData.pid;
        delete formData.multiple;
        delete formData.baseV;
        delete formData.maxv;
        delete formData.minv;
        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;
          //编辑
          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>
