<script lang="ts" setup>
  import { modeOne, modeTwo, modeThree, modeFour } from '../config/visualOptions';
  import { useForm, BasicForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  const [registerForm, method] = useForm({
    schemas: modeTwo,
    showActionButtonGroup: false,
    labelWidth: 120,
    baseColProps: {
      span: 12,
    },
  });

  const [register, { closeModal }] = useModalInner();

  const handleGetValue = () => {
    const value = method.getFieldsValue();
    console.log(value);
  };

  const handleClose = () => {
    handleGetValue();
    closeModal();
  };
</script>

<template>
  <BasicModal v-bind="$attrs" @register="register" @ok="handleClose" title="选项" width="60%">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>