<template>
  <BasicModal @register="registerModal" v-bind="$attrs" title="管理设备凭证">
    <BasicForm @register="registerForm" @cancel="handleCancel" @ok="handleOk">
      <template #addAgree="{ model, field }">
        <Checkbox v-model:checked="model[field]" @change="checkedChange" />
        <span class="ml-2">添加协议</span>
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { useModalInner, BasicModal } from '/@/components/Modal';
  import { Checkbox } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } from '../../config/data';

  export default defineComponent({
    components: {
      BasicModal,
      BasicForm,
      Checkbox,
    },
    emits: ['register'],
    setup() {
      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        console.log(data);
      });
      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: 'credentialsId',
              ifShow: false,
            },
            {
              field: 'clientId',
              ifShow: false,
            },
            {
              field: 'username',
              ifShow: false,
            },
            {
              field: 'password',
              ifShow: false,
            },
            {
              field: 'publicKey',
              ifShow: false,
            },
          ]);
          setFieldsValue({
            credentialType: '',
          });
        }
      };
      const handleCancel = () => {
        console.log('取消');
      };
      const handleOk = () => {
        console.log('确定');
      };
      return {
        registerModal,
        registerForm,
        checkedChange,
        handleCancel,
        handleOk,
      };
    },
  });
</script>