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

<template>
  <div :class="prefixCls" class="fixed-deposit-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-date" />
      </div>
      <div class="toolbar-actions">
        <div class="filter-actions">
          <Button type="primary" :loading="queryLoading" @click="handleSearch">查询</Button>
          <Button @click="handleReset">重置</Button>
        </div>
        <div class="extra-actions">
          <Button @click="openKeywordModal">关键词配置</Button>
        </div>
      </div>
    </div>

    <ConfigManageModal
      :open="keywordModalOpen"
      title="关键词管理"
      :width="960"
      wrapClassName="fixed-deposit-keyword-modal"
      summary="支持新增、编辑、删除定期存取关键词，统一分析入口配置"
      :refresh-loading="keywordLoading"
      :table-height="420"
      :total="keywordData.length"
      :current="keywordPagination.current"
      :total-pages="keywordTotalPages"
      :page-size="keywordPagination.pageSize"
      :page-size-options="pageSizeOptions"
      :jump-page="keywordJumpPage"
      @update:open="handleKeywordModalChange"
      @update:jumpPage="handleKeywordJumpPageInput"
      @create="openKeywordEditor()"
      @prev-page="handleKeywordPrevPage"
      @next-page="handleKeywordNextPage"
      @page-size-change="handleKeywordPageSizeChange"
      @jump-page="handleKeywordJumpPage"
    >
      <template #default="{ tableMaxHeight }">
        <BasicTable
          :columns="keywordColumns"
          :data-source="keywordPagedData"
          :loading="keywordLoading"
          :pagination="false"
          :show-table-setting="false"
          :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
          :can-resize="true"
          :max-height="tableMaxHeight"
          row-key="rowKey"
        >
          <template #keywordAction="{ record }">
            <TableAction :actions="getKeywordActions(record)" />
          </template>
        </BasicTable>
      </template>
    </ConfigManageModal>

    <ConfigEditorModal
      v-model:open="keywordEditorOpen"
      :title="keywordEditorTitle"
      :confirmLoading="keywordSaving"
      wrapClassName="fixed-deposit-keyword-editor-modal"
      @ok="handleSaveKeyword"
      @cancel="closeKeywordEditor"
    >
      <Form layout="vertical" class="keyword-form">
        <Form.Item
          label="关键字"
          :validate-status="keywordFormErrors.fixedDepositKey ? 'error' : ''"
          :help="keywordFormErrors.fixedDepositKey"
        >
          <Input
            v-model:value="keywordForm.fixedDepositKey"
            :maxlength="100"
            placeholder="请输入定期理财关键字"
            allow-clear
          />
        </Form.Item>
      </Form>
    </ConfigEditorModal>

    <div class="content-layout">
      <div class="left-panel">
        <div class="panel-header">
          <div>
            <div class="panel-title">银行卡定期存取汇总</div>
            <div class="panel-desc">统计符合定期关键字的交易，右侧查看详情。</div>
          </div>
          <div class="panel-subtitle">共 {{ summaryCards.length }} 条流水摘要</div>
        </div>
        <div class="summary-list">
          <div
            v-for="item in summaryCards"
            :key="item.rowKey"
            class="summary-card"
            :class="{ active: selectedSummaryRow?.rowKey === item.rowKey }"
            @click="handleSummaryCardClick(item)"
          >
            <div class="summary-top">
              <div class="summary-name">{{ item.personName }}</div>
              <div class="summary-badge">{{
                selectedSummaryRow?.rowKey === item.rowKey ? '当前查看' : '查看明细'
              }}</div>
            </div>
            <div class="summary-metrics">
              <div class="summary-metric">
                <span class="summary-metric-label">卡余额：</span>
                <span class="summary-metric-value">{{ item.cardBalance }}</span>
              </div>
              <div class="summary-metric">
                <span class="summary-metric-label">定期存款总额：</span>
                <span class="summary-metric-value">{{ item.depositTotalAmount }}</span>
              </div>
              <div class="summary-metric">
                <span class="summary-metric-label">定期取款总额：</span>
                <span class="summary-metric-value">{{ item.withdrawTotalAmount }}</span>
              </div>
            </div>
          </div>
          <div v-if="!summaryCards.length" class="summary-empty">暂无汇总数据</div>
        </div>
      </div>

      <div class="right-panel">
        <div class="panel-header">
          <div>
            <div class="panel-title">定期存取记录</div>
            <div class="panel-desc">{{ detailSummaryText }}</div>
          </div>
          <div class="panel-subtitle">分页浏览</div>
        </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 table-wrapper--detail">
          <BasicTable
            :columns="detailColumns"
            :data-source="detailTableData"
            :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="rowKey"
          >
            <template #detailAction="{ record }">
              <Button type="link" size="small" @click.stop="handleViewDetail(record)">查看详情</Button>
            </template>
          </BasicTable>
        </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>

    <TransRecordModal
      v-model:open="transRecordModalOpen"
      :base-query="transRecordBaseQuery"
      :hide-technical-id-columns="true"
    />
  </div>
</template>

<script lang="ts" setup name="ViewsFixedDepositIndex">
  import { computed, onMounted, reactive, ref } from 'vue';
  import { Select, Input, Button, DatePicker, Form } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import dayjs, { Dayjs } from 'dayjs';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { BasicTable, TableAction } from '@jeesite/core/components/Table';
  import type { BasicColumn } 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 ConfigManageModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigManageModal.vue';
  import ConfigEditorModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigEditorModal.vue';
  import { pickDetailValue } from '@jeesite/core/utils/detailQuery';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import TransRecordModal from '../components/TransRecordModal.vue';
  import {
    createOrUpdateFixedDepositKey,
    deleteFixedDepositKey,
    listFixedDepositKeys,
    statFirstTransFixedDeposit,
    statSecondTransFixedDepositList,
  } from '@jeesite/trans/api/transApi';
  import type {
    TransFixedDepositKey,
    TransPersonFixedDepositDTO,
    TransPersonFixedDepositDetailDTO,
  } from '@jeesite/trans/api/types/dto';
  import type { TransFixedDepositQuery, TransRecordQuery } from '@jeesite/trans/api/types/query';

  interface FixedDepositSummaryRow {
    rowKey: string;
    personName: string;
    cardBalance: string;
    depositTotalAmount: string;
    withdrawTotalAmount: string;
    raw: TransPersonFixedDepositDTO;
  }

  interface FixedDepositDetailRow {
    rowKey: string;
    id: number;
    personName: string;
    personCardNo: string;
    transAmount: string;
    transBalance: string;
    transDateTime: string;
    debitCreditFlag: string;
    concatInfo: string;
    cardStatus: string;
    source: string;
    raw: TransPersonFixedDepositDetailDTO;
  }

  interface KeywordRow extends TransFixedDepositKey {
    rowKey: number | string;
    rowNo: number;
  }

  interface KeywordFormState {
    id?: number | string;
    fixedDepositKey: string;
  }

  const { prefixCls } = useDesign('fixed-deposit');
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const RangePicker = DatePicker.RangePicker;
  type RangeValue = [Dayjs, Dayjs] | undefined;

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

  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const transRecordModalOpen = ref(false);
  const transRecordBaseQuery = ref<Partial<TransRecordQuery>>({});

  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 detailPagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });

  const detailJumpPage = ref('1');
  const detailTotal = ref(0);
  const hasSearched = ref(false);
  const detailTableData = ref<FixedDepositDetailRow[]>([]);
  const summaryCards = ref<FixedDepositSummaryRow[]>([]);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchPageData(),
    hasData: () => hasSearched.value && summaryCards.value.length > 0,
  });
  const selectedSummaryRow = ref<FixedDepositSummaryRow | null>(null);
  const detailLoading = ref(false);
  const keywordModalOpen = ref(false);
  const keywordEditorOpen = ref(false);
  const keywordLoading = ref(false);
  const keywordSaving = ref(false);
  const keywordData = ref<KeywordRow[]>([]);
  const keywordJumpPage = ref('1');
  const keywordPagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });

  const keywordForm = reactive<KeywordFormState>({
    id: undefined,
    fixedDepositKey: '',
  });

  const keywordFormErrors = reactive({
    fixedDepositKey: '',
  });

  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value: Number(value),
  }));
  const keywordEditorTitle = computed(() => (keywordForm.id ? '编辑关键词' : '新建关键词'));

  const detailColumns: BasicColumn[] = [
    { title: '序号', dataIndex: 'id', key: 'id', width: 70, align: 'center' },
    { title: '被调查对象姓名', dataIndex: 'personName', key: 'personName', width: 140, align: 'center' },
    { title: '被调查对象卡(账)号', dataIndex: 'personCardNo', key: 'personCardNo', width: 170, align: 'center' },
    { title: '交易金额', dataIndex: 'transAmount', key: 'transAmount', width: 120, align: 'center' },
    { title: '余额', dataIndex: 'transBalance', key: 'transBalance', width: 100, align: 'center' },
    { title: '发生日期', dataIndex: 'transDateTime', key: 'transDateTime', width: 170, align: 'center' },
    { title: '借贷标志', dataIndex: 'debitCreditFlag', key: 'debitCreditFlag', width: 90, align: 'center' },
    { title: '附属信息', dataIndex: 'concatInfo', key: 'concatInfo', width: 150 },
    { title: '卡状态', dataIndex: 'cardStatus', key: 'cardStatus', width: 80, align: 'center' },
    { title: '来源', dataIndex: 'source', key: 'source', width: 80, align: 'center' },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 110,
      align: 'center',
      fixed: 'right',
      slot: 'detailAction',
    },
  ];
  const keywordColumns: BasicColumn[] = [
    { title: '序号', dataIndex: 'rowNo', key: 'rowNo', width: 80, align: 'center' },
    { title: '关键字', dataIndex: 'fixedDepositKey', key: 'fixedDepositKey', width: 520, align: 'left' },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 160,
      align: 'center',
      slot: 'keywordAction',
    },
  ];

  const detailTotalPages = computed(() => {
    if (!detailTotal.value) return 1;
    return Math.max(1, Math.ceil(detailTotal.value / detailPagination.value.pageSize));
  });
  const showDetailPagination = computed(() => detailTableData.value.length > 0);
  const keywordTotalPages = computed(() => {
    if (!keywordData.value.length) return 1;
    return Math.max(1, Math.ceil(keywordData.value.length / keywordPagination.value.pageSize));
  });
  const keywordPagedData = computed(() => {
    const start = (keywordPagination.value.current - 1) * keywordPagination.value.pageSize;
    const end = start + keywordPagination.value.pageSize;
    return keywordData.value.slice(start, end);
  });
  const fixedDepositKeys = computed(() =>
    keywordData.value.map((item) => item.fixedDepositKey?.trim()).filter((item): item is string => !!item),
  );
  const detailSummaryText = computed(() => {
    if (!selectedSummaryRow.value?.personName) return '请选择左侧对象查看明细';
    return `当前查看 ${selectedSummaryRow.value.personName} 的定期存取记录`;
  });

  const normalizeSummaryList = (resp: any): TransPersonFixedDepositDTO[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.records)) return resp.records;
    if (Array.isArray(resp?.data?.records)) return resp.data.records;
    if (Array.isArray(resp?.list)) return resp.list;
    if (Array.isArray(resp?.data?.list)) return resp.data.list;
    if (Array.isArray(resp?.data)) return resp.data;
    return [];
  };
  const normalizeKeywordList = (resp: any): TransFixedDepositKey[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.data)) return resp.data;
    if (Array.isArray(resp?.list)) return resp.list;
    if (Array.isArray(resp?.data?.list)) return resp.data.list;
    return [];
  };

  const normalizeDetailList = (resp: any): TransPersonFixedDepositDetailDTO[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.records)) return resp.records;
    if (Array.isArray(resp?.data?.records)) return resp.data.records;
    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;
    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 parseNumber = (value?: number | string | null) => {
    if (value === null || value === undefined || value === '') return undefined;
    const normalized = typeof value === 'string' ? value.replace(/,/g, '').trim() : value;
    const numericValue = Number(normalized);
    return Number.isFinite(numericValue) ? numericValue : undefined;
  };
  const formatAmount = (value?: number | string | null) => {
    const numericValue = parseNumber(value);
    if (numericValue === undefined) return '-';
    return numericValue.toLocaleString('zh-CN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  };
  const formatCount = (value?: number | string | null) => {
    const numericValue = parseNumber(value);
    if (numericValue === undefined) return '-';
    return Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(0);
  };
  const formatCurrency = (value?: number | string | null) => {
    const amountText = formatAmount(value);
    return amountText === '-' ? '-' : `¥${amountText}`;
  };
  const formatSourceLabel = (value?: string | null) => {
    const source = String(value || '')
      .trim()
      .toLowerCase();
    if (!source) return '-';
    if (source === 'acct') return '开户信息';
    if (source === 'trans') return '交易记录';
    return String(value || '').trim() || '-';
  };

  const pickSummaryAmount = (
    item: TransPersonFixedDepositDTO,
    fieldNames: string[],
    fallback?: number | string | null,
  ) => {
    const source = item as Record<string, unknown>;
    for (const fieldName of fieldNames) {
      const value = source[fieldName];
      if (value !== undefined && value !== null && value !== '') {
        return value as number | string;
      }
    }
    return fallback;
  };

  const mapSummaryCard = (item: TransPersonFixedDepositDTO, index: number): FixedDepositSummaryRow => ({
    rowKey: `fixed-deposit-summary-${index}-${item.personName || ''}`,
    personName: item.personName || '-',
    cardBalance: formatAmount(
      pickSummaryAmount(
        item,
        ['cardBalance', 'balance', 'transBalance', 'totalBalance', 'accountBalance'],
        item.totalTransAmount,
      ),
    ),
    depositTotalAmount: formatAmount(
      pickSummaryAmount(
        item,
        ['depositTotalAmount', 'fixedDepositTotalAmount', 'incomeTotalAmount'],
        item.incomeTotalAmount,
      ),
    ),
    withdrawTotalAmount: formatAmount(
      pickSummaryAmount(
        item,
        ['withdrawTotalAmount', 'fixedWithdrawTotalAmount', 'expenseTotalAmount'],
        item.expenseTotalAmount,
      ),
    ),
    raw: item,
  });
  const mapKeywordRows = (list: TransFixedDepositKey[]): KeywordRow[] =>
    list.map((item, index) => ({
      ...item,
      rowKey: item.id ?? `fixed-deposit-key-${index}`,
      rowNo: index + 1,
    }));

  const mapDetailRow = (item: TransPersonFixedDepositDetailDTO, index: number): FixedDepositDetailRow => ({
    rowKey: `fixed-deposit-detail-${detailPagination.value.current}-${index}`,
    id: (detailPagination.value.current - 1) * detailPagination.value.pageSize + index + 1,
    personName: item.personName || '-',
    personCardNo: item.personCardNo || '-',
    transAmount: formatCurrency(item.transAmount),
    transBalance: formatCurrency(item.transBalance),
    transDateTime: item.transDateTime || '-',
    debitCreditFlag: item.debitCreditFlag || '-',
    concatInfo: item.concatInfo || '-',
    cardStatus: item.accountStatus || '-',
    source: formatSourceLabel(item.source),
    raw: item,
  });

  const resetDetailState = () => {
    detailTableData.value = [];
    detailTotal.value = 0;
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
  };

  const buildSummaryQuery = (): TransFixedDepositQuery => {
    const range = filters.value.dateRange as RangeValue;
    const selectedTargets = normalizeSelectedTargets(filters.value.target);
    return {
      page: 1,
      limit: 999,
      startDate: range?.[0] ? dayjs(range[0]).format('YYYY-MM-DD') : undefined,
      endDate: range?.[1] ? dayjs(range[1]).format('YYYY-MM-DD') : undefined,
      personNames: selectedTargets.length ? selectedTargets : undefined,
      depositKey: fixedDepositKeys.value.length ? fixedDepositKeys.value : undefined,
    };
  };

  const buildDetailQuery = (): TransFixedDepositQuery => {
    const range = filters.value.dateRange as RangeValue;
    const selectedTarget = normalizeSelectedTargets(filters.value.target)[0];
    const personName = selectedSummaryRow.value?.raw.personName || selectedTarget;
    return {
      page: detailPagination.value.current,
      limit: detailPagination.value.pageSize,
      startDate: range?.[0] ? dayjs(range[0]).format('YYYY-MM-DD') : undefined,
      endDate: range?.[1] ? dayjs(range[1]).format('YYYY-MM-DD') : undefined,
      personName,
      personNames: personName ? [personName] : undefined,
      depositKey: fixedDepositKeys.value.length ? fixedDepositKeys.value : undefined,
      orderKey: 'transDateTime',
      sort: 'DESC',
    };
  };

  const buildTransRecordBaseQuery = (record: FixedDepositDetailRow): Partial<TransRecordQuery> => {
    const detailQuery = buildDetailQuery();
    return {
      id: pickDetailValue(record.raw.id !== undefined && record.raw.id !== null ? String(record.raw.id) : undefined),
      personName: pickDetailValue(record.raw.personName, detailQuery.personName),
      personCardNo: pickDetailValue(record.raw.personCardNo),
      startDate: detailQuery.startDate,
      endDate: detailQuery.endDate,
      debitCreditFlag: pickDetailValue(record.raw.debitCreditFlag),
    };
  };

  const resetKeywordForm = () => {
    keywordForm.id = undefined;
    keywordForm.fixedDepositKey = '';
    keywordFormErrors.fixedDepositKey = '';
  };
  const getKeywordActions = (record: KeywordRow) => [
    {
      label: '编辑',
      onClick: () => openKeywordEditor(record),
    },
    {
      label: '删除',
      color: 'error' as const,
      popConfirm: {
        title: '是否确认删除该关键字？',
        confirm: () => handleDeleteKeyword(record),
      },
    },
  ];
  const loadKeywordList = async (showSuccessMessage = false) => {
    keywordLoading.value = true;
    try {
      const resp = await listFixedDepositKeys();
      keywordData.value = mapKeywordRows(normalizeKeywordList(resp));
      keywordPagination.value.current = 1;
      keywordJumpPage.value = '1';
      if (showSuccessMessage) {
        createMessage.success('关键词列表已刷新');
      }
    } catch (error) {
      keywordData.value = [];
      keywordPagination.value.current = 1;
      keywordJumpPage.value = '1';
      createMessage.warning('获取关键词失败');
    } finally {
      keywordLoading.value = false;
    }
  };
  const handleKeywordPrevPage = () => {
    if (keywordPagination.value.current <= 1) return;
    keywordPagination.value.current -= 1;
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordNextPage = () => {
    if (keywordPagination.value.current >= keywordTotalPages.value) return;
    keywordPagination.value.current += 1;
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordPageSizeChange = (value: string | number) => {
    keywordPagination.value.pageSize = Number(value);
    keywordPagination.value.current = 1;
    keywordJumpPage.value = '1';
  };
  const handleKeywordJumpPage = () => {
    const next = Number(keywordJumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      keywordJumpPage.value = String(keywordPagination.value.current);
      return;
    }

    keywordPagination.value.current = Math.min(next, keywordTotalPages.value);
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordJumpPageInput = (value: string) => {
    keywordJumpPage.value = value;
  };
  const openKeywordModal = async () => {
    keywordModalOpen.value = true;
    await loadKeywordList();
  };
  const handleKeywordModalChange = async (open: boolean) => {
    keywordModalOpen.value = open;
    if (open && !keywordData.value.length) {
      await loadKeywordList();
    }
  };
  const openKeywordEditor = (record?: KeywordRow) => {
    resetKeywordForm();
    if (record) {
      keywordForm.id = record.id !== undefined && record.id !== null ? String(record.id) : undefined;
      keywordForm.fixedDepositKey = record.fixedDepositKey || '';
    }
    keywordEditorOpen.value = true;
  };
  const closeKeywordEditor = () => {
    keywordEditorOpen.value = false;
    resetKeywordForm();
  };
  const validateKeywordForm = () => {
    const fixedDepositKey = keywordForm.fixedDepositKey.trim();
    keywordFormErrors.fixedDepositKey = fixedDepositKey ? '' : '请输入关键字';

    if (!fixedDepositKey) return false;

    keywordForm.fixedDepositKey = fixedDepositKey;
    return true;
  };
  const handleSaveKeyword = async () => {
    if (!validateKeywordForm()) return;

    keywordSaving.value = true;
    try {
      await createOrUpdateFixedDepositKey({
        id: keywordForm.id,
        fixedDepositKey: keywordForm.fixedDepositKey,
      });
      createMessage.success(keywordForm.id ? '关键词更新成功' : '关键词新增成功');
      keywordEditorOpen.value = false;
      resetKeywordForm();
      await loadKeywordList();
    } catch (error) {
      createMessage.warning(keywordForm.id ? '关键词更新失败' : '关键词新增失败');
    } finally {
      keywordSaving.value = false;
    }
  };
  const handleDeleteKeyword = async (record: KeywordRow) => {
    if (!record.id) {
      createMessage.warning('缺少关键词ID，无法删除');
      return;
    }

    try {
      await deleteFixedDepositKey(String(record.id));
      createMessage.success('关键词删除成功');
      await loadKeywordList();
    } catch (error) {
      createMessage.warning('关键词删除失败');
    }
  };

  const fetchSummary = async () => {
    const resp = await statFirstTransFixedDeposit(buildSummaryQuery());
    const list = normalizeSummaryList(resp);
    summaryCards.value = list.map(mapSummaryCard);

    const selected = selectedSummaryRow.value?.raw.personName;
    selectedSummaryRow.value =
      summaryCards.value.find((item) => item.raw.personName === selected) || summaryCards.value[0] || null;
  };

  const fetchDetailTable = async () => {
    if (!selectedSummaryRow.value?.raw.personName && !selectedSummaryRow.value?.raw.personCardNo) {
      resetDetailState();
      return;
    }

    detailLoading.value = true;
    try {
      const resp = await statSecondTransFixedDepositList(buildDetailQuery());
      const list = normalizeDetailList(resp);
      detailTableData.value = list.map(mapDetailRow);
      detailTotal.value = normalizeTotal(resp, list.length);

      const current = Number((resp as any)?.current ?? (resp as any)?.data?.current ?? detailPagination.value.current);
      const size = Number((resp as any)?.size ?? (resp as any)?.data?.size ?? detailPagination.value.pageSize);
      if (Number.isFinite(current) && current > 0) detailPagination.value.current = current;
      if (Number.isFinite(size) && size > 0) detailPagination.value.pageSize = size;
      detailJumpPage.value = String(detailPagination.value.current);
    } catch (error) {
      detailTableData.value = [];
      detailTotal.value = 0;
      createMessage.warning('定期存取记录接口调用失败');
    } finally {
      detailLoading.value = false;
    }
  };

  const fetchPageData = async () => {
    if (!keywordData.value.length) {
      await loadKeywordList();
    }

    await runWithQueryLoading(async () => {
      await fetchSummary();
      hasSearched.value = true;
      syncAnalysisDataRefreshState(summaryCards.value.length > 0);
      if (!selectedSummaryRow.value) {
        resetDetailState();
        return;
      }
      detailPagination.value.current = 1;
      detailJumpPage.value = '1';
      await fetchDetailTable();
    });
  };

  const handleSummaryCardClick = async (item: FixedDepositSummaryRow) => {
    if (selectedSummaryRow.value?.rowKey === item.rowKey) return;
    selectedSummaryRow.value = item;
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
    await fetchDetailTable();
  };

  const handleSearch = async () => {
    detailPagination.value.current = 1;
    await fetchPageData();
  };

  const handleReset = async () => {
    filters.value = {
      target: [],
      dateRange: undefined,
    };
    detailPagination.value.current = 1;
    await fetchPageData();
  };

  const handleViewDetail = (record: FixedDepositDetailRow) => {
    if (!record?.raw.id && !record?.raw.personName && !record?.raw.personCardNo) {
      createMessage.warning('缺少详情定位信息');
      return;
    }

    transRecordBaseQuery.value = buildTransRecordBaseQuery(record);
    transRecordModalOpen.value = true;
  };

  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 fetchTargetOptions = async () => {
    try {
      targetOptions.value = await getPersonOptions(false);
    } catch (error) {
      targetOptions.value = [];
    }
  };

  onMounted(async () => {
    await fetchTargetOptions();
  });
</script>

<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';
  @prefix-cls: ~'jeesite-fixed-deposit';

  .@{prefix-cls}.fixed-deposit-page {
    .analysis-page-frame();

    .filter-input {
      width: 180px;
    }

    .filter-date {
      width: 360px;
    }

    .toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-wrap: wrap;
    }

    .filter-actions {
      display: flex;
      gap: 8px;
    }

    .extra-actions {
      display: flex;
    }

    .keyword-form {
      padding-top: 8px;
    }

    .content-layout {
      display: flex;
      gap: 2px;
      align-items: stretch;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      padding: 2px;
      background: #edf2f7;
      box-sizing: border-box;
    }

    .left-panel {
      flex: 0 0 320px;
      .analysis-card-shell();
    }

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

    .panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 0 0 8px;
      border-bottom: 0;
      flex: 0 0 auto;
      flex-wrap: wrap;
    }

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

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

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

    .summary-list {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      gap: 8px;
      min-height: 0;
      padding: 0;
      overflow: auto;
    }

    .summary-card {
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      background: transparent;
      padding: 10px 8px;
      cursor: pointer;
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

      &:hover {
        border-color: #cbd5e1;
        box-shadow: none;
        transform: none;
      }

      &.active {
        border-color: #93c5fd;
        background: rgba(244, 248, 255, 0.72);
        box-shadow: none;
      }
    }

    .summary-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .summary-name {
      font-size: 15px;
      font-weight: 600;
      color: #111827;
      line-height: 1.4;
    }

    .summary-badge {
      flex: 0 0 auto;
      padding: 3px 8px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #475569;
      font-size: 11px;
      line-height: 1.4;
    }

    .summary-card.active .summary-badge {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .summary-metrics {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
      padding: 8px 0 0;
      border-radius: 0;
      background: transparent;
      border-top: 1px solid #eef2f7;
    }

    .summary-metric {
      display: flex;
      align-items: baseline;
      gap: 6px;
      color: #374151;
      font-size: 14px;
      line-height: 22px;
      word-break: break-word;
    }

    .summary-metric-label {
      color: #4b5563;
      white-space: nowrap;
    }

    .summary-metric-value {
      color: #111827;
      font-weight: 600;
    }

    .summary-empty {
      color: #94a3b8;
      font-size: 12px;
      padding: 28px 12px;
      text-align: center;
      border-top: 1px dashed #dbe4ee;
      border-radius: 0;
      background: transparent;
    }

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

    .table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      margin: 0;
      border-top: 1px solid #eef2f7;
      border-radius: 0;
      overflow: hidden;
    }

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

    .table-wrapper .ant-table-wrapper {
      height: 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;
    }

    .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: rgba(148, 163, 184, 0.6);
      border-radius: 999px;
    }

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

    .table-wrapper .ant-table-cell {
      font-size: 12px;
    }

    .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 .ant-table-tbody > tr:hover > td {
      background: #f5f7ff;
    }

    .pagination-bar {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      color: #6b7280;
      font-size: 12px;
      flex: 0 0 auto;
      flex-wrap: wrap;
      background: transparent;
    }

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

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

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

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

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

    .pagination-input {
      width: 48px;
    }

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

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

      .summary-list {
        max-height: none;
      }
    }

    @media (max-width: 768px) {
      .filter-bar {
        gap: 10px;
      }

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

      .filter-item {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
      }

      .filter-actions {
        margin-left: 0;
      }

      .toolbar-actions {
        width: 100%;
        margin-left: 0;
      }

      .extra-actions {
        margin-left: 0;
        width: 100%;
      }

      .summary-list {
        padding: 0;
      }
    }
  }
</style>