zsjz-ai/ai-frontend/packages/call/views/sensitive/index.vue

<template>
  <div :class="prefixCls" class="sensitive-page">
    <div class="filter-bar">
      <div class="filter-item">
        <span class="filter-label">选择对象:</span>
        <Select
          v-model:value="filters.target"
          mode="multiple"
          allow-clear
          max-tag-count="responsive"
          class="filter-input"
          :options="targetOptions"
          placeholder="全部"
          :getPopupContainer="getPagePopupContainer"
        />
      </div>
      <div class="filter-item">
        <span class="filter-label">联系日期:</span>
        <RangePicker
          v-model:value="filters.dateRange"
          class="filter-input filter-date"
          :format="DATE_FORMAT"
          :value-format="DATE_FORMAT"
          :placeholder="['开始日期', '结束日期']"
          :getPopupContainer="getPagePopupContainer"
        />
      </div>
      <div class="filter-actions">
        <Button type="primary" :loading="queryLoading" @click="handleSearch">查询</Button>
        <Button @click="handleReset">重置</Button>
        <Button @click="handleOpenSpecialDateModal">特殊日期配置</Button>
      </div>
    </div>

    <div class="content-panel">
      <div class="panel-left">
        <div class="panel-header">
          <div class="panel-title-wrap">
            <div class="panel-title">联系对方汇总</div>
            <div class="panel-desc">找出与对象在敏感日期保持联系的人员或号码。</div>
          </div>
        </div>
        <div class="panel-search">
          <Input
            :value="filters.keyword"
            placeholder="请输入对方姓名/对方号码搜索"
            allow-clear
            @update:value="handleKeywordUpdate"
            @pressEnter="handleKeywordEnter"
          />
        </div>
        <div v-if="!hasSearched" class="query-state-panel">
          <EmptyState
            variant="query"
            title="请点击查询"
            description="设置条件精细查询，也可点击查询展示所有信息"
            min-height="100%"
            description-width="min(100%, 420px)"
          />
        </div>
        <div v-else class="table-wrapper" :class="{ 'table-wrapper--compact': isSummaryTableCompact }">
          <BasicTable
            :columns="summaryColumns"
            :data-source="summaryData"
            :pagination="false"
            :show-table-setting="false"
            :table-setting="{ setting: true, size: true, redo: false, fullScreen: false }"
            :can-resize="!isSummaryTableCompact"
            :is-can-resize-parent="true"
            :resize-height-offset="32"
            :rowClassName="summaryRowClassName"
            row-key="id"
            @change="handleSummaryTableChange"
            @row-click="handleSummaryRowClick"
          />
        </div>
        <div v-if="hasSearched" class="pagination-bar">
          <AnalysisPagination
            :total="summaryTotal"
            :current="summaryPagination.current"
            :page-size="summaryPagination.pageSize"
            :page-size-options="pageSizeOptions"
            :loading="queryLoading"
            @change="handleSummaryPaginationChange"
          />
        </div>
      </div>

      <div class="panel-right">
        <div class="panel-header panel-header--actions">
          <div class="panel-title-wrap">
            <div class="panel-title">通话详情</div>
            <div class="panel-desc">敏感日期通话明细</div>
          </div>
        </div>
        <div class="table-wrapper table-wrapper--detail">
          <div v-if="detailLoading && !festivalData.length" class="panel-empty panel-empty--record"
            >敏感日期通话明细加载中...</div
          >
          <BasicTable
            v-else-if="festivalData.length"
            :columns="festivalColumns"
            :action-column="detailActionColumn"
            :data-source="festivalData"
            :loading="detailLoading"
            :pagination="false"
            :show-table-setting="false"
            :table-setting="{ setting: true, size: true, redo: false, fullScreen: false }"
            :can-resize="true"
            :is-can-resize-parent="true"
            :resize-height-offset="32"
            row-key="id"
          />
          <div v-else class="panel-empty panel-empty--state panel-empty--record">
            <EmptyState
              :title="selectedSummaryRow ? '暂无数据' : '请选择对象'"
              :description="
                selectedSummaryRow ? '当前选中对象暂无敏感日期通话记录' : '左侧选中联系人后，在这里查看敏感日期通话明细'
              "
              :min-height="240"
            />
          </div>
        </div>
        <div v-if="showDetailPagination" class="pagination-bar">
          <AnalysisPagination
            :total="detailTotal"
            :current="detailPagination.current"
            :page-size="detailPagination.pageSize"
            :page-size-options="pageSizeOptions"
            :loading="detailLoading"
            @change="handleDetailPaginationChange"
          />
        </div>
      </div>
    </div>

    <SpecialDateConfigModal v-model:open="specialDateModalOpen" summary="统一维护敏感日期联系分析使用的特殊日期配置" />
  </div>
</template>
<script lang="ts" setup name="ViewsSensitiveIndex">
  import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { Select, Input, DatePicker, Button } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { BasicTable } from '@jeesite/core/components/Table';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { useAnalysisRefreshPrompt } from '@jeesite/core/hooks/web/useAnalysisRefreshPrompt';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useTableSkill } from '@jeesite/core/hooks/web/useTableSkill';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { maskCertNo } from '@jeesite/core/utils/sensitive';
  import { useTimeSeriesJump } from '@jeesite/otg/hooks/useTimeSeriesJump';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { statFirstCallSensitive, statSecondCallSensitive } from '@jeesite/call/api/callApi';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import SpecialDateConfigModal from '@jeesite/person/views/components/SpecialDateConfigModal.vue';
  import type { CallSensitiveDTO, CallRecord } from '@jeesite/call/api/types/dto';
  import type { CallSensitiveQuery } from '@jeesite/call/api/types/query';

  const { prefixCls } = useDesign('sensitive');
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const { jumping, jumpToBehaviorSpacetime } = useTimeSeriesJump();
  const route = useRoute();
  const RangePicker = DatePicker.RangePicker;
  const DATE_FORMAT = 'YYYY-MM-DD';
  type RangeValue = [string, string] | undefined;
  const getPagePopupContainer = (triggerNode?: HTMLElement) =>
    (triggerNode?.closest('.sensitive-page') as HTMLElement | null) || document.body;

  const filters = ref({
    target: [] as string[],
    dateRange: undefined as RangeValue,
    keyword: '',
  });

  const summaryPagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });

  const summaryTotal = ref(0);
  const summaryData = ref<any[]>([]);
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchSummaryTable(),
    hasData: () => hasSearched.value && summaryData.value.length > 0,
  });
  const jumpPage = ref('1');

  const detailLoading = ref(false);
  const detailPagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });
  const detailTotal = ref(0);
  const detailJumpPage = ref('1');
  const selectedSummaryRow = ref<any | null>(null);

  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const summaryKeywordTimer = ref<ReturnType<typeof setTimeout> | null>(null);
  const DEFAULT_SUMMARY_SORT_KEY = 'callCount';
  const DEFAULT_SUMMARY_SORT_ORDER = 'DESC' as const;
  type SummarySortOrder = 'ASC' | 'DESC';
  const summarySortKey = ref(DEFAULT_SUMMARY_SORT_KEY);
  const summarySortOrder = ref<SummarySortOrder>(DEFAULT_SUMMARY_SORT_ORDER);
  const specialDateModalOpen = ref(false);

  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value,
  }));

  const summaryColumns = computed(() => [
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 120 },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 120 },
    { title: '对方号码', dataIndex: 'otherNumber', key: 'otherNumber', width: 160 },
    {
      title: '联系次数',
      dataIndex: 'count',
      key: 'count',
      width: 120,
      sorter: true,
      sortOrder:
        summarySortKey.value === DEFAULT_SUMMARY_SORT_KEY
          ? summarySortOrder.value === 'ASC'
            ? 'ascend'
            : 'descend'
          : undefined,
    },
  ]);

  const summaryTotalPages = computed(() => {
    if (!summaryTotal.value) return 1;
    return Math.max(1, Math.ceil(summaryTotal.value / summaryPagination.value.pageSize));
  });

  const SUMMARY_COMPACT_ROW_LIMIT = 9;
  const isSummaryTableCompact = computed(
    () =>
      summaryTotalPages.value <= 1 &&
      summaryData.value.length > 0 &&
      summaryData.value.length <= SUMMARY_COMPACT_ROW_LIMIT,
  );

  const detailTotalPages = computed(() => {
    if (!detailTotal.value) return 1;
    return Math.max(1, Math.ceil(detailTotal.value / detailPagination.value.pageSize));
  });
  const showDetailPagination = computed(() => festivalData.value.length > 0);

  const normalizeList = (resp: any): CallSensitiveDTO[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.list)) return resp.list;
    if (Array.isArray(resp?.data)) return resp.data;
    if (Array.isArray(resp?.data?.list)) return resp.data.list;
    if (Array.isArray(resp?.records)) return resp.records;
    if (Array.isArray(resp?.data?.records)) return resp.data.records;
    return [];
  };

  const normalizeTotal = (resp: any, listLen: number) => {
    const t = resp?.total ?? resp?.data?.total ?? resp?.count ?? resp?.data?.count ?? resp?.data?.records?.length;
    return Number.isFinite(Number(t)) ? Number(t) : listLen;
  };

  const normalizeCurrent = (resp: any, fallback: number) => {
    const current = resp?.current ?? resp?.data?.current ?? fallback;
    return Number.isFinite(Number(current)) && Number(current) > 0 ? Number(current) : fallback;
  };

  const normalizeSize = (resp: any, fallback: number) => {
    const size = resp?.size ?? resp?.data?.size ?? fallback;
    return Number.isFinite(Number(size)) && Number(size) > 0 ? Number(size) : fallback;
  };

  const normalizeSelectedTargets = (value?: string[] | string | null) => {
    if (Array.isArray(value)) {
      const list = value.map((item) => String(item).trim()).filter(Boolean);
      return list.length ? Array.from(new Set(list)) : [];
    }
    if (!value) return [];
    const list = String(value)
      .split(',')
      .map((item) => item.trim())
      .filter(Boolean);
    return list.length ? Array.from(new Set(list)) : [];
  };

  const mapSummaryRow = (item: CallSensitiveDTO, index: number) => ({
    id: (summaryPagination.value.current - 1) * summaryPagination.value.pageSize + index + 1,
    personName: item.personName || '-',
    otherName: item.otherName || '-',
    otherNumber: item.otherPhone || '-',
    count: `共联系${item.callCount ?? 0}次`,
    countValue: Number(item.callCount ?? 0) || 0,
    raw: item,
  });

  const sortSummaryList = (list: CallSensitiveDTO[]) =>
    [...list].sort((left, right) => {
      const leftCount = Number(left.callCount ?? 0) || 0;
      const rightCount = Number(right.callCount ?? 0) || 0;
      if (rightCount !== leftCount) {
        return summarySortOrder.value === 'ASC' ? leftCount - rightCount : rightCount - leftCount;
      }

      return String(left.otherName || left.otherPhone || '').localeCompare(
        String(right.otherName || right.otherPhone || ''),
      );
    });

  const resolveSummarySorter = (sorter: any) => {
    if (Array.isArray(sorter)) return sorter[0];
    return sorter;
  };

  const clearSummaryKeywordTimer = () => {
    if (summaryKeywordTimer.value) {
      clearTimeout(summaryKeywordTimer.value);
      summaryKeywordTimer.value = null;
    }
  };

  const buildQuery = (): CallSensitiveQuery => {
    const range = filters.value.dateRange as RangeValue;
    const personNames = normalizeSelectedTargets(filters.value.target);
    const keyword = filters.value.keyword?.trim() || '';
    return {
      page: summaryPagination.value.current,
      limit: summaryPagination.value.pageSize,
      startDate: range?.[0] || undefined,
      endDate: range?.[1] || undefined,
      personNames: personNames.length ? personNames : undefined,
      keyword,
      orderKey: summarySortKey.value,
      sort: summarySortOrder.value,
    };
  };

  const fetchSummaryTable = async () => {
    await runWithQueryLoading(async () => {
      const resp = await statFirstCallSensitive(buildQuery());
      const list = sortSummaryList(normalizeList(resp));
      summaryData.value = list.map(mapSummaryRow);
      summaryTotal.value = normalizeTotal(resp, list.length);
      hasSearched.value = true;
      syncAnalysisDataRefreshState(list.length > 0);

      const current = Number((resp as any)?.data?.current || summaryPagination.value.current);
      const size = Number((resp as any)?.data?.size || summaryPagination.value.pageSize);
      if (Number.isFinite(current) && current > 0) summaryPagination.value.current = current;
      if (Number.isFinite(size) && size > 0) summaryPagination.value.pageSize = size;
      jumpPage.value = String(summaryPagination.value.current);
    });
  };

  const handleSearch = async () => {
    clearSummaryKeywordTimer();
    summaryPagination.value.current = 1;
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handleReset = async () => {
    clearSummaryKeywordTimer();
    filters.value = {
      target: [],
      dateRange: undefined,
      keyword: '',
    };
    summaryPagination.value.current = 1;
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handlePrevPage = async () => {
    if (queryLoading.value || summaryPagination.value.current <= 1) return;
    summaryPagination.value.current -= 1;
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handleNextPage = async () => {
    if (queryLoading.value || summaryPagination.value.current >= summaryTotalPages.value) return;
    summaryPagination.value.current += 1;
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handleSummaryPaginationChange = async (page: number, pageSize: number) => {
    if (queryLoading.value) return;
    if (pageSize !== summaryPagination.value.pageSize) {
      summaryPagination.value.pageSize = pageSize;
      await handlePageSizeChange();
      return;
    }
    if (page === summaryPagination.value.current - 1) {
      await handlePrevPage();
      return;
    }
    if (page === summaryPagination.value.current + 1) {
      await handleNextPage();
      return;
    }
    if (page === summaryPagination.value.current) return;
    jumpPage.value = String(page);
    await handleJumpPage();
  };

  const handlePageSizeChange = async () => {
    summaryPagination.value.current = 1;
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handleJumpPage = async () => {
    const next = Number(jumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      jumpPage.value = String(summaryPagination.value.current);
      return;
    }
    summaryPagination.value.current = Math.min(next, summaryTotalPages.value);
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const triggerKeywordSearch = async () => {
    if (!hasSearched.value) return;
    clearSummaryKeywordTimer();
    summaryPagination.value.current = 1;
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handleKeywordUpdate = (value: string) => {
    filters.value.keyword = value;
    clearSummaryKeywordTimer();
    if (!hasSearched.value) return;
    summaryKeywordTimer.value = setTimeout(() => {
      void triggerKeywordSearch();
    }, 300);
  };

  const handleKeywordEnter = async () => {
    if (!hasSearched.value) return;
    await triggerKeywordSearch();
  };

  const handleSummaryTableChange = async (_pagination: any, _filters: any, sorter: any) => {
    const currentSorter = resolveSummarySorter(sorter);
    if (!currentSorter) return;

    const columnKey = String(currentSorter.field || currentSorter.columnKey || '');
    if (columnKey !== 'count') return;

    summarySortKey.value = DEFAULT_SUMMARY_SORT_KEY;
    summarySortOrder.value = currentSorter.order === 'ascend' ? 'ASC' : DEFAULT_SUMMARY_SORT_ORDER;
    summaryPagination.value.current = 1;
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const fetchTargetOptions = async () => {
    try {
      targetOptions.value = await getPersonOptions(false);
    } catch (error) {
      targetOptions.value = [];
    }
  };

  const applyRouteQuery = (targetOptions: Array<{ label: string; value: string }>) => {
    const personNames = normalizeSelectedTargets(
      (route.query.personNames as string | string[] | null | undefined) ??
        (route.query.personName as string | string[] | null | undefined),
    );
    const otherName = String(route.query.otherName || '').trim();

    filters.value.target = personNames.map((personName) => {
      const matched = targetOptions.find((item) => String(item.label).trim() === personName);
      return matched ? matched.value : personName;
    });

    if (otherName) {
      filters.value.keyword = otherName;
    }

    return !!(filters.value.target.length || otherName);
  };

  const handleOpenSpecialDateModal = () => {
    specialDateModalOpen.value = true;
  };

  const festivalColumns = [
    { title: '序号', dataIndex: 'id', key: 'id', width: 80 },
    { title: '节日名称', dataIndex: 'festivalName', key: 'festivalName', width: 120 },
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 120 },
    { title: '本方号码', dataIndex: 'personPhone', key: 'personPhone', width: 140 },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 140 },
    { title: '对方号码', dataIndex: 'otherPhone', key: 'otherPhone', width: 140 },
    { title: '通话日期时间', dataIndex: 'callDateTime', key: 'callDateTime', width: 180 },
    { title: '通话时长(秒)', dataIndex: 'duration', key: 'duration', width: 120 },
    { title: '主被叫', dataIndex: 'callDirection', key: 'callDirection', width: 100 },
    { title: '本方基站大区号', dataIndex: 'personRegionId', key: 'personRegionId', width: 140 },
    { title: '本方基站小区号', dataIndex: 'personCellId', key: 'personCellId', width: 140 },
    { title: '本方基站名称', dataIndex: 'personStationName', key: 'personStationName', width: 220 },
    { title: '运营商', dataIndex: 'operatorId', key: 'operatorId', width: 120 },
    { title: '本方号码归属地', dataIndex: 'personPhoneArea', key: 'personPhoneArea', width: 160 },
    { title: '本方证件号码', dataIndex: 'personCertNo', key: 'personCertNo', width: 180 },
    { title: '通话类型', dataIndex: 'callType', key: 'callType', width: 100 },
    { title: '对方号码归属地', dataIndex: 'otherPhoneArea', key: 'otherPhoneArea', width: 160 },
    { title: '对方证件号码', dataIndex: 'otherCertNo', key: 'otherCertNo', width: 180 },
    { title: '备注', dataIndex: 'remark', key: 'remark', width: 180 },
  ];

  const mapCallDirection = (value?: string) => {
    if (!value) return '-';
    if (value === 'CALL_IN') return '被叫';
    if (value === 'CALL_OUT') return '主叫';
    return value;
  };

  const mapCallType = (value?: string) => {
    if (!value) return '-';
    if (value === 'VOICE') return '语音';
    if (value === 'VIDEO') return '视频';
    return value;
  };

  const mapDetailRow = (item: CallRecord, index: number) => ({
    id: (detailPagination.value.current - 1) * detailPagination.value.pageSize + index + 1,
    festivalName: item.festivalName || '-',
    personName: item.personName || '-',
    personPhone: item.personPhone || '-',
    operatorId: item.operatorId || '-',
    personPhoneArea: item.personPhoneArea || '-',
    personCertNo: maskCertNo(item.personCertNo),
    personRegionId: item.personRegionId || '-',
    personCellId: item.personCellId || '-',
    personStationName: item.personStationName || '-',
    personStationLongitude: item.personStationLongitude || '-',
    personStationLatitude: item.personStationLatitude || '-',
    callDateTime: item.callDateTime || (item.callDate && item.callTime ? `${item.callDate} ${item.callTime}` : '-'),
    otherName: item.otherName || '-',
    otherPhone: item.otherPhone || '-',
    callDate: item.callDate || '-',
    callTime: item.callTime || '-',
    duration: item.duration ?? 0,
    callDirection: mapCallDirection(item.callDirection),
    callType: mapCallType(item.callType),
    otherPhoneArea: item.otherPhoneArea || '-',
    otherCertNo: maskCertNo(item.otherCertNo),
    remark: item.remark || '-',
    personLibId: item.personLibId || '-',
    raw: item,
  });

  const normalizeActionRecordId = (value: unknown) => {
    const text = String(value ?? '').trim();
    if (!text || text === '-' || text === 'null' || text === 'undefined') return undefined;
    return text;
  };

  const buildJumpQuery = (record?: CallRecord) => {
    const id = normalizeActionRecordId(record?.id);
    const personName = String(record?.personName || selectedSummaryRow.value?.raw?.personName || '').trim();
    return {
      hasLocal: 'N',
      tableName: 'call_record',
      tableNameEn: 'call_record',
      tableNameCn: '通信记录',
      id,
      personName: personName || undefined,
      personNames: personName ? [personName] : undefined,
    };
  };

  const handleJump = async (record?: CallRecord) => {
    await jumpToBehaviorSpacetime(buildJumpQuery(record));
  };

  const detailActionColumn = computed(() => ({
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 90,
    fixed: 'right',
    align: 'center',
    actions: (record: { raw?: CallRecord }) => {
      const rawRecord = record.raw;
      const query = buildJumpQuery(rawRecord);
      return [
        {
          label: '跳转',
          disabled: jumping.value || !query.id,
          onClick: () => void handleJump(rawRecord),
        },
      ];
    },
  }));

  const festivalData = ref<any[]>([]);

  const resetDetailPagination = () => {
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
  };

  const fetchDetailTable = async (row?: any) => {
    const current = row || selectedSummaryRow.value;
    if (!current) {
      festivalData.value = [];
      detailTotal.value = 0;
      detailJumpPage.value = '1';
      return;
    }

    selectedSummaryRow.value = current;
    detailLoading.value = true;
    try {
      const range = filters.value.dateRange as RangeValue;
      const resp = await statSecondCallSensitive({
        page: detailPagination.value.current,
        limit: detailPagination.value.pageSize,
        startDate: range?.[0] || undefined,
        endDate: range?.[1] || undefined,
        personName: current.raw?.personName || undefined,
        otherName: current.raw?.otherName || undefined,
        otherPhone: current.raw?.otherPhone || undefined,
      });

      const records = Array.isArray((resp as any)?.records)
        ? (resp as any).records
        : Array.isArray((resp as any)?.data?.records)
          ? (resp as any).data.records
          : [];
      festivalData.value = records.map(mapDetailRow);
      detailTotal.value = normalizeTotal(resp, records.length);
      detailPagination.value.current = normalizeCurrent(resp, detailPagination.value.current);
      detailPagination.value.pageSize = normalizeSize(resp, detailPagination.value.pageSize);
      detailJumpPage.value = String(detailPagination.value.current);
    } catch (error) {
      festivalData.value = [];
      detailTotal.value = 0;
      createMessage.warning('敏感第二层详情接口调用失败');
    } finally {
      detailLoading.value = false;
    }
  };

  const handleSummaryRowClick = async (record: any) => {
    resetDetailPagination();
    await fetchDetailTable(record);
  };

  const refreshRightByFirstRow = async () => {
    resetDetailPagination();
    if (summaryData.value.length) {
      await fetchDetailTable(summaryData.value[0]);
    } else {
      festivalData.value = [];
      detailTotal.value = 0;
      detailJumpPage.value = '1';
      selectedSummaryRow.value = null;
    }
  };

  const handleDetailPrevPage = async () => {
    if (detailLoading.value || detailPagination.value.current <= 1) return;
    detailPagination.value.current -= 1;
    await fetchDetailTable();
  };

  const handleDetailNextPage = async () => {
    if (detailLoading.value || detailPagination.value.current >= detailTotalPages.value) return;
    detailPagination.value.current += 1;
    await fetchDetailTable();
  };

  const handleDetailPaginationChange = async (page: number, pageSize: number) => {
    if (detailLoading.value) return;
    if (pageSize !== detailPagination.value.pageSize) {
      detailPagination.value.pageSize = pageSize;
      await handleDetailPageSizeChange();
      return;
    }
    if (page === detailPagination.value.current - 1) {
      await handleDetailPrevPage();
      return;
    }
    if (page === detailPagination.value.current + 1) {
      await handleDetailNextPage();
      return;
    }
    if (page === detailPagination.value.current) return;
    detailJumpPage.value = String(page);
    await handleDetailJumpPage();
  };

  const handleDetailPageSizeChange = async () => {
    detailPagination.value.current = 1;
    await fetchDetailTable();
  };

  const handleDetailJumpPage = async () => {
    const next = Number(detailJumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      detailJumpPage.value = String(detailPagination.value.current);
      return;
    }
    detailPagination.value.current = Math.min(next, detailTotalPages.value);
    await fetchDetailTable();
  };

  const summaryRowClassName = (record: any) => {
    return selectedSummaryRow.value && selectedSummaryRow.value.id === record.id ? 'summary-row-selected' : '';
  };

  onMounted(async () => {
    await fetchTargetOptions();
    if (applyRouteQuery(targetOptions.value)) {
      await handleSearch();
    }
  });

  onBeforeUnmount(() => {
    clearSummaryKeywordTimer();
  });
</script>
<style lang="less">
  @import (reference) '../../../trans/views/styles/trans-analysis-table-ui.less';

  @prefix-cls: ~'jeesite-sensitive';

  .@{prefix-cls}.sensitive-page {
    .trans-analysis-table-ui();

    background: #fff;
    padding: 0 8px 2px;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding-left: 0;
    padding-right: 0;

    :deep(.ant-btn) {
      border-radius: 8px;
    }

    :deep(.ant-btn-primary) {
      box-shadow: none;
    }

    :deep(.ant-input),
    :deep(.ant-input-affix-wrapper),
    :deep(.ant-picker),
    :deep(.ant-select-selector) {
      border-radius: 8px;
    }

    & > .filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px;
      min-height: 40px;
      border: 0;
      border-bottom: 1px solid #e5e7eb;
      border-radius: 0;
      background: transparent;
      flex-wrap: wrap;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    & > .filter-bar > .filter-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .filter-label {
      color: #6b7280;
      font-size: 12px;
      white-space: nowrap;
    }

    .filter-input {
      width: 180px;
    }

    .filter-date {
      width: 360px;
    }

    & > .filter-bar > .filter-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    & > .filter-bar .filter-input,
    & > .filter-bar .filter-date,
    & > .filter-bar .filter-actions :deep(.ant-btn) {
      align-self: center;
    }

    .panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 12px;
      padding: 0 0 8px;
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #f1f5f9;
      flex: 0 0 auto;
    }

    .panel-header.jeesite-basic-table-panel-setting-host {
      border-bottom: 1px solid #f1f5f9;
    }

    .panel-header--actions {
      align-items: center;
    }

    .panel-title-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      line-height: 22px;
    }

    .panel-desc {
      color: #6b7280;
      font-size: 12px;
      line-height: 20px;
    }

    .panel-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .panel-search {
      padding: 0;
      margin-bottom: 0;
      width: 100%;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .content-panel > .panel-left > .panel-search,
    .content-panel > .panel-right > .panel-search {
      padding: 0;
      margin: 0;
    }

    .panel-search :deep(.ant-input),
    .panel-search :deep(.ant-input-affix-wrapper) {
      width: 100%;
    }

    .table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      margin: 0;
      width: 100%;
      box-sizing: border-box;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: hidden;
    }

    .content-panel > .panel-left > .table-wrapper,
    .content-panel > .panel-right > .table-wrapper {
      margin: 0;
    }

    .table-wrapper .jeesite-basic-table {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .table-wrapper .jeesite-basic-table > div:first-child {
      display: none;
    }

    .table-wrapper .ant-table-wrapper,
    .table-wrapper .ant-spin-nested-loading,
    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      height: 100%;
      min-height: 0;
    }

    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      display: flex;
      flex-direction: column;
    }

    .table-wrapper .ant-table-body {
      max-height: 100% !important;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar-thumb {
      background: rgb(148 163 184 / 60%);
      border-radius: 999px;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .table-wrapper--compact {
      flex: 0 0 auto;
    }

    .query-state-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0 0;
    }

    .table-wrapper--compact .jeesite-basic-table,
    .table-wrapper--compact .ant-table-wrapper,
    .table-wrapper--compact .ant-spin-nested-loading,
    .table-wrapper--compact .ant-spin-container,
    .table-wrapper--compact .ant-table,
    .table-wrapper--compact .ant-table-container {
      height: auto;
    }

    .table-wrapper--compact .ant-table-body {
      overflow-y: hidden !important;
      scrollbar-width: none;
    }

    .table-wrapper--compact .ant-table-body::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .table-wrapper--compact :deep(.ant-table-cell-scrollbar) {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
    }

    .table-wrapper :deep(.ant-table-thead > tr > th),
    .table-wrapper :deep(.ant-table-tbody > tr > td) {
      vertical-align: middle;
    }

    .panel-export {
      flex-shrink: 0;
    }

    .pagination-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      color: #6b7280;
      font-size: 12px;
      flex: 0 0 auto;
      flex-wrap: wrap;
      padding: 0;
      width: 100%;
      box-sizing: border-box;
      border-top: 1px solid #f1f5f9;
      background: transparent;
    }

    .content-panel > .panel-left > .pagination-bar,
    .content-panel > .panel-right > .pagination-bar {
      padding: 0;
      margin: 0;
    }

    .pagination-total {
      margin-right: 0;
      white-space: nowrap;
    }

    .pagination-size,
    .pagination-actions,
    .pagination-jump {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .pagination-input {
      width: 48px;
    }

    .table-wrapper--detail {
      margin-bottom: 0;
    }

    .analysis-flat-layout();

    padding: 0 8px 2px;

    > .filter-bar {
      padding: 6px;
      min-height: 40px;
      box-sizing: border-box;
    }

    > .filter-bar > .filter-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    > .filter-bar > .filter-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    > .filter-bar .filter-input,
    > .filter-bar .filter-date,
    > .filter-bar .filter-actions :deep(.ant-btn) {
      align-self: center;
    }

    .content-panel {
      display: flex;
      gap: 2px;
      margin-top: 0;
      padding-top: 2px;
      padding-left: 2px;
      padding-right: 2px;
      padding-bottom: 2px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      background: #edf2f7;
      box-sizing: border-box;
    }

    .content-panel > .panel-left,
    .content-panel > .panel-right {
      border: 0;
      border-radius: 12px;
      background: #fff;
      box-shadow: inset 0 0 0 1px #e2e8f0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 8px;
      box-sizing: border-box;
    }

    .content-panel > .panel-left {
      flex: 0 0 42%;
      min-width: 0;
    }

    .content-panel > .panel-right {
      flex: 1 1 auto;
      min-width: 0;
    }

    @media screen and (max-width: 900px) {
      .content-panel {
        flex-direction: column;
      }

      .panel-left {
        flex-basis: auto;
      }
    }

    @media screen and (max-width: 992px) {
      .filter-actions {
        width: 100%;
        margin-left: 0;
      }

      .filter-input,
      .filter-date {
        width: 100%;
      }

      .pagination-bar {
        justify-content: flex-start;
      }
    }
  }
</style>