<template>
  <div class="step2">
    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
    <div
      style="
        display: flex;
        width: 11vw;
        height: 4vh;
        flex-direction: row;
        justify-content: space-between;
        margin-left: 8vw;
        margin-top: -4vh;
      "
    >
      <div style="display: flex; width: 4vw; height: 4vh">
        <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
          >上一步</Button
        >
      </div>
      <div style="display: flex; width: 4vw; height: 4vh">
        <Button type="default" class="mt-5" @click="customSubmitFunc"> 下一步</Button>
      </div>
    </div>
  </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';
  import { Button } from '/@/components/Button';

  export default defineComponent({
    components: {
      BasicForm,
      [Alert.name]: Alert,
      [Divider.name]: Divider,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      Button,
    },
    emits: ['next', 'prev', 'register'],
    setup(_, { emit }) {
      const [register, { validate, setFieldsValue, resetFields }] = useForm({
        labelWidth: 80,
        schemas: step2Schemas,
        actionColOptions: {
          span: 14,
        },
      });
      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) {
          console.log(error);
        } finally {
        }
      }
      return {
        customResetFunc,
        customSubmitFunc,
        register,
        setStepTwoFieldsValueFunc,
        customClearStepTwoValueFunc,
      };
    },
  });
</script>
<style lang="less" scoped>
  .step2 {
    width: 500px;
    margin: 0 auto;
  }
</style>