<template>
  <div>
    <BasicModal
      :maskClosable="false"
      v-bind="$attrs"
      width="60rem"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <Tabs
        type="card"
        :animated="true"
        v-model:activeKey="activeKey"
        :size="size"
        @change="handleChange"
      >
        <TabPane forceRender key="1" tab="设备配置">
          <DeviceConfigurationStep v-show="activeKey === '1'" ref="DevConStRef" />
        </TabPane>
        <TabPane forceRender key="2" tab="传输配置">
          <TransportConfigurationStep v-show="activeKey === '2'" ref="TransConStRef" />
        </TabPane>
        <TabPane forceRender key="3" v-show="activeKey === '3'" tab="物模型管理">
          <PhysicalModelManagementStep v-show="activeKey === '3'" ref="PhysicalModManRef" />
        </TabPane>
      </Tabs>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { isEmpty } from '/@/utils/is';
  import { Tabs, TabPane } from 'ant-design-vue';
  import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
  import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
  import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';

  const emits = defineEmits(['success', 'register']);
  const activeKey = ref('1');
  const size = ref('small');
  const isEditId = ref('');
  const isEditCreatTime = ref('');
  const { createMessage } = useMessage();
  const isViewDetail = ref(false);
  const isUpdate = ref(false);
  const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
  const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
  const PhysicalModManRef = ref<InstanceType<typeof PhysicalModelManagementStep>>();
  const postSubmitFormData: any = reactive({
    deviceConfData: {},
  });
  const transportConfData: any = reactive({
    profileData: {},
  });
  const transportTypeStr = ref('');
  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    isUpdate.value = data.isUpdate;
    isViewDetail.value = data.isView;
    const res = data.record !== undefined ? await deviceConfigGetDetail(data.record.id) : {};
    isEditId.value = data.record !== undefined ? data.record.id : null;
    isEditCreatTime.value = data.record !== undefined ? data.record.createTime : null;
    if (!unref(isViewDetail)) {
      const title = !unref(isUpdate) ? '编辑设备配置' : '新增设备配置';
      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
      if (!unref(isUpdate)) {
        await setDeviceConfEditFormData(res);
        await setTransConfEditFormData(res);
        handleStepNext(false, res);
      }
    } else {
      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看设备配置' });
      await setDeviceConfEditFormData(res);
      await setTransConfEditFormData(res);
      handleStepNext(false, res);
    }
  });
  const handleChange = (e) => {
    if (e == '2') {
      handleStepNext(true, null);
    }
  };
  const handleStepNext = (e, data) => {
    if (e) {
    } else {
      setTransConfEditFormData(data);
    }
  };

  const setDeviceConfEditFormData = async (res) => {
    await DevConStRef.value?.setFormData(res);
  };
  const setTransConfEditFormData = async (res) => {
    await TransConStRef.value?.setFormData(res);
  };

  const getDeviceConfFormData = async () => {
    postSubmitFormData.deviceConfData = await DevConStRef.value?.getFormData();
  };
  const getTransConfData = async () => {
    transportConfData.profileData = await TransConStRef.value?.getFormData();
    transportTypeStr.value = transportConfData.profileData.transportConfiguration.type;
    Reflect.deleteProperty(transportConfData.profileData?.transportConfiguration, 'transportType');
  };

  const handleSubmit = async () => {
    await getDeviceConfFormData();
    await getTransConfData();
    const isEmptyObj = isEmpty(transportConfData.profileData.transportConfiguration);
    await deviceConfigAddOrEdit({
      ...postSubmitFormData.deviceConfData,
      ...{ transportType: !isEmptyObj ? transportTypeStr.value : 'DEFAULT' },
      ...{ profileData: !isEmptyObj ? transportConfData.profileData : null },
      ...{ id: isUpdate.value ? null : isEditId.value },
      ...{ createTime: isUpdate.value ? null : isEditCreatTime.value },
    });
    createMessage.success(isUpdate.value ? `新增成功` : `编辑成功`);
    handleCancel();
    emits('success');
  };

  const handleCancel = () => {
    closeModal();
    activeKey.value = '1';
    DevConStRef.value?.resetFormData();
    TransConStRef.value?.resetFormData();
  };
</script>

<style lang="less" scope>
  :deep(.ant-modal-content) {
    height: 700px !important;
  }
</style>