<script lang="ts" setup>
  import { useTable, BasicTable } from '/@/components/Table';
  import { getColumns } from './config';
  import { getRuleNodeEventList } from '/@/api/ruleDesigner';
  import { BasicNodeFormData, NodeData } from '../../../../types/node';
  import { computed, reactive, ref, unref, watch } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { EventSelect } from '../EventSelect';
  import { Icon } from '/@/components/Icon';
  import { Tooltip } from 'ant-design-vue';
  import { EventTypeEnum } from '../EventSelect/config';
  import { FilterForm } from '../FilterForm';
  import { useModal } from '/@/components/Modal';
  import { DataActionModeEnum } from '/@/enums/toolEnum';
  import { ElementInfo } from '../../../../hook/useAwaitPopupWindowBindData';
  import ShowDetailModal from './ShowDetailModal.vue';

  const props = defineProps<{
    nodeData?: NodeData<BasicNodeFormData>;
    elementInfo?: ElementInfo;
  }>();

  const userStore = useUserStore();
  const getNodeId = computed(() => props.elementInfo?.id);
  const getTenantId = computed(() => unref(userStore.getUserInfo).tenantId);
  const eventType = ref(EventTypeEnum.DEBUG_RULE_NODE);
  const filterFormElRef = ref<Nullable<InstanceType<typeof FilterForm>>>(null);

  const searchParams = reactive({
    params: {} as Recordable,
    data: {} as Recordable,
  });

  const [register, { reload, setColumns, setPagination }] = useTable({
    columns: getColumns(EventTypeEnum.DEBUG_RULE_NODE),
    showIndexColumn: false,
    useSearchForm: false,
    canResize: true,
    resizeHeightOffset: 76,
    fetchSetting: {
      totalField: 'totalElements',
      listField: 'data',
    },
    showTableSetting: true,
    api: async (params: Record<'page' | 'pageSize', number>) => {
      const result = await getRuleNodeEventList(
        unref(getNodeId)!,
        {
          page: params.page - 1,
          pageSize: params.pageSize,
          tenantId: unref(getTenantId),
          ...searchParams.params,
        },
        { ...searchParams.data, eventType: unref(eventType) }
      );

      return result;
    },
  });

  const [registerModal, { openModal }] = useModal();

  const handleOpenFilterForm = () => {
    openModal(true, {
      mode: DataActionModeEnum.READ,
      record: { type: unref(eventType) },
    } as ModalParamsType<{ type: EventTypeEnum }>);
  };

  const handleRemoveFilterQueue = () => {
    unref(filterFormElRef)?.resetFields();
    handleReset();
  };

  const handleFilterChange = (searchValue: Record<'data' | 'params', Recordable>) => {
    const { data, params } = searchValue;
    handleReset(data, params);
  };

  const handleReset = (data: Recordable = {}, params: Recordable = {}) => {
    searchParams.data = data;
    searchParams.params = params;
    setPagination({ current: 1 });
    reload();
  };

  const handleEventTypeChange = () => {
    setColumns(getColumns(unref(eventType)));
    handleReset();
  };

  const [registerDetailModal, { openModal: openDetailModal }] = useModal();

  const handleOpenDetailModal = (text: string) => {
    openDetailModal(true, {
      mode: DataActionModeEnum.READ,
      record: text,
    } as ModalParamsType<string>);
  };

  watch(
    () => props.elementInfo?.id,
    () => {
      reload();
    }
  );
</script>

<template>
  <section class="bg-gray-100 dark:bg-dark-200 p-4 h-full">
    <BasicTable @register="register" class="debug-table h-full">
      <template #tableTitle>
        <EventSelect v-model:type="eventType" @change="handleEventTypeChange" />
      </template>
      <template #toolbar>
        <Tooltip title="过滤器">
          <Icon
            icon="material-symbols:filter-list"
            class="cursor-pointer svg:text-2xl"
            @click="handleOpenFilterForm"
          />
        </Tooltip>
        <Tooltip title="重置">
          <Icon
            icon="mdi:filter-variant-remove"
            class="cursor-pointer svg:text-2xl"
            @click="handleRemoveFilterQueue"
          />
        </Tooltip>
      </template>
      <template #error="{ text }">
        <Icon
          icon="material-symbols:more-horiz"
          class="cursor-pointer svg:text-2xl"
          @click="handleOpenDetailModal(text)"
        />
      </template>
    </BasicTable>

    <FilterForm
      ref="filterFormElRef"
      @register="registerModal"
      @filterChange="handleFilterChange"
    />

    <ShowDetailModal @register="registerDetailModal" />
  </section>
</template>

<style lang="less" scoped></style>