<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 @next="handleNext" /></div>
        <div v-show="current === 1"> <TransferConfigParams @prev="handlePrev" /></div>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } 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';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: {
      BasicModal,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      TransferConfigMode,
      TransferConfigParams,
    },
    setup() {
      const isUpdate = ref(true);
      const getTitle = computed(() => (!unref(isUpdate) ? '新增转换配置' : '编辑数据转换'));
      const current = ref(0);

      const [registerDrawer] = useModalInner(async (data) => {
        isUpdate.value = !!data?.isUpdate;
        current.value = 0;
      });
      const handleNext = () => {
        current.value++;
      };
      const handlePrev = () => {
        current.value--;
      };
      const handleSubmit = () => {};
      return {
        registerDrawer,
        handleSubmit,
        getTitle,
        current,
        handleNext,
        handlePrev,
      };
    },
  });
</script>