<template>
  <BasicModal
    v-bind="$attrs"
    @register="pageTableViewModalRegister"
    :title="getTitle"
    width="100%"
    :defaultFullscreen="true"
  >
    <PageWrapper contentBackground content="" contentClass="p-4">
      <div>
        <a-button>1212</a-button>
      </div>
      <div class="step-form-form">
        <Steps :current="current">
          <Steps.Step title="基本配置" />
          <Steps.Step title="表单设计" />
          <Steps.Step title="完成" />
        </Steps>
      </div>
      <div class="mt-5">
        <PageStep1 @next="handleStep1Next" v-show="current === 0" :edit-data="editData" />
        <PageStep2
          @prev="handleStepPrev"
          @next="handleStep2Next"
          v-show="current === 1"
          v-if="state.initStep2"
        />
        <PageStep3 v-show="current === 2" @redo="handleRedo" v-if="state.initStep3" />
      </div>
    </PageWrapper>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { PageWrapper } from '@/components/Page';
  import { ref, reactive, computed, unref } from 'vue';
  import { Steps } from 'ant-design-vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import PageStep1 from './step/pageStep1.vue';
  import PageStep2 from './step/pageStep2.vue';
  import PageStep3 from './step/pageStep3.vue';

  const { t } = useI18n();

  const editData = ref('');

  const [pageTableViewModalRegister, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    editData.value = data;
  });

  const getTitle = computed(() => {
    return unref(editData.value.isUpdate) ? t('表单设计-编辑表格') : t('表单设计-新增表格');
  });

  const current = ref(0);

  const state = reactive({
    initStep2: false,
    initStep3: false,
  });

  function handleStep1Next(step1Values: any) {
    current.value++;
    state.initStep2 = true;
    console.log(step1Values);
  }

  function handleStepPrev() {
    current.value--;
  }

  function handleStep2Next(step2Values: any) {
    current.value++;
    state.initStep3 = true;
    console.log(step2Values);
  }

  function handleRedo() {
    current.value = 0;
    state.initStep2 = false;
    state.initStep3 = false;
  }
</script>
<style lang="less" scoped>
  .step-form-form {
    width: 1050px;
    margin: 0 auto;
  }
</style>
