<script lang="ts" setup>
  import { computed } from 'vue';
  import { fetchConfigComponent } from '../../../packages';
  import { DataSourceType, PublicFormInstaceType, SelectedWidgetKeys } from '../../index.type';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ConfigType, CreateComponentType } from '../../../packages/index.type';
  import { ref } from 'vue';
  import { unref } from 'vue';
  import { ModalParamsType } from '/#/utils';

  const props = defineProps<{
    selectWidgetKeys: SelectedWidgetKeys;
    componentConfig: CreateComponentType;
  }>();

  const emit = defineEmits(['register', 'ok']);

  const settingFormEl = ref<Nullable<PublicFormInstaceType>>(null);

  const getSettingComponent = computed(() => {
    try {
      const { componentKey } = props.selectWidgetKeys;
      const component = fetchConfigComponent({ key: componentKey } as ConfigType);
      return component;
    } catch (error) {
      return '';
    }
  });

  const currentEditRecord = ref<DataSourceType>({} as DataSourceType);

  const [register, { closeModal }] = useModalInner((data: ModalParamsType<DataSourceType>) => {
    const { record } = data;
    currentEditRecord.value = record;
    setFormValues(record.componentInfo || {});
  });

  const getFormValues = () => {
    return unref(settingFormEl)?.getFormValues();
  };

  const setFormValues = (data: Recordable) => {
    unref(settingFormEl)?.setFormValues(data || {});
  };

  const handleOk = () => {
    const { uuid } = unref(currentEditRecord);
    emit('ok', { uuid, componentInfo: getFormValues() } as DataSourceType);
    closeModal();
  };

  defineExpose({
    getFormValues,
    setFormValues,
  } as PublicFormInstaceType);
</script>

<template>
  <BasicModal @register="register" title="组件设置" @ok="handleOk">
    <!--  -->
    <component ref="settingFormEl" :is="getSettingComponent" />
  </BasicModal>
</template>