<template>
  <div class="step2">
    <BasicForm @register="register" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } 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', 'register'],
    setup(_, { emit }) {
      const [register, { validate, setFieldsValue, resetFields }] = useForm({
        labelWidth: 80,
        schemas: step2Schemas,
        actionColOptions: {
          span: 14,
        },
        resetButtonOptions: {
          text: '上一步',
        },
        submitButtonOptions: {
          text: '下一步',
        },
        resetFunc: customResetFunc,
        submitFunc: customSubmitFunc,
      });
      const setStepTwoFieldsValueFunc = (v) => {
        setFieldsValue(v);
      };
      const customClearStepTwoValueFunc = () => {
        resetFields();
      };
      async function customResetFunc() {
        emit('prev');
      }
      async function customSubmitFunc() {
        try {
          const values = await validate();
          emit('next', values);
        } catch (error) {
        } finally {
        }
      }
      return { register, setStepTwoFieldsValueFunc, customClearStepTwoValueFunc };
    },
  });
</script>
<style lang="less" scoped>
  .step2 {
    width: 500px;
    margin: 0 auto;
  }
</style>