<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;
    if (businessText.value == BusinessDataFlowTextEnum.BUSINESS_MODAL_VIEW_TEXT) {
      dataFlowMethodRef.value?.setProps({ disabled: true });
    }
    restData.data = record;
    setModalProps(modalProps(businessText.value));
    if (!record) return;
    dataFlowType.value = record?.type;
    dataFlowMethodRef.value?.setValue(record);
    setValue(record);
  });

  // 判断转换方式
  const isRabbitmq = (type) => {
    return type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
  };
  const isKafka = (type) => {
    return type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
  };

  const handleSubmit = async (closeModalAfterSuccess = true) => {
    try {
      if (closeModalAfterSuccess) {
        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 configuration = {
          ...getDataFlowParams,
          clientId: !isKafka(getDataFlowMethod?.type)
            ? getDataFlowParams.clientId
              ? getDataFlowParams.clientId
              : null
            : undefined,
          kafkaHeadersCharset: isKafka(getDataFlowMethod?.type)
            ? getDataFlowParams?.kafkaHeadersCharset
              ? getDataFlowParams?.kafkaHeadersCharset
              : 'UTF-8'
            : undefined,
          credentials: !isKafka(getDataFlowMethod?.type)
            ? {
                ...getDataFlowParams.credentials,
                type: getDataFlowParams.type,
                username: getDataFlowParams.username ? getDataFlowParams.username : undefined,
                password: getDataFlowParams.password ? getDataFlowParams.password : undefined,
              }
            : undefined,
          appendClientIdSuffix: getDataFlowParams.appendClientIdSuffix || undefined,
          type: undefined,
          username: undefined,
          password: undefined,
        };
        const rest = isRabbitmq(getDataFlowMethod?.type)
          ? await postAddConvertApi({ ...restData.data, ...data })
          : await postAddConvertApi({ ...restData.data, ...data, configuration });
        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?.configuration.description || record?.additionalInfo?.description,
    });
  };

  //下一步
  const handleNextDataFlowParams = async (value) => {
    //判断是否是查看 查看禁用表单
    if (businessText.value == BusinessDataFlowTextEnum.BUSINESS_MODAL_VIEW_TEXT) {
      dataFlowParamsRef.value?.setProps();
    } else {
      dataFlowParamsRef.value?.setCancelDisabled();
    }
    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 = (oldData: { currentStep: number; values: Object }) => {
    currentStep.value = oldData.currentStep;
    setModalProps({ showOkBtn: false });
    if (hasEditOrView(businessText.value)) {
      restData.data = { ...restData.data, configuration: oldData.values };
      setValue(restData.data);
    }
  };

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