<script lang="ts" setup>
  import { Tabs } from 'ant-design-vue';
  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
  import BasicConfiguration from './BasicConfiguration.vue';
  import VisualConfiguration from './VisualConfiguration.vue';
  import { computed, ref, unref } from 'vue';
  import type { DataComponentRecord } from '/@/api/dataBoard/model';
  import { RouteParams, useRoute } from 'vue-router';
  import { addDataComponent, updateDataBoardLayout } from '/@/api/dataBoard';
  import { useModalInner } from '/@/components/Modal';
  import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH } from '../../config/config';

  interface DataComponentRouteParams extends RouteParams {
    id: string;
  }

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

  const ROUTE = useRoute();

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

  const basicConfigurationEl = ref<{
    getAllDataSourceFieldValue: Fn<any, Recordable>;
  }>();

  const boardId = computed(() => {
    return (ROUTE.params as DataComponentRouteParams).id;
  });

  const frontId = ref('');

  const componentRecord = ref<DataComponentRecord>({} as unknown as DataComponentRecord);

  const handleSubmit = () => {
    const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!;
    const value = getAllDataSourceFieldValue();
    handleAddComponent(value);
  };

  const handleAddComponent = async (value: Recordable) => {
    try {
      const data = await addDataComponent({
        boardId: unref(boardId),
        record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value },
      });
      const id = data.data.id;
      await updateDataBoardLayout({
        boardId: unref(boardId),
        layout: [{ id, w: DEFAULT_WIDGET_WIDTH, h: DEFAULT_WIDGET_HEIGHT, x: 0, y: 0 }],
      });
      closeModal();
      emit('submit');
    } catch (error) {}
  };
</script>

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="自定义组件"
    width="70%"
    @ok="handleSubmit"
  >
    <section>
      <Tabs type="card">
        <Tabs.TabPane key="1" tab="基础配置">
          <BasicConfiguration
            ref="basicConfigurationEl"
            :front-id="frontId"
            :record="componentRecord"
          />
        </Tabs.TabPane>
        <Tabs.TabPane key="2" tab="可视化配置">
          <VisualConfiguration v-model:value="frontId" />
        </Tabs.TabPane>
      </Tabs>
    </section>
  </BasicModal>
</template>