<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 { RouteParams, useRoute } from 'vue-router';
  import { addDataComponent, updateDataComponent } from '/@/api/dataBoard';
  import { useModalInner } from '/@/components/Modal';
  import { DataBoardLayoutInfo } from '../../types/type';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { decode } from '../../config/config';

  interface DataComponentRouteParams extends RouteParams {
    id: string;
  }

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

  const ROUTE = useRoute();

  const { createMessage } = useMessage();

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

  const frontId = ref('');

  const isEdit = ref(false);

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

  const [register, { closeModal, changeOkLoading }] = useModalInner(
    (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
      componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
      frontId.value = data.record?.record?.frontId || '';
      isEdit.value = data.isEdit || false;
    }
  );

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

  const handleSubmit = () => {
    const { getAllDataSourceFieldValue } = unref(basicConfigurationEl)!;
    const value = getAllDataSourceFieldValue();
    unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
    isEdit.value = false;
    frontId.value = '';
  };

  const handleAddComponent = async (value: Recordable) => {
    try {
      changeOkLoading(true);
      await addDataComponent({
        boardId: unref(boardId),
        record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value },
      });
      createMessage.success('创建成功');
      closeModal();
      emit('submit');
    } catch (error) {
      // createMessage.error('创建失败');
    } finally {
      changeOkLoading(false);
    }
  };

  const handleUpdateComponent = async (value: Recordable) => {
    try {
      changeOkLoading(true);
      await updateDataComponent({
        boardId: unref(boardId),
        record: {
          id: unref(componentRecord).i,
          dataBoardId: unref(boardId),
          frontId: unref(frontId),
          ...value,
        },
      });
      createMessage.success('修改成功');
      closeModal();
      emit('submit');
    } catch (error) {
      // createMessage.error('修改失败');
    } finally {
      changeOkLoading(false);
    }
  };
</script>

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="自定义组件"
    width="70%"
    :destroy-on-close="true"
    @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>