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