<template>
  <div class="root">
    <div class="root-form">
      <div>
        <BasicForm @register="register" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } 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 = () => {
        resetFields();
      };
      const getSonValueFunc = async () => {
        sonValues.value = await validateFields();
        return sonValues.value;
      };
      return {
        getSonValueFunc,
        register,
        setStepOneFieldsValueFunc,
        customResetStepOneFunc,
      };
    },
  });
</script>
<style lang="less" scoped>
  .root {
    width: 100vw;
    height: 30vh;
    .root-form {
      width: 40vw;
      position: relative;
      left: 10vw;
      top: 8vh;
      :deep .ant-btn {
        position: absolute;
        right: 8.1vw;
        top: 6vh;
      }
    }
  }
</style>