<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { WidgetComponentType, schemasMap } from '../config/visualOptions';
  import { useForm, BasicForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ComponentInfo } from '/@/api/dataBoard/model';
  import { computed } from '@vue/reactivity';

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

  const props = defineProps<{
    value?: string;
  }>();

  const recordId = ref('');

  const getSchemas = computed(() => {
    return schemasMap.get((props.value as WidgetComponentType) || 'text-component-1');
  });

  const [registerForm, method] = useForm({
    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" :schemas="getSchemas" />
  </BasicModal>
</template>