<template>
  <div class="step2">
    <BasicForm @register="registerForm">
      <template #addAgree="{ model, field }">
        <Checkbox v-model:checked="model[field]" @change="checkedChange" />添加协议
      </template>
    </BasicForm>
    <div>
      <a-button @click="prevStep">上一步</a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  import { Checkbox } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } from '../../config/data';
  export default defineComponent({
    components: {
      BasicForm,
      Checkbox,
    },

    emits: ['prev', 'next'],
    setup(_, { emit }) {
      const prevStep = () => {
        emit('prev');
      };
      const [
        registerForm,
        { getFieldsValue, updateSchema, validate, resetFields, setFieldsValue },
      ] = useForm({
        labelWidth: 100,
        schemas: step2Schemas,
        actionColOptions: {
          span: 14,
        },
        labelAlign: 'left',
        showSubmitButton: false,
        showResetButton: false,
        wrapperCol: {
          span: 12,
        },
      });
      const checkedChange = async (e) => {
        if (!e.target.checked) {
          await updateSchema([
            {
              field: 'token',
              ifShow: false,
            },
            {
              field: 'clientId',
              ifShow: false,
            },
            {
              field: 'username',
              ifShow: false,
            },
            {
              field: 'password',
              ifShow: false,
            },
            {
              field: 'publicKey',
              ifShow: false,
            },
          ]);
        }
      };
      function resetFieldsValueAndStatus() {
        resetFields();
        setFieldsValue({
          addAgree: false,
        });
        updateSchema([
          {
            field: 'publicKey',
            ifShow: false,
          },
          {
            field: 'token',
            ifShow: false,
          },
          {
            field: 'clientId',
            ifShow: false,
          },
          {
            field: 'username',
            ifShow: false,
          },
          {
            field: 'password',
            ifShow: false,
          },
        ]);
      }

      return {
        prevStep,
        registerForm,
        checkedChange,
        getFieldsValue,
        validate,
        resetFieldsValueAndStatus,
      };
    },
  });
</script>
<style lang="less" scoped>
  .step2 {
    width: 700px;
    margin: 0 auto;
  }
</style>