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

<template>
  <div :class="prefixCls" class="peer-analysis-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="filter-actions">
        <Button type="primary" :loading="queryLoading" @click="handleSearch">查询</Button>
        <Button @click="handleReset">重置</Button>
      </div>
    </div>

    <div class="page-content">
      <div class="group-section">
        <div class="section-head">
          <div class="section-title">同行组合</div>
          <div v-if="peerGroups.length" class="section-meta">共 {{ peerGroups.length }} 组同行组合</div>
        </div>

        <div v-if="!hasSearched" class="empty-state empty-state--group">
          <EmptyState
            variant="query"
            title="请点击查询"
            description="设置条件精细查询，也可点击查询展示所有信息"
            :min-height="72"
          />
        </div>
        <div v-else-if="queryLoading" class="empty-state empty-state--group">同行组合加载中...</div>
        <div v-else-if="peerGroups.length" class="peer-groups">
          <div
            v-for="group in peerGroups"
            :key="group.id"
            class="peer-card"
            :class="{ active: selectedGroup === group.id }"
            @click="handleSelectGroup(group)"
          >
            <div class="peer-members">{{ group.members }}</div>
            <div class="peer-count-line">
              <span class="peer-count-label">同行：</span>
              <span class="peer-count-value">{{ group.count }}次</span>
            </div>
          </div>
        </div>
        <div v-else class="empty-state empty-state--group">
          <EmptyState variant="compact" description="当前筛选条件下暂无同行组合" :min-height="72" />
        </div>
      </div>

      <div class="record-section">
        <div class="record-layout">
          <div class="record-panel">
            <div class="section-head section-head--record panel-header">
              <div class="section-title">同行记录</div>
              <div class="section-meta">
                {{
                  activeGroup
                    ? `${activeGroup.members}，同行 ${activeGroup.count} 次`
                    : '选择上方同行组合后查看对应记录。'
                }}
              </div>
            </div>

            <div class="table-wrapper table-wrapper--record">
              <div v-if="recordLoading && !recordList.length" class="empty-state empty-state--record"
                >同行记录加载中...</div
              >
              <BasicTable
                v-else-if="recordList.length"
                :columns="recordColumns"
                :data-source="recordList"
                :pagination="false"
                :loading="recordLoading"
                :showIndexColumn="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="recordRowClassName"
                row-key="id"
                @row-click="handleRecordRowClick"
              />
              <div v-else class="empty-state empty-state--record">
                <EmptyState
                  :title="activeGroup ? '暂无数据' : '请先选择组合'"
                  :description="activeGroup ? '当前组合暂无关联记录' : '选择上方同行组合后查看对应记录'"
                  :min-height="240"
                />
              </div>
            </div>
          </div>

          <div class="detail-panel">
            <div class="section-head section-head--record panel-header">
              <div class="section-title">详情</div>
            </div>

            <div class="table-wrapper table-wrapper--detail">
              <div v-if="detailLoading && !detailRows.length" class="empty-state empty-state--record"
                >详情加载中...</div
              >
              <BasicTable
                v-else-if="detailRows.length"
                :columns="detailColumns"
                :data-source="detailRows"
                :pagination="false"
                :loading="detailLoading"
                :showIndexColumn="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"
              />
              <div v-else class="empty-state empty-state--record">
                <EmptyState
                  :title="selectedRecord ? '暂无详情' : '请选择记录'"
                  :description="
                    selectedRecord
                      ? 'statThreeTogetherTravel 当前未返回可展示的表格明细'
                      : '点击左侧同行记录后，在这里查看第三层详情表格'
                  "
                  :min-height="240"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="ViewsPeerAnalysisIndex">
  import { computed, onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs, { type Dayjs } from 'dayjs';
  import { Select, Button, DatePicker } from 'ant-design-vue';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { BasicTable, type BasicColumn } from '@jeesite/core/components/Table';
  import { useAnalysisRefreshPrompt } from '@jeesite/core/hooks/web/useAnalysisRefreshPrompt';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { useTableSkill } from '@jeesite/core/hooks/web/useTableSkill';
  import { getPersons } from '@jeesite/person/api/personApi';
  import type { PersonBasicInfo } from '@jeesite/person/api/types/dto';
  import {
    legacyTravelRecords,
    legacyTravelTimeline,
    legacyTravelTimelineDetail,
    statSecondTogetherTravel,
    statThreeTogetherTravel,
    statTogetherTravel,
  } from '@jeesite/track/api/trackApi';
  import type { TravelDataDTO } from '@jeesite/track/api/types/dto';
  import type { TrackTogetherTravelQuery } from '@jeesite/track/api/types/query';

  interface PeerGroupItem {
    id: string;
    personName: string;
    companionName: string;
    members: string;
    count: number;
    idList: string[];
    raw: Record<string, any>;
  }

  interface RecordItem {
    id: string;
    traveler: string;
    time: string;
    method: string;
    departure: string;
    destination: string;
    raw: TravelDataDTO & Record<string, any>;
  }

  type RangeValue = [Dayjs, Dayjs] | undefined;
  const DEFAULT_RECORD_SORT_KEY = 'tripDateTime';
  const DEFAULT_RECORD_SORT_ORDER = 'DESC' as const;
  const TOGETHER_TRAVEL_TYPES = {
    togetherFlight: 'TOGETHER_FLIGHT',
    togetherTrain: 'TOGETHER_TRAIN',
    railTicket: 'RAIL_TICKET',
    flightTicket: 'FLIGHT_TICKET',
    flightDeparture: 'FLIGHT_DEPARTURE',
    carTicket: 'CAR_TICKET',
  } as const;
  const togetherTravelTypeSet = new Set<string>(Object.values(TOGETHER_TRAVEL_TYPES));

  const { prefixCls } = useDesign('peer-analysis');
  const route = useRoute();
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const RangePicker = DatePicker.RangePicker;

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

  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const personList = ref<PersonBasicInfo[]>([]);
  const peerGroups = ref<PeerGroupItem[]>([]);
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchSummaryTable(),
    hasData: () => hasSearched.value && peerGroups.value.length > 0,
  });
  const selectedGroup = ref<string | null>(null);
  const recordList = ref<RecordItem[]>([]);
  const recordLoading = ref(false);
  const selectedRecordId = ref<string | null>(null);
  const detailLoading = ref(false);
  const detailRows = ref<Record<string, any>[]>([]);
  const detailMode = ref<'fields' | 'records'>('fields');
  const detailColumnKeys = ref<string[]>([]);

  const detailLabelMap: Record<string, string> = {
    personName: '对象',
    companionName: '同行人',
    type: '同行方式',
    tripNo: '班次号',
    travelNo: '班次号',
    origin: '出发地',
    destination: '目的地',
    fromWhere: '出发地',
    toWhere: '目的地',
    tripDateTime: '出行时间',
    tripDate: '出行日期',
    travelTime: '出行时间',
    id: '记录ID',
    hbh: '航班号',
    cc: '车次',
    busNumber: '班次号',
    dt: '出行日期',
    date: '出行日期',
    departureTime: '出发时间',
    depDateTime: '出发时间',
    arrDateTime: '到达时间',
    passengerName: '乘车人',
    travelerName: '出行人',
    queryName: '对象',
    objName: '对象',
    personCertNo: '证件号码',
    certNo: '证件号码',
    certType: '证件类型',
    seatNo: '座位号',
    seatName: '座位号',
    seatType: '席别',
    coachNo: '车厢号',
    carriageNo: '车厢号',
    berth: '铺位',
    ticketNo: '票号',
    ticketType: '票种',
    ticketStatus: '票务状态',
    orderNo: '订单号',
    orderStatus: '订单状态',
    flightNo: '航班号',
    trainNo: '车次',
    depAirport: '起飞机场',
    arrAirport: '到达机场',
    depCode: '起飞机场代码',
    arrCode: '到达机场代码',
    departure: '出发地',
    arrival: '目的地',
    fz: '发站',
    dz: '到站',
    qszm: '起始站名',
    zdzm: '终点站名',
    sfczmc: '始发车站名称',
    mddmc: '目的地名称',
    carrier: '航空公司代码',
    personNameEn: '旅客英文名',
    surname: '旅客姓',
  };
  const detailLabelMapLowerCase = Object.entries(detailLabelMap).reduce<Record<string, string>>((acc, [key, value]) => {
    acc[key.toLowerCase()] = value;
    return acc;
  }, {});

  const resolveDetailLabel = (key: string) => {
    const normalizedKey = String(key || '').trim();
    return detailLabelMap[normalizedKey] || detailLabelMapLowerCase[normalizedKey.toLowerCase()] || normalizedKey;
  };

  const hiddenDetailKeys = new Set([
    'id',
    'recordid',
    'carno',
    'count',
    'deptime',
    'depdatetime',
    'fileid',
    'icon',
    'personcertno',
    'personcerttype',
    'seatno',
    'sheetid',
    'trainno',
  ]);

  const activeGroup = computed(() => peerGroups.value.find((item) => item.id === selectedGroup.value) || null);
  const selectedRecord = computed(() => recordList.value.find((item) => item.id === selectedRecordId.value) || null);

  const recordColumns: BasicColumn[] = [
    { title: '出行人', dataIndex: 'traveler', key: 'traveler', width: 140, ellipsis: true },
    { title: '出行时间', dataIndex: 'time', key: 'time', width: 180, ellipsis: true },
    { title: '同行方式', dataIndex: 'method', key: 'method', width: 180, ellipsis: true },
    { title: '出发地', dataIndex: 'departure', key: 'departure', width: 180, ellipsis: true },
    { title: '目的地', dataIndex: 'destination', key: 'destination', width: 180, ellipsis: true },
  ];

  const detailColumns = computed<BasicColumn[]>(() => {
    if (detailMode.value === 'fields') {
      return [
        { title: '字段', dataIndex: 'label', key: 'label', width: 180 },
        { title: '值', dataIndex: 'value', key: 'value', ellipsis: true },
      ];
    }

    return detailColumnKeys.value.map((key) => ({
      title: resolveDetailLabel(key),
      dataIndex: key,
      key,
      width: key === 'rowNo' ? 90 : 180,
      ellipsis: true,
    }));
  });

  const getCaseId = () => window.localStorage.getItem('caseId') || undefined;

  const flattenObjectValues = (source: Record<string, any>) => {
    return Object.values(source).reduce<any[]>((acc, value) => {
      if (Array.isArray(value)) {
        acc.push(...value);
      } else if (Array.isArray(value?.list)) {
        acc.push(...value.list);
      } else if (Array.isArray(value?.records)) {
        acc.push(...value.records);
      } else if (Array.isArray(value?.data)) {
        acc.push(...value.data);
      }
      return acc;
    }, []);
  };

  const extractList = (resp: any): any[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.list)) return resp.list;
    if (Array.isArray(resp?.records)) return resp.records;
    if (Array.isArray(resp?.data)) return resp.data;
    if (Array.isArray(resp?.data?.list)) return resp.data.list;
    if (Array.isArray(resp?.data?.records)) return resp.data.records;
    if (resp?.data && typeof resp.data === 'object') {
      const flattened = flattenObjectValues(resp.data);
      if (flattened.length) return flattened;
    }
    if (resp && typeof resp === 'object') {
      const flattened = flattenObjectValues(resp);
      if (flattened.length) return flattened;
    }
    return [];
  };

  const normalizeIds = (ids: unknown): string[] => {
    const list = Array.isArray(ids)
      ? ids.map((item) => String(item).trim()).filter(Boolean)
      : typeof ids === 'string'
        ? ids
            .split(',')
            .map((item) => item.trim())
            .filter(Boolean)
        : [];

    return Array.from(new Set(list));
  };

  const normalizeNames = (...values: unknown[]): string[] => {
    return Array.from(new Set(values.map((item) => String(item || '').trim()).filter(Boolean)));
  };

  const normalizeRouteQueryText = (value: unknown) => {
    if (Array.isArray(value)) return String(value[0] || '').trim();
    return String(value || '').trim();
  };

  const parseRoutePersonNames = () => {
    const namesFromList = normalizeRouteQueryText(route.query.personNames)
      .split(',')
      .map((item) => item.trim())
      .filter(Boolean);
    return normalizeNames(
      ...namesFromList,
      normalizeRouteQueryText(route.query.personName),
      normalizeRouteQueryText(route.query.otherName),
      normalizeRouteQueryText(route.query.companionName),
    );
  };

  const resolveGroupIds = (group: PeerGroupItem) => {
    return normalizeIds(group.idList);
  };

  const resolveGroupPersonNames = (personName?: string, companionName?: string) => {
    return normalizeNames(personName, companionName);
  };

  const resolveTravelType = (record: Record<string, any>) => {
    const normalizedType = normalizeTogetherTravelType(record);
    if (normalizedType === TOGETHER_TRAVEL_TYPES.togetherFlight) return '同航班';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.togetherTrain) return '同火车';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.railTicket) return '铁路订票';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.flightTicket) return '民航订票';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.flightDeparture) return '民航离港';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.carTicket) return '运管票务';
    if (record.type) return record.type;
    return '同行出行';
  };

  const normalizeTogetherTravelType = (record: Record<string, any>) => {
    const rawType = String(record?.type || '').trim();
    if (rawType && togetherTravelTypeSet.has(rawType)) {
      return rawType;
    }

    const normalizedType = rawType.toUpperCase();
    if (normalizedType && togetherTravelTypeSet.has(normalizedType)) {
      return normalizedType;
    }

    const ticketSource = [record?.ticketType, record?.travelType, record?.tripType, record?.typeName]
      .map((item) =>
        String(item || '')
          .trim()
          .toUpperCase(),
      )
      .filter(Boolean);
    if (ticketSource.some((item) => item.includes('FLIGHT_DEPARTURE') || item.includes('离港'))) {
      return TOGETHER_TRAVEL_TYPES.flightDeparture;
    }
    if (ticketSource.some((item) => item.includes('FLIGHT_TICKET') || item.includes('民航订票'))) {
      return TOGETHER_TRAVEL_TYPES.flightTicket;
    }
    if (ticketSource.some((item) => item.includes('RAIL_TICKET') || item.includes('铁路订票'))) {
      return TOGETHER_TRAVEL_TYPES.railTicket;
    }
    if (ticketSource.some((item) => item.includes('CAR_TICKET') || item.includes('运管票务'))) {
      return TOGETHER_TRAVEL_TYPES.carTicket;
    }

    if (rawType.includes('同航班') || rawType.includes('同行航班')) return TOGETHER_TRAVEL_TYPES.togetherFlight;
    if (rawType.includes('同火车') || rawType.includes('同行铁路') || rawType.includes('列车同行')) {
      return TOGETHER_TRAVEL_TYPES.togetherTrain;
    }
    if (rawType.includes('铁路订票') || rawType.includes('火车票')) return TOGETHER_TRAVEL_TYPES.railTicket;
    if (rawType.includes('民航订票') || rawType.includes('航班订票')) return TOGETHER_TRAVEL_TYPES.flightTicket;
    if (rawType.includes('民航离港') || rawType.includes('离港')) return TOGETHER_TRAVEL_TYPES.flightDeparture;
    if (rawType.includes('运管票务') || rawType.includes('大巴')) return TOGETHER_TRAVEL_TYPES.carTicket;

    const travelNo = String(
      record?.tripNo || record?.travelNo || record?.hbh || record?.cc || record?.bch || '',
    ).trim();
    if (record?.hbh || /^([A-Z]{2}\d+|\d{3,4})$/i.test(travelNo)) {
      return TOGETHER_TRAVEL_TYPES.togetherFlight;
    }
    if (record?.cc || /^[CGDKTZLYS]\d+/i.test(travelNo)) {
      return TOGETHER_TRAVEL_TYPES.togetherTrain;
    }
    if (record?.bch) {
      return TOGETHER_TRAVEL_TYPES.carTicket;
    }

    return rawType || undefined;
  };

  const mapSummaryGroup = (item: Record<string, any>, index: number): PeerGroupItem => {
    const personName = item.personName || item.obj1 || '-';
    const companionName = item.companionName || item.obj2 || '-';
    const count = Number(item.count ?? item.meetCount ?? item.travelCount ?? 0);
    const idList = normalizeIds(item.idList ?? item.ids);

    return {
      id: `${personName}-${companionName}-${index}`,
      personName,
      companionName,
      members: [personName, companionName].filter(Boolean).join('  '),
      count: Number.isFinite(count) ? count : 0,
      idList,
      raw: item,
    };
  };

  const mapTravelRecord = (record: Record<string, any>, fallbackTime: string, key: string): RecordItem => {
    const travelType = resolveTravelType(record);
    const travelNo = record.tripNo || record.travelNo || record.hbh || record.cc || record.bch || '';
    const traveler =
      record.personName ||
      record.queryName ||
      record.objName ||
      record.passengerName ||
      record.travelerName ||
      activeGroup.value?.members ||
      '-';

    return {
      id: String(record.id || key),
      traveler,
      time: record.tripDateTime || record.travelTime || record.departureTime || fallbackTime || '-',
      method: [travelType, travelNo].filter(Boolean).join(' ') || travelType,
      departure:
        record.origin || record.fromWhere || record.departure || record.fz || record.qszm || record.sfczmc || '-',
      destination:
        record.destination || record.toWhere || record.arrival || record.dz || record.zdzm || record.mddmc || '-',
      raw: record,
    };
  };

  const getRecordSortTimestamp = (record: RecordItem) => {
    const timeValue =
      record.raw?.tripDateTime ||
      record.raw?.travelTime ||
      record.raw?.departureTime ||
      record.raw?.tripDate ||
      record.raw?.dt ||
      record.raw?.date ||
      record.time;
    if (!timeValue) return 0;
    const timestamp = dayjs(String(timeValue)).valueOf();
    return Number.isFinite(timestamp) ? timestamp : 0;
  };

  const sortRecordList = (list: RecordItem[]) =>
    [...list].sort((left, right) => {
      const leftTime = getRecordSortTimestamp(left);
      const rightTime = getRecordSortTimestamp(right);
      if (rightTime !== leftTime) return rightTime - leftTime;

      return String(left.traveler || '').localeCompare(String(right.traveler || ''), 'zh-CN');
    });

  const normalizeRecordList = (resp: any): RecordItem[] => {
    const groups = extractList(resp);
    if (!groups.length) return [];

    const items: RecordItem[] = [];

    groups.forEach((group, groupIndex) => {
      if (Array.isArray(group?.data)) {
        const fallbackTime = group.tripDate || group.dt || group.date || '-';
        group.data.forEach((record: Record<string, any>, recordIndex: number) => {
          items.push(mapTravelRecord(record, fallbackTime, `${groupIndex}-${recordIndex}`));
        });
        return;
      }

      items.push(mapTravelRecord(group, group.tripDate || group.dt || group.date || '-', `${groupIndex}`));
    });

    return items;
  };

  const formatTogetherTravelTypeLabel = (value: unknown) => {
    const normalizedType = String(value || '')
      .trim()
      .toUpperCase();
    if (!normalizedType) return '-';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.togetherFlight) return '同航班';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.togetherTrain) return '同火车';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.railTicket) return '铁路订票';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.flightTicket) return '民航订票';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.flightDeparture) return '民航离港';
    if (normalizedType === TOGETHER_TRAVEL_TYPES.carTicket) return '运管票务';
    return String(value);
  };

  const formatDetailValue = (value: unknown, key?: string) => {
    if (value === undefined || value === null || value === '') return '-';
    const normalizedKey = String(key || '')
      .trim()
      .toLowerCase();
    if (normalizedKey === 'type') {
      return formatTogetherTravelTypeLabel(value);
    }
    if (Array.isArray(value)) {
      return value.map((item) => (typeof item === 'object' ? JSON.stringify(item) : String(item))).join('、') || '-';
    }
    if (typeof value === 'object' && value !== null) {
      return JSON.stringify(value);
    }
    return String(value);
  };

  const shouldDisplayDetailField = (key: string, value: unknown) => {
    if (['rowKey', 'rowNo', 'raw', 'data'].includes(key)) return false;
    if (
      hiddenDetailKeys.has(
        String(key || '')
          .trim()
          .toLowerCase(),
      )
    )
      return false;
    return formatDetailValue(value, key) !== '-';
  };

  const sortDetailKeys = (keys: string[]) => {
    const preferredOrder = [
      'rowNo',
      'personName',
      'companionName',
      'type',
      'tripNo',
      'travelNo',
      'hbh',
      'cc',
      'bch',
      'origin',
      'fromWhere',
      'destination',
      'toWhere',
      'tripDateTime',
      'travelTime',
      'tripDate',
      'dt',
      'date',
      'id',
    ];

    return [...keys].sort((left, right) => {
      const leftIndex = preferredOrder.indexOf(left);
      const rightIndex = preferredOrder.indexOf(right);
      if (leftIndex === -1 && rightIndex === -1) return left.localeCompare(right, 'zh-CN');
      if (leftIndex === -1) return 1;
      if (rightIndex === -1) return -1;
      return leftIndex - rightIndex;
    });
  };

  const buildDetailRowsFromFields = (source: Record<string, any>) => {
    const keys = sortDetailKeys(Object.keys(source || {}).filter((key) => shouldDisplayDetailField(key, source[key])));

    return keys.map((key, index) => ({
      rowKey: `field-${key}-${index}`,
      label: resolveDetailLabel(key),
      value: formatDetailValue(source[key], key),
    }));
  };

  const normalizeDetailListRows = (resp: any) => {
    const groups = extractList(resp).filter((item) => item && typeof item === 'object');
    if (!groups.length) return [];

    const rows: Record<string, any>[] = [];

    groups.forEach((group: Record<string, any>, groupIndex: number) => {
      if (Array.isArray(group?.data)) {
        const { data, ...rest } = group;
        data.forEach((item: Record<string, any>, recordIndex: number) => {
          const merged = { ...rest, ...item };
          const row: Record<string, any> = {
            rowKey: String(merged.id ?? `${groupIndex}-${recordIndex}`),
            rowNo: rows.length + 1,
          };

          Object.keys(merged).forEach((key) => {
            if (!shouldDisplayDetailField(key, merged[key])) return;
            row[key] = formatDetailValue(merged[key], key);
          });
          rows.push(row);
        });
        return;
      }

      const row: Record<string, any> = {
        rowKey: String(group.id ?? groupIndex),
        rowNo: rows.length + 1,
      };

      Object.keys(group).forEach((key) => {
        if (!shouldDisplayDetailField(key, group[key])) return;
        row[key] = formatDetailValue(group[key], key);
      });
      rows.push(row);
    });

    return rows;
  };

  const applyDetailResponse = (record: RecordItem, resp: any) => {
    const listRows = normalizeDetailListRows(resp);
    if (listRows.length) {
      detailMode.value = 'records';
      detailRows.value = listRows;
      detailColumnKeys.value = sortDetailKeys(
        Array.from(new Set(listRows.flatMap((item) => Object.keys(item).filter((key) => key !== 'rowKey')))),
      );
      return;
    }

    const mergedDetail = {
      ...record.raw,
      ...extractDetailData(resp),
    };
    detailMode.value = 'fields';
    detailColumnKeys.value = [];
    detailRows.value = buildDetailRowsFromFields(mergedDetail);
  };

  const extractDetailData = (resp: any): Record<string, any> => {
    if (Array.isArray(resp)) {
      const first = resp.find((item) => item && typeof item === 'object');
      return (first as Record<string, any>) || {};
    }
    if (resp?.data && !Array.isArray(resp.data) && typeof resp.data === 'object') {
      return resp.data;
    }
    if (Array.isArray(resp?.list)) {
      return resp.list.find((item: any) => item && typeof item === 'object') || {};
    }
    if (Array.isArray(resp?.records)) {
      return resp.records.find((item: any) => item && typeof item === 'object') || {};
    }
    if (Array.isArray(resp?.data)) {
      return resp.data.find((item: any) => item && typeof item === 'object') || {};
    }
    return resp && typeof resp === 'object' ? resp : {};
  };

  const buildSummaryQuery = (): TrackTogetherTravelQuery => {
    const startDate =
      Array.isArray(filters.value.dateRange) && filters.value.dateRange[0]
        ? dayjs(filters.value.dateRange[0]).format('YYYY-MM-DD')
        : undefined;
    const endDate =
      Array.isArray(filters.value.dateRange) && filters.value.dateRange[1]
        ? dayjs(filters.value.dateRange[1]).format('YYYY-MM-DD')
        : undefined;

    return {
      page: 1,
      limit: 200,
      startDate,
      endDate,
      personNames: filters.value.target.length ? filters.value.target : undefined,
    };
  };

  const buildSecondQuery = (group: PeerGroupItem): TrackTogetherTravelQuery => {
    const summaryQuery = buildSummaryQuery();
    const companionName = group.companionName && group.companionName !== '-' ? group.companionName : undefined;
    const ids = resolveGroupIds(group);
    const personNames = resolveGroupPersonNames(group.personName, companionName);

    return {
      ...summaryQuery,
      page: 1,
      limit: 200,
      companionName,
      otherName: companionName,
      personNames: personNames.length ? personNames : summaryQuery.personNames,
      ids: ids.length ? ids : undefined,
      orderKey: DEFAULT_RECORD_SORT_KEY,
      sort: DEFAULT_RECORD_SORT_ORDER,
    };
  };

  const buildThirdQuery = (record: RecordItem): TrackTogetherTravelQuery => {
    const group = activeGroup.value;
    const secondQuery = group ? buildSecondQuery(group) : buildSummaryQuery();

    return {
      ...secondQuery,
      id: record.raw?.id ? String(record.raw.id) : undefined,
      type: normalizeTogetherTravelType(record.raw),
      tripNo: record.raw?.tripNo || undefined,
      travelNo: record.raw?.travelNo || undefined,
      origin: record.raw?.origin || record.raw?.fromWhere || undefined,
      destination: record.raw?.destination || record.raw?.toWhere || undefined,
      tripDate: record.raw?.tripDate || undefined,
      tripDateTime: record.raw?.tripDateTime || undefined,
      travelTime: record.raw?.travelTime || undefined,
    };
  };

  const clearDetailState = () => {
    selectedRecordId.value = null;
    detailRows.value = [];
    detailColumnKeys.value = [];
    detailMode.value = 'fields';
  };

  const fetchRecordList = async (group: PeerGroupItem | null) => {
    if (!group) {
      recordList.value = [];
      clearDetailState();
      return;
    }

    recordLoading.value = true;
    try {
      let resp: any;

      try {
        resp = await statSecondTogetherTravel(buildSecondQuery(group));
      } catch (error) {
        resp = await legacyTravelRecords({
          caseId: getCaseId(),
          idList: group.idList,
        });
      }

      recordList.value = sortRecordList(normalizeRecordList(resp));
    } catch (error) {
      recordList.value = [];
      clearDetailState();
      createMessage.warning('同行记录接口调用失败');
    } finally {
      recordLoading.value = false;
    }
  };

  const fetchDetailTable = async (record: RecordItem | null) => {
    if (!record) {
      clearDetailState();
      return;
    }

    selectedRecordId.value = record.id;
    detailLoading.value = true;
    try {
      let resp: any;

      try {
        resp = await statThreeTogetherTravel(buildThirdQuery(record));
      } catch (error) {
        if (!record.raw?.id) throw error;
        resp = await legacyTravelTimelineDetail({
          caseId: getCaseId(),
          type: record.raw.type,
          id: String(record.raw.id),
        });
      }

      applyDetailResponse(record, resp);
    } catch (error) {
      detailMode.value = 'fields';
      detailColumnKeys.value = [];
      detailRows.value = buildDetailRowsFromFields({ ...record.raw });
      createMessage.warning('同行详情接口调用失败，已展示基础信息');
    } finally {
      detailLoading.value = false;
    }
  };

  const handleRecordRowClick = async (record: RecordItem) => {
    await fetchDetailTable(record);
  };

  const recordRowClassName = (record: RecordItem) => {
    return selectedRecordId.value === record.id ? 'record-row-selected' : '';
  };

  const handleSelectGroup = async (group: PeerGroupItem) => {
    selectedGroup.value = group.id;
    clearDetailState();
    await fetchRecordList(group);
    if (recordList.value.length) {
      await fetchDetailTable(recordList.value[0]);
    }
  };

  const fetchSummaryTable = async () => {
    try {
      await runWithQueryLoading(async () => {
        const summaryQuery = buildSummaryQuery();
        let list: any[] = [];

        try {
          const resp = await statTogetherTravel(summaryQuery);
          list = extractList(resp);
        } catch (error) {
          const resp = await legacyTravelTimeline({
            ...summaryQuery,
            caseId: getCaseId(),
          });
          list = extractList(resp);
        }

        peerGroups.value = list.map(mapSummaryGroup);
        hasSearched.value = true;
        syncAnalysisDataRefreshState(peerGroups.value.length > 0);

        if (!peerGroups.value.length) {
          selectedGroup.value = null;
          recordList.value = [];
          clearDetailState();
          return;
        }

        await handleSelectGroup(peerGroups.value[0]);
      });
    } catch (error) {
      peerGroups.value = [];
      hasSearched.value = true;
      syncAnalysisDataRefreshState(false);
      selectedGroup.value = null;
      recordList.value = [];
      clearDetailState();
      createMessage.warning('同行分析接口调用失败');
    }
  };

  const handleSearch = async () => {
    await fetchSummaryTable();
  };

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

  const fetchTargetOptions = async () => {
    try {
      personList.value = await getPersons();
      targetOptions.value = personList.value
        .filter((item) => item.personName)
        .map((item) => ({
          label: item.personName || '-',
          value: item.personName || '',
        }));
    } catch (error) {
      personList.value = [];
      targetOptions.value = [];
    }
  };

  onMounted(async () => {
    await fetchTargetOptions();
    const routePersonNames = parseRoutePersonNames();
    if (!routePersonNames.length) return;
    filters.value.target = routePersonNames;
    await fetchSummaryTable();
  });
</script>
<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';

  @prefix-cls: ~'jeesite-peer-analysis';

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

    .filter-input {
      width: 180px;
    }

    .filter-date {
      width: 360px;
    }

    .page-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .group-section {
      flex: 0 0 auto;
      .analysis-card-shell();
    }

    .record-section {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .record-layout {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 56%) minmax(0, 44%);
      gap: 2px;
      align-items: stretch;
      padding: 2px;
      background: @content-bg;
      box-sizing: border-box;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .section-head--record {
      margin-bottom: 8px;
    }

    .section-head--record.panel-header.jeesite-basic-table-panel-setting-host {
      justify-content: flex-start;
      align-items: center;
      gap: 6px;

      > .section-title {
        flex: 0 0 auto;
        order: 1;
        margin-right: auto;
      }

      > .section-meta {
        order: 2;
        margin-left: 0;
      }

      > .jeesite-basic-table-panel-setting {
        order: 3;
        margin-left: 2px;
      }
    }

    .section-title {
      color: #111827;
      font-size: 13px;
      font-weight: 600;
      line-height: 18px;
    }

    .section-meta {
      color: #6b7280;
      font-size: 11px;
      line-height: 16px;
    }

    .peer-groups {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      padding: 0;
      width: 100%;
      min-height: 72px;
      overflow-x: auto;
      overflow-y: hidden;
      box-sizing: border-box;

      &::-webkit-scrollbar {
        height: 8px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }
    }

    .peer-card {
      width: 188px;
      flex: 0 0 188px;
      min-height: 48px;
      padding: 8px 10px;
      background: transparent;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        border-color: #91caff;
        box-shadow: none;
      }

      &.active {
        border-color: #1677ff;
        background: rgba(239, 246, 255, 0.7);
        box-shadow: none;
      }
    }

    .peer-members {
      font-size: 12px;
      color: #111827;
      font-weight: 500;
      line-height: 18px;
      word-break: break-all;
    }

    .peer-count-line {
      margin-top: 2px;
      color: #4b5563;
      font-size: 11px;
      line-height: 16px;
    }

    .peer-count-label {
      color: #6b7280;
    }

    .peer-count-value {
      color: #111827;
      font-weight: 500;
    }

    .record-panel,
    .detail-panel {
      .analysis-card-shell();
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

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

    .table-wrapper--record,
    .table-wrapper--detail {
      .jeesite-basic-table,
      .ant-table-wrapper,
      .ant-spin-nested-loading,
      .ant-spin-container,
      .ant-table,
      .ant-table-container,
      .ant-table-content,
      .ant-table-scroll {
        height: 100%;
        min-height: 0;
        width: 100%;
      }

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

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

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

      .ant-table-body::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
      }

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

    .table-wrapper--record {
      .ant-table-tbody > tr {
        cursor: pointer;
        transition: background-color 0.2s ease;
      }
    }

    .table-wrapper--detail {
      :deep(.ant-table-cell) {
        word-break: break-all;
      }
    }

    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
      padding: 0 8px;
    }

    .empty-state--group {
      min-height: 72px;
      padding: 0;
    }

    .empty-state--record {
      margin-top: 0;
      min-height: 220px;
    }

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

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

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

      .record-layout {
        grid-template-columns: 1fr;
      }
    }
  }
</style>