<template>
  <div class="transfer-config-mode">
    <BasicForm @register="register" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { modeForm } from './config';
  import { Select, Input, Divider } from 'ant-design-vue';

  export default defineComponent({
    components: {
      BasicForm,
      [Select.name]: Select,
      [Input.name]: Input,
      [Input.Group.name]: Input.Group,
      [Divider.name]: Divider,
    },
    emits: ['next', 'resetFunc', 'register'],
    setup(_, { emit }) {
      const sonValues = ref({});
      const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
        labelWidth: 100,
        schemas: modeForm,
        actionColOptions: {
          span: 14,
        },
        showResetButton: false,
        submitButtonOptions: {
          text: '下一步',
        },
        submitFunc: customSubmitFunc,
      });
      //提交数据
      async function customSubmitFunc() {
        try {
          const values = await validateFields();
          emit('next', values);
        } catch (error) {}
      }
      //回显数据
      const setStepOneFieldsValueFunc = (v) => {
        setFieldsValue(v);
      };

      //清空数据
      const customResetStepOneFunc = () => {
        nextTick(() => {
          resetFields();
        });
      };
      const getSonValueFunc = async () => {
        sonValues.value = await validateFields();
        return sonValues.value;
      };
      return {
        getSonValueFunc,
        register,
        setStepOneFieldsValueFunc,
        customResetStepOneFunc,
      };
    },
  });
</script>
<style lang="less">
  .transfer-config-mode {
    margin: 0 auto;
    width: 600px;
  }
</style>