<template>
  <div class="step2">
    <BasicForm @register="register" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { step3Schemas } from './data';
import { Alert, Divider, Descriptions } from 'ant-design-vue';

export default defineComponent({
  components: {
    BasicForm,
    [Alert.name]: Alert,
    [Divider.name]: Divider,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
  },
  emits: ['next', 'prev'],
  setup(_, { emit }) {
    const [register, { validate, setProps }] = useForm({
      labelWidth: 80,
      schemas: step3Schemas,
      actionColOptions: {
        span: 14,
      },
      resetButtonOptions: {
        text: '上一步',
      },
      submitButtonOptions: {
        text: '提交',
      },
      resetFunc: customResetFunc,
      submitFunc: customSubmitFunc,
    });

    async function customResetFunc() {
      emit('prev');
    }

    async function customSubmitFunc() {
      try {
        const values = await validate();
        setProps({
          submitButtonOptions: {
            loading: true,
          },
        });
        setTimeout(() => {
          setProps({
            submitButtonOptions: {
              loading: false,
            },
          });
          emit('next', values);
        }, 1500);
      } catch (error) {}
    }

    return { register };
  },
});
</script>
<style lang="less" scoped>
.step2 {
  width: 450px;
  margin: 0 auto;
}
</style>