<template>
  <div>
    <BasicModal
      width="1000px"
      v-bind="$attrs"
      @register="registerDrawer"
      @ok="handleSubmit"
      destroy-on-close
      @cancel="resetValue"
    >
      <div>
        <a-steps :current="currentStep">
          <a-step v-for="(item, index) in stepConfig" :title="item" :key="index" />
        </a-steps>
      </div>
      <div>
        <!-- 选择流转方式 -->
        <DataFlowMethod
          ref="dataFlowMethodRef"
          v-show="currentStep === 0"
          :save-content="handleSubmit"
          @currentDataFlowMethodEmitNext="handleNextDataFlowParams"
        />
        <!-- 完善配置参数 -->
        <DataFlowParams
          ref="dataFlowParamsRef"
          v-show="currentStep === 1"
          :dataFlowType="dataFlowType"
          @currentDataFlowParamsEmitPrevStep="handlePrevDataFlowMethod"
        />
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup name="DataFlowModal">
  import { ref, nextTick, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { add } from '/@/components/Form/src/componentMap';
  import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
  import TransferTableModal from '/@/components/Form/src/components/TransferTableModal.vue';
  import { DataFlowMethod, DataFlowParams } from './index';
  import { stepConfig, removeFieldByModeForm } from './config';
  import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUtil } from '../../hooks/index.hook';
  import { BusinessDataFlowTextEnum } from '../../enum';

  add('TransferModal', TransferModal);

  add('TransferTableModal', TransferTableModal);

  const emit = defineEmits(['success', 'register']);

  const { hasEditOrView, modalProps, getValue, validateOtherProperity } = useUtil();

  const { createMessage } = useMessage();

  const currentStep = ref(0);

  const dataFlowType = ref('');

  const dataFlowMethodRef = ref<InstanceType<typeof DataFlowMethod>>();

  const dataFlowParamsRef = ref<InstanceType<typeof DataFlowParams>>();

  const businessText = ref('');

  const restData = reactive({
    data: {},
  });

  const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
    await nextTick();
    resetValue();
    const { text, record } = data;
    businessText.value = text;
    restData.data = record;
    setModalProps(modalProps(businessText.value));
    if (!record) return;
    dataFlowType.value = record?.type;
    dataFlowMethodRef.value?.setValue(record);
    setValue(record);
  });

  const handleSubmit = async (closeModalAfterSuccess = true) => {
    try {
      closeModalAfterSuccess && setModalProps({ confirmLoading: true });
      const getDataFlowMethod = await dataFlowMethodRef.value?.getValue();
      const { name, description, ...getDataFlowParams } = await dataFlowParamsRef.value?.getValue();
      removeFieldByModeForm.forEach((item) => {
        Reflect.deleteProperty(getDataFlowParams, item);
      });
      validateOtherProperity(
        getDataFlowParams?.headers,
        getDataFlowParams?.otherProperties,
        getDataFlowParams?.clientProperties
      );
      const data = getValue(description, name, getDataFlowMethod, getDataFlowParams);
      const rest = await postAddConvertApi({ ...restData.data, ...data });
      if (rest) {
        closeModalAfterSuccess && createMessage.success(`${businessText.value}成功`);
        closeModalAfterSuccess && closeModal();
        closeModalAfterSuccess && resetValue();
        //fix 弹窗关闭时闪动问题
        setTimeout(() => {
          emit('success');
        }, 100);
      }
    } finally {
      setModalProps({ confirmLoading: false });
    }
  };

  //设置配置参数
  const setValue = (record) => {
    dataFlowParamsRef.value?.setValue({
      ...record,
      ...record?.configuration,
      name: record?.name,
      description: record?.additionalInfo?.description,
    });
  };

  //下一步
  const handleNextDataFlowParams = async (value) => {
    value
      .then(async (res) => {
        currentStep.value = 1;
        const { type } = res;
        dataFlowType.value = type;
        await nextTick();
        if (hasEditOrView(businessText.value)) {
          setValue(restData.data);
        }
        if (businessText.value === BusinessDataFlowTextEnum.BUSINESS_MODAL_VIEW_TEXT) {
          setModalProps({ showOkBtn: false });
        } else {
          setModalProps({ showOkBtn: true });
        }
      })
      .catch(() => {
        return;
      });
  };

  //上一步
  const handlePrevDataFlowMethod = (value) => {
    currentStep.value = value;
    setModalProps({ showOkBtn: false });
    if (hasEditOrView(businessText.value)) {
      setValue(restData.data);
    }
  };

  const resetValue = () => {
    currentStep.value = 0;
    dataFlowMethodRef.value?.resetValue();
    dataFlowParamsRef.value?.resetValue();
  };
</script>