<template>
  <div>
    <BasicDrawer
      showFooter
      v-bind="$attrs"
      @register="registerDrawer"
      width="50%"
      @ok="handleOnSubmit"
    >
      <BasicForm @register="registerForm" />
    </BasicDrawer>
  </div>
</template>
<script lang="ts" setup name="publicApi">
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './config';

  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas,
    showActionButtonGroup: false,
  });

  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    await resetFields();
    const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
    setDrawerProps({ title });
    setFieldsValue({ ...data.record });
  });

  const handleOnSubmit = async () => {
    const values = await validate();
    if (!values) return;
    console.log('Get values', values);
  };
</script>