zsjz-ai/ai-frontend/packages/trans/views/transSensitive/index.vue

<template>
  <div :class="prefixCls" class="trans-sensitive-page">
    <div class="page-header">
      <div class="page-title">敏感日期交易</div>
      <div class="page-subtitle">按对象与交易日期筛选敏感日期交易，并联动查看对应交易明细。</div>
    </div>

    <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="全部"
        />
      </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="['开始日期', '结束日期']"
        />
      </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>
            <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-panel">
          <div class="table-wrapper">
            <BasicTable
              :columns="summaryColumns"
              :data-source="summaryData"
              :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"
              :rowClassName="summaryRowClassName"
              row-key="id"
              @row-click="handleSummaryRowClick"
            />
          </div>
        </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>
            <div class="panel-title">敏感交易详情</div>
            <div class="panel-desc">
              {{
                selectedSummaryRow
                  ? `${selectedSummaryRow.selfName} 与 ${selectedSummaryRow.otherName} 的敏感日期交易明细`
                  : '请选择左侧汇总数据查看详细交易记录。'
              }}
            </div>
          </div>
        </div>
        <div class="table-panel">
          <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"
              :pagination="false"
              :loading="detailLoading"
              :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>
        <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="ViewsTransSensitiveIndex">
  import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
  import { Select, Input, DatePicker, Button } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { BasicTable } from '@jeesite/core/components/Table';
  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 { statFirstTransSensitive, statSecondTransSensitive } from '@jeesite/trans/api/transApi';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import SpecialDateConfigModal from '@jeesite/person/views/components/SpecialDateConfigModal.vue';
  import type { TransRecord, TransSensitiveDTO } from '@jeesite/trans/api/types/dto';
  import type { TransSensitiveQuery } from '@jeesite/trans/api/types/query';

  const { prefixCls } = useDesign('trans-sensitive');
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const { jumping, jumpToBehaviorSpacetime } = useTimeSeriesJump();
  const RangePicker = DatePicker.RangePicker;
  const DATE_FORMAT = 'YYYY-MM-DD';
  type RangeValue = [string, string] | undefined;

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

  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 festivalData = ref<any[]>([]);
  const summaryKeywordTimer = ref<ReturnType<typeof setTimeout> | null>(null);
  const DEFAULT_SUMMARY_SORT_KEY = 'transCount';
  const DEFAULT_SUMMARY_SORT_ORDER = 'DESC' as const;
  const specialDateModalOpen = ref(false);

  const targetOptions = ref<Array<{ label: string; value: string }>>([]);

  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 pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value,
  }));

  const summaryColumns = [
    { title: '本方姓名', dataIndex: 'selfName', key: 'selfName', width: 120 },
    { title: '对方姓名/卡号', dataIndex: 'otherName', key: 'otherName', width: 200 },
    {
      title: '联系次数',
      dataIndex: 'transCount',
      key: 'transCount',
      width: 130,
      sorter: true,
      defaultSortOrder: 'descend',
    },
    { title: '对方号码', dataIndex: 'otherCard', key: 'otherCard', width: 140 },
  ];

  const festivalColumns = [
    { title: '序号', dataIndex: 'id', key: 'id', width: 80 },
    { title: '节日名称', dataIndex: 'festivalName', key: 'festivalName', width: 120 },
    { title: '本方卡(账)号', dataIndex: 'selfAccount', key: 'selfAccount', width: 160 },
    { title: '对方卡(账)号', dataIndex: 'otherAccount', key: 'otherAccount', width: 160 },
    { title: '交易金额', dataIndex: 'amount', key: 'amount', width: 120 },
    { title: '交易日期时间', dataIndex: 'transDateTime', key: 'transDateTime', width: 180 },
    { title: '借贷标志', dataIndex: 'sign', key: 'sign', width: 100 },
    { title: '银行名称', dataIndex: 'bankName', key: 'bankName', width: 160 },
    { title: '本方姓名', dataIndex: 'selfName', key: 'selfName', width: 120 },
    { title: '本方证件号码', dataIndex: 'selfCertNo', key: 'selfCertNo', width: 180 },
    { title: '本方账号', dataIndex: 'selfAccountNo', key: 'selfAccountNo', width: 180 },
    { title: '对方名称', dataIndex: 'otherName', key: 'otherName', width: 120 },
    { title: '对方证件号码', dataIndex: 'otherCertNo', key: 'otherCertNo', width: 180 },
    { title: '对方账号', dataIndex: 'otherAccountNo', key: 'otherAccountNo', width: 180 },
    { title: '交易类型', dataIndex: 'transType', key: 'transType', width: 120 },
    { title: '交易日期', dataIndex: 'transDate', key: 'transDate', width: 120 },
    { title: '交易时间', dataIndex: 'transTime', key: 'transTime', width: 120 },
    { title: '币种', dataIndex: 'currency', key: 'currency', width: 90 },
    { title: '交易余额', dataIndex: 'transBalance', key: 'transBalance', width: 120 },
    { title: '交易流水号', dataIndex: 'transSerialNo', key: 'transSerialNo', width: 180 },
    { title: '交易摘要', dataIndex: 'transSummary', key: 'transSummary', width: 180 },
    { title: '交易网点', dataIndex: 'branchName', key: 'branchName', width: 180 },
    { title: '现金标志', dataIndex: 'cashFlag', key: 'cashFlag', width: 100 },
    { title: '交易地点', dataIndex: 'transLocation', key: 'transLocation', width: 180 },
    { title: '备注', dataIndex: 'remark', key: 'remark', width: 180 },
  ];

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

  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): any[] => {
    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 mapSummaryRow = (item: TransSensitiveDTO, index: number) => ({
    id: (summaryPagination.value.current - 1) * summaryPagination.value.pageSize + index + 1,
    selfName: item.personName || '-',
    otherName: item.otherName || '-',
    transCount: item.transCount ?? (item as any).count ?? (item as any).totalCount ?? 0,
    otherCard: item.otherCardNo || '-',
    raw: item,
  });

  const sortSummaryList = (list: TransSensitiveDTO[]) =>
    [...list].sort((left, right) => {
      const leftCount = Number(left.transCount ?? (left as any).count ?? (left as any).totalCount ?? 0) || 0;
      const rightCount = Number(right.transCount ?? (right as any).count ?? (right as any).totalCount ?? 0) || 0;
      if (rightCount !== leftCount) return rightCount - leftCount;

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

  const fallbackValue = (value: string | number | null | undefined) => {
    if (value === 0) return '0';
    if (value === null || value === undefined || value === '') return '-';
    return String(value);
  };

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

  const mapDetailRow = (item: TransRecord, index: number) => ({
    id: (detailPagination.value.current - 1) * detailPagination.value.pageSize + index + 1,
    festivalName: fallbackValue(item.festivalName),
    bankName: fallbackValue(item.bankName),
    selfName: item.personName || '-',
    selfCertNo: maskCertNo(item.personCertNo),
    selfAccountNo: fallbackValue(item.personAccount),
    selfAccount: item.personCardNo || item.personAccount || '-',
    otherName: item.otherName || '-',
    otherCertNo: maskCertNo(item.otherCertNo),
    otherAccountNo: fallbackValue(item.otherAccount),
    otherAccount: item.otherCardNo || item.otherAccount || '-',
    transType: fallbackValue(item.transType),
    transDate: item.transDate || '-',
    transTime: item.transTime || '-',
    transDateTime: fallbackValue(item.transDateTime),
    sign: item.debitCreditFlag || '-',
    currency: fallbackValue(item.currency),
    amount: fallbackValue(item.transAmount),
    transBalance: fallbackValue(item.transBalance),
    transSerialNo: fallbackValue(item.transSerialNo),
    transSummary: item.transSummary || '-',
    branchName: fallbackValue(item.branchName),
    cashFlag: fallbackValue(item.cashFlag),
    transLocation: fallbackValue(item.transLocation),
    remark: fallbackValue(item.remark),
    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?: TransRecord) => {
    const id = normalizeActionRecordId(record?.id);
    return {
      hasLocal: 'N',
      tableName: 'trans_record',
      tableNameEn: 'trans_record',
      tableNameCn: '交易记录',
      id,
      personName: record?.personName || undefined,
      personNames: record?.personName ? [record.personName] : undefined,
    };
  };

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

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

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

  const fetchSummaryTable = async () => {
    await runWithQueryLoading(async () => {
      const resp = await statFirstTransSensitive(buildFirstQuery());
      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 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 selectedTarget = normalizeSelectedTargets(filters.value.target)[0];
      const rowPersonName = current.raw?.personName;
      const resp = await statSecondTransSensitive({
        page: detailPagination.value.current,
        limit: detailPagination.value.pageSize,
        startDate: range?.[0] || undefined,
        endDate: range?.[1] || undefined,
        personName: rowPersonName || selectedTarget,
        otherCardNo: current.raw?.otherCardNo || undefined,
        otherName: current.raw?.otherName || undefined,
      });

      const records = normalizeList(resp) as TransRecord[];
      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 resetDetailPagination = () => {
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
  };

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

  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 handleOpenSpecialDateModal = () => {
    specialDateModalOpen.value = true;
  };

  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 handleSummaryRowClick = async (record: any) => {
    resetDetailPagination();
    await fetchDetailTable(record);
  };

  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' : '';
  };

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

  onMounted(async () => {
    await fetchTargetOptions();
  });

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

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

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

    .filter-input {
      width: 180px;
    }

    .filter-date {
      width: 360px;
    }

    .content-panel {
      display: flex;
      gap: 2px;
    }

    .panel-left {
      flex: 0 0 46%;
      max-width: 46%;
      min-width: 0;
      .analysis-card-shell();
    }

    .panel-right {
      flex: 1;
      min-width: 0;
      .analysis-card-shell();
    }

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

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

    .table-panel,
    .table-wrapper {
      min-width: 0;
    }

    .table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
    }

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

    .table-wrapper .ant-table-wrapper {
      height: 100%;
      min-height: 0;
    }

    .table-wrapper .ant-table-content,
    .table-wrapper .ant-table-scroll {
      width: 100%;
      min-height: 0;
    }

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

    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .table-wrapper .ant-table-body {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100% !important;
      overflow: auto !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 .ant-table-thead > tr > th {
      background: #f8fafc;
      font-weight: 600;
      color: #374151;
    }

    .table-wrapper .ant-table-tbody > tr > td {
      color: #374151;
    }

    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__striped
      > td.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__striped
      > td.ant-table-cell-fix-left.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__striped
      > td.ant-table-cell-fix-right.ant-table-column-sort {
      background: #fafafa !important;
    }

    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr.summary-row-selected > td,
    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr.jeesite-basic-table-row__selected > td,
    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr.summary-row-selected > td.ant-table-cell-row-hover,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__selected
      > td.ant-table-cell-row-hover {
      background: #e8f1ff !important;
    }

    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr.summary-row-selected > td.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.summary-row-selected
      > td.ant-table-cell-row-hover.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.summary-row-selected
      > td.ant-table-cell-fix-left.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.summary-row-selected
      > td.ant-table-cell-fix-right.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__selected
      > td.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__selected
      > td.ant-table-cell-row-hover.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__selected
      > td.ant-table-cell-fix-left.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr.jeesite-basic-table-row__selected
      > td.ant-table-cell-fix-right.ant-table-column-sort {
      background: #e8f1ff !important;
    }

    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr:hover > td,
    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr:hover > td.ant-table-cell-row-hover {
      background: #f5f7ff !important;
    }

    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr:hover > td.ant-table-column-sort,
    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr:hover > td.ant-table-cell-row-hover.ant-table-column-sort,
    .table-wrapper .jeesite-basic-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left.ant-table-column-sort,
    .table-wrapper
      .jeesite-basic-table
      .ant-table-tbody
      > tr:hover
      > td.ant-table-cell-fix-right.ant-table-column-sort {
      background: #f5f7ff !important;
    }

    .pagination-input {
      width: 48px;
    }

    .panel-empty {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6b7280;
      font-size: 13px;
      text-align: center;
    }

    .panel-empty--record {
      width: 100%;
    }

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

      .panel-left {
        flex-basis: auto;
        max-width: none;
      }
    }

    @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>