<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      @register="register"
      :title="getTitle"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :showOkBtn="isShowOkBtnFalse"
    >
      <div class="step-form-form">
        <a-steps :current="current">
          <a-step title="设备配置" />
          <a-step title="传输配置" />
        </a-steps>
      </div>
      <div class="mt-5">
        <!-- 设备配置 -->
        <div v-show="current === 0">
          <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1"
        /></div>
        <!-- 设备配置 -->
        <!-- 传输配置 -->
        <div v-show="current === 1">
          <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev"
        /></div>
        <!-- 传输配置 -->
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    nextTick,
    ref,
    computed,
    unref,
    getCurrentInstance,
    reactive,
  } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
  import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
  import { Steps } from 'ant-design-vue';
  import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'DeviceModal',
    components: {
      BasicModal,
      DeviceProfileStep1,
      DeviceProfileStep2,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
    },
    props: {
      userData: { type: Object },
    },
    emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
    setup(_, { emit }) {
      const { proxy } = getCurrentInstance() as any;
      const DeviceProfileStep1Ref = ref(null);
      const DeviceProfileStep2Ref = ref(null);
      const { createMessage } = useMessage();
      let postDeviceConfogData: any = reactive({});
      let getStepOneData: any = reactive({});
      let getStepTwoData: any = reactive({});
      const editData: any = ref({});
      const postEditId = ref('');
      const createTime = ref('');
      const current = ref(0);
      const isUpdate = ref(0);
      const isShowOkBtnFalse = ref(true);
      const isNextStatus = ref(false);
      let transportTypeObj = reactive({
        transportType: '',
      });
      let profileDataObj: any = reactive({
        profileData: null,
      });

      const getTitle = computed(() =>
        isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
      );
      const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
      const [register, { closeModal }] = useModalInner(async (data) => {
        isUpdate.value = data.isUpdate;
        if (isUpdate.value == 1) {
          handleCancel();
          isShowOkBtnFalse.value = true;
          current.value = 0;
        } else if (isUpdate.value == 2) {
          handleCancel();
          isShowOkBtnFalse.value = true;
          current.value = 0;
          postEditId.value = data.record.id;
          createTime.value = data.record.createTime;
          editData.value = await deviceConfigGetDetail(postEditId.value);
          proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
            name: editData.value.name,
            defaultRuleChainId: editData.value.defaultRuleChainId,
            defaultQueueName: editData.value.defaultQueueName,
            description: editData.value.description,
            image: editData.value.image,
          });
        } else if (isUpdate.value == 3) {
          handleCancel();
          isShowOkBtnFalse.value = false;
          current.value = 0;
          postEditId.value = data.record.id;
          createTime.value = data.record.createTime;
          editData.value = await deviceConfigGetDetail(postEditId.value);
          proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
            name: editData.value.name,
            defaultRuleChainId: editData.value.defaultRuleChainId,
            defaultQueueName: editData.value.defaultQueueName,
            description: editData.value.description,
            image: editData.value.image,
          });
        }
      });
      function handleStepPrev() {
        current.value--;
      }
      //第一步
      function handleStepNext1(v, v1) {
        isNextStatus.value = true;
        if (isNextStatus.value) {
          getStepOneData = {
            ...v,
            ...{ image: v1 },
          };
        }
        current.value++;
        if (isUpdate.value == 2) {
          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
        } else if (isUpdate.value == 3) {
          proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
        }
      }
      const handleSubmit = async () => {
        let getPic = null;
        getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
        profileDataObj.profileData = getStepTwoData;
        transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
        delete profileDataObj?.profileData?.transportConfiguration?.transportType;
        //没有点击下一步
        if (!isNextStatus.value) {
          const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
          getPic = getStep1Obj.icon;
          getStepOneData = {
            ...getStep1Obj.key,
            ...{ image: getPic },
          };
        }
        const id = isUpdate.value == 1 ? '' : postEditId.value;
        const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };

        if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
          profileDataObj.profileData = null;
        }
        postDeviceConfogData = {
          ...getStepOneData,
          ...profileDataObj,
          ...transportTypeObj,
          id,
          ...createTimePost,
        };
        if (isUpdate.value == 1) {
          delete postDeviceConfogData.id;
        }
        deviceConfigAddOrEdit(postDeviceConfogData)
          .then((res) => {
            if (!res) return;
            createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
            closeModal();
            emit('success');
            isNextStatus.value = false;
          })
          .catch((e) => {
            createMessage.error(e);
          });
      };
      const handleCancel = () => {
        nextTick(() => {
          proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
          proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
        });
      };
      function handleRedo() {
        current.value = 0;
      }
      return {
        isShowOkBtnFalse,
        DeviceProfileStep2Ref,
        DeviceProfileStep1Ref,
        editData,
        handleSubmit,
        handleCancel,
        register,
        getTitle,
        getViewTitle,
        current,
        handleStepPrev,
        handleStepNext1,
        handleRedo,
      };
    },
  });
</script>