<script lang="ts" setup>
  import { onMounted, ref, unref } from 'vue';
  import { modeOne, modeTwo, modeThree, modeFour } from '../config/visualOptions';
  import { useForm, BasicForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ComponentInfo } from '/@/api/dataBoard/model';

  const emit = defineEmits(['close']);

  const recordId = ref('');

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

  const [register, { closeModal }] = useModalInner(
    (data: { recordId: string; componentInfo: ComponentInfo }) => {
      recordId.value = data.recordId;
      method.setFieldsValue(data.componentInfo || {});
    }
  );

  const handleGetValue = () => {
    const value = method.getFieldsValue();
    emit('close', unref(recordId), value);
  };

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

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