<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="registerDrawer"
      showFooter
      width="1000px"
      @ok="handleSubmit"
    >
      <div class="step-form-form">
        <a-steps :current="current">
          <a-step title="选择转换方式" />
          <a-step title="完善配置参数" />
        </a-steps>
      </div>
      <div>
        <div v-show="current === 0">
          <TransferConfigMode ref="refTransferConfigMode" @next="handleNext"
        /></div>
        <div v-show="current === 1">
          <TransferConfigParams
            ref="refTransferConfigParams"
            :getModeSelect="getModeSelectVal"
            @prevSon="handlePrev"
        /></div>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    reactive,
    ref,
    nextTick,
    computed,
    unref,
    getCurrentInstance,
  } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Steps } from 'ant-design-vue';
  import TransferConfigMode from './cpns/transferConfigMode.vue';
  import TransferConfigParams from './cpns/transferConfigParams.vue';
  import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: {
      BasicModal,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      TransferConfigMode,
      TransferConfigParams,
    },
    emits: ['success'],
    setup(_, { emit }) {
      const { createMessage } = useMessage();
      const { proxy } = getCurrentInstance();
      const allPostForm = reactive({});
      const getNameObj = reactive({
        name: '',
      });
      const getTypeObj = reactive({
        type: '',
      });
      const getSonFormValue = ref({});
      const getModeSonFormValue = ref({});
      const refTransferConfigParams = ref(null);
      const refTransferConfigMode = ref(null);
      const getModeSelectVal = ref({});
      const isUpdate = ref(true);
      const getTitle = computed(() => (!unref(isUpdate) ? '新增转换配置' : '编辑数据转换'));
      const current = ref(0);
      const editPostId = ref('');

      const [registerDrawer, { closeModal }] = useModalInner(async (data) => {
        isUpdate.value = !!data?.isUpdate;
        current.value = 0;
        if (!unref(isUpdate)) {
          try {
            proxy.$refs.refTransferConfigMode.customResetStepOneFunc();
            // nextTick(() => {
            //   proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
            // });
          } catch (e) {
            return e;
          }
        } else {
          editPostId.value = data.record.id;
          const editType = {
            type: '',
            configuration: {},
            name: '',
          };
          if (data.record.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
            editType.type = 'KafKA';
            editType.configuration = data.record.configuration;
            editType.name = data.record.name;
          } else if (data.record.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode') {
            editType.type = 'MQTT';
            editType.configuration = data.record.configuration;
            editType.name = data.record.name;
          } else if (data.record.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode') {
            editType.type = 'RabbitMq';
            editType.configuration = data.record.configuration;
            editType.name = data.record.name;
          } else if (data.record.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode') {
            editType.type = 'Api';
            editType.configuration = data.record.configuration;
            editType.name = data.record.name;
          }
          proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editType);
          proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
          proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
          proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
          proxy.$refs.refTransferConfigParams.editSonValueDataFunc(editType);
        }
      });
      const handleNext = (args) => {
        current.value++;
        getModeSelectVal.value = args;
        if (!unref(isUpdate)) return;
        // try {

        //   });
        // setTimeout(() => {
        //   proxy.$refs.refTransferConfigParams.clearSonValueDataFunc();
        // }, 100);
        // } catch (e) {
        //   return e;
        // }
      };
      const handlePrev = () => {
        current.value--;
      };
      const addOrEditFunc = async () => {
        getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc();
        getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc();
        if (getModeSonFormValue.value?.type == 'KafKA') {
          getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
          getNameObj.name = getSonFormValue.value?.configuration?.name;
          delete getSonFormValue.value?.configuration?.name;
        } else if (getModeSonFormValue.value?.type == 'MQTT') {
          getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode';
          getNameObj.name = getSonFormValue.value?.configuration?.name;
          delete getSonFormValue.value?.configuration?.name;
        } else if (getModeSonFormValue.value?.type == 'RabbitMq') {
          getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
          getNameObj.name = getSonFormValue.value?.configuration?.name;
          delete getSonFormValue.value?.configuration?.name;
        } else if (getModeSonFormValue.value?.type == 'Api') {
          getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode';
          getNameObj.name = getSonFormValue.value?.configuration?.name;
          delete getSonFormValue.value?.configuration?.name;
        }
        const id: any = {
          id: unref(isUpdate) ? editPostId.value : '',
        };
        Object.assign(allPostForm, getTypeObj, getSonFormValue.value, getNameObj, id);
        if (!unref(isUpdate)) {
          delete allPostForm.id;
        }
      };
      const handleSubmit = async () => {
        if (!unref(isUpdate)) {
          addOrEditFunc();
          await postAddConvertApi(allPostForm);
          createMessage.success('数据转换新增成功');
          emit('success');
          closeModal();
        } else {
          addOrEditFunc();
          await postAddConvertApi(allPostForm);
          createMessage.success('数据转换编辑成功');
          emit('success');
          closeModal();
        }
      };
      return {
        registerDrawer,
        handleSubmit,
        getTitle,
        current,
        handleNext,
        handlePrev,
        getModeSelectVal,
        refTransferConfigParams,
        refTransferConfigMode,
      };
    },
  });
</script>