// 【重要】必须使用 const Component 作为组件变量名
// ONE-OS 小程序 - 小羚羚（待办 / 业务 / 地图 / 我的）

const { useState, useMemo, useCallback, useEffect, useRef } = React;

const XLL_GREEN = '#7AB929';
const XLL_GREEN_DEEP = '#6AA322';
const XLL_GREEN_SOFT = 'rgba(122, 185, 41, 0.14)';
const COLOR_TEXT = '#1D2129';
const COLOR_TEXT_SEC = '#4E5969';
const COLOR_MUTED = '#86909C';
const COLOR_LINE = '#E5E6EB';
const COLOR_BG = '#FFFFFF';
const COLOR_PAGE = '#F2F3F5';
const COLOR_DANGER = '#F53F3F';
const COLOR_WARN = '#FF7D00';
const COLOR_SUCCESS = '#00B42A';
const FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, sans-serif';

const antd = (() => {
  const raw = window.antd;
  if (!raw) return {};
  return raw.default && typeof raw.default === 'object' ? { ...raw, ...raw.default } : raw;
})();
const message = antd.message || { info: () => {}, success: () => {}, warning: () => {} };
const Modal = antd.Modal;
const Button = antd.Button;
const Drawer = antd.Drawer;
const Input = antd.Input;

const MOCK_USER = '张明辉';
const formatMoneySymbol = (val) => {
  const n = parseFloat(val);
  if (Number.isNaN(n)) return '—';
  return `￥${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};
const formatMoney = formatMoneySymbol;
const formatYuan = formatMoneySymbol;

const MAIN_TABS = [
  { key: 'todo', label: '工作台', navLabel: '待办' },
  { key: 'business', label: '业务', navLabel: '业务' },
  { key: 'map', label: '地图', navLabel: '地图' },
  { key: 'mine', label: '我的', navLabel: '我的' },
];

const TASK_THEME = {
  delivery: { accent: XLL_GREEN, soft: XLL_GREEN_SOFT, label: '交车' },
  return: { accent: '#2563EB', soft: 'rgba(37, 99, 235, 0.12)', label: '还车' },
  inspection: { accent: COLOR_WARN, soft: 'rgba(255, 125, 0, 0.12)', label: '年审' },
  transfer: { accent: '#8B5CF6', soft: 'rgba(139, 92, 246, 0.12)', label: '调拨' },
  move: { accent: '#14B8A6', soft: 'rgba(20, 184, 166, 0.12)', label: '异动' },
};

const TODO_TASKS = [
  {
    id: 't1', type: 'delivery', badge: null,
    title: '交车任务（3辆）',
    fields: [
      { label: '项目名称', value: '嘉兴氢能示范项目' },
      { label: '客户名称', value: '嘉兴某某物流有限公司' },
      { label: '交车地点', value: '浙江省嘉兴市南湖区xx路xx号' },
      { label: '交车时间', value: '2026-06-05 09:30' },
    ],
  },
  {
    id: 't2', type: 'return', badge: null,
    title: '还车任务（粤AGP5368）',
    fields: [
      { label: '项目名称', value: '嘉兴腾4.5T租赁' },
      { label: '客户名称', value: '嘉兴某某物流有限公司' },
      { label: '还车时间', value: '2026-06-03 16:20' },
    ],
  },
  {
    id: 't3', type: 'inspection', badge: 4,
    title: '年审任务',
    fields: [
      { label: '车牌号', value: '粤B58888F' },
      { label: '年审/等评时间', value: '2026-05-28（已到期）', warn: true },
    ],
  },
  {
    id: 't4', type: 'transfer', badge: 2,
    title: '张三发起的调拨申请',
    fields: [
      { label: '调拨日期', value: '2026-06-01' },
      { label: '出发区域', value: '广东省深圳市' },
      { label: '接收区域', value: '浙江省杭州市' },
      { label: '车辆数', value: '40辆' },
    ],
  },
  {
    id: 't5', type: 'move', badge: 3,
    title: '异动申请（粤A08875F）',
    fields: [
      { label: '异动类型', value: '保养' },
      { label: '目的地', value: '嘉兴xx检测站' },
      { label: '计划时间', value: '2026-06-02 08:00' },
    ],
  },
];

const BUSINESS_SECTIONS = [
  {
    title: '运维管理',
    items: [
      { key: 'vehicle', label: '车辆管理', badge: 0 },
      { key: 'prepare', label: '备车', badge: 0 },
      { key: 'delivery', label: '交车', badge: 99 },
      { key: 'return', label: '还车', badge: 99 },
      { key: 'replace', label: '替换车', badge: 99 },
      { key: 'move', label: '异动', badge: 0 },
      { key: 'transfer', label: '调拨', badge: 99 },
      { key: 'inspection', label: '年审', badge: 99 },
      { key: 'fault', label: '故障', badge: 0 },
      { key: 'training', label: '司机安全培训', badge: 0 },
    ],
  },
  {
    title: '审批管理',
    items: [{ key: 'audit', label: '审批中心', badge: 99 }],
  },
  {
    title: '数据可视化',
    items: [
      { key: 'stat-vehicle', label: '车辆统计', badge: 0 },
      { key: 'stat-h2-fee', label: '氢费统计', badge: 0 },
      { key: 'stat-h2-qty', label: '氢量汇总', badge: 0 },
      { key: 'stat-electric', label: '电量汇总', badge: 0 },
      { key: 'mileage-query', label: '里程查询', badge: 0 },
      { key: 'mileage-assess', label: '里程考核', badge: 0 },
    ],
  },
];

const PAGE_STYLE = `
.xll-root { height:100dvh; max-height:100dvh; overflow:hidden; background:linear-gradient(165deg,#e8ebef 0%,${COLOR_PAGE} 40%); display:flex; justify-content:center; align-items:center; padding:16px 12px; box-sizing:border-box; font-family:${FONT_FAMILY}; -webkit-font-smoothing:antialiased; }
.xll-phone { width:100%; max-width:390px; height:min(844px, calc(100dvh - 32px)); max-height:calc(100dvh - 32px); background:${COLOR_PAGE}; border-radius:28px; overflow:hidden; box-shadow:0 24px 48px rgba(15,23,42,.14), 0 0 0 1px rgba(15,23,42,.05); display:flex; flex-direction:column; position:relative; }
.xll-chrome { flex-shrink:0; background:${COLOR_BG}; }
.xll-status { height:44px; padding:14px 20px 0; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; }
.xll-status-time { font-size:15px; font-weight:600; color:${COLOR_TEXT}; letter-spacing:-0.02em; }
.xll-status-icons { display:flex; align-items:center; gap:6px; color:${COLOR_TEXT}; }
.xll-navbar { height:48px; display:flex; align-items:center; padding:0 4px 0 8px; border-bottom:1px solid rgba(0,0,0,.05); position:relative; background:${COLOR_BG}; }
.xll-nav-left { display:flex; align-items:center; gap:4px; min-width:72px; z-index:2; }
.xll-nav-bell { position:relative; width:44px; height:44px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:${COLOR_TEXT}; border-radius:10px; touch-action:manipulation; transition:background 0.15s ease; }
.xll-nav-bell:active { background:rgba(0,0,0,.05); }
.xll-nav-bell:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-nav-badge { position:absolute; top:6px; right:4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:${XLL_GREEN}; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; font-variant-numeric:tabular-nums; }
.xll-nav-title { position:absolute; left:50%; transform:translateX(-50%); font-size:17px; font-weight:700; color:${COLOR_TEXT}; max-width:42%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xll-nav-right { margin-left:auto; display:flex; align-items:center; gap:6px; z-index:2; }
.xll-prd-link { border:none; background:transparent; color:${XLL_GREEN_DEEP}; font-size:13px; font-weight:600; padding:8px 4px; min-height:44px; cursor:pointer; white-space:nowrap; touch-action:manipulation; border-radius:8px; transition:background 0.15s ease; }
.xll-prd-link:active { background:${XLL_GREEN_SOFT}; }
.xll-prd-link:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-back { width:44px; height:44px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:${COLOR_TEXT}; border-radius:10px; touch-action:manipulation; transition:background 0.15s ease; }
.xll-back:active { background:rgba(0,0,0,.05); }
.xll-back:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-capsule { display:flex; align-items:center; height:32px; border-radius:16px; border:.5px solid rgba(0,0,0,.12); background:rgba(255,255,255,.92); overflow:hidden; }
.xll-capsule-btn { width:44px; height:32px; border:none; background:transparent; font-size:16px; cursor:pointer; color:${COLOR_TEXT}; touch-action:manipulation; }
.xll-capsule-divider { width:1px; height:18px; background:rgba(0,0,0,.12); flex-shrink:0; }
.xll-body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:16px; }
.xll-body--login { overflow:hidden; display:flex; flex-direction:column; padding-bottom:0; }
.xll-body--map { padding-bottom:12px; }
.xll-body--module { padding:0; overflow:hidden; display:flex; flex-direction:column; flex:1; min-height:0; }
.xll-mod-root { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:${COLOR_PAGE}; }
.xll-mod-tabs { display:flex; gap:6px; padding:10px 14px 8px; background:${COLOR_BG}; flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
.xll-mod-tabs::-webkit-scrollbar { display:none; }
.xll-mod-tab { flex:1 0 auto; min-width:72px; min-height:44px; padding:8px 10px; border:none; border-radius:10px; background:${COLOR_PAGE}; color:${COLOR_MUTED}; font-size:13px; font-weight:500; cursor:pointer; touch-action:manipulation; }
.xll-mod-tab.active { background:${COLOR_BG}; color:${XLL_GREEN_DEEP}; font-weight:700; box-shadow:0 2px 8px rgba(15,23,42,.08); }
.xll-mod-tab-count { display:block; font-size:11px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums; }
.xll-mod-toolbar { padding:0 14px 10px; flex-shrink:0; background:${COLOR_BG}; border-bottom:1px solid ${COLOR_LINE}; }
.xll-mod-search { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; background:${COLOR_PAGE}; border-radius:12px; border:1px solid transparent; }
.xll-mod-search:focus-within { border-color:rgba(122,185,41,.45); box-shadow:0 0 0 3px ${XLL_GREEN_SOFT}; background:${COLOR_BG}; }
.xll-mod-search input { flex:1; border:none; background:transparent; font-size:15px; outline:none; min-width:0; color:${COLOR_TEXT}; }
.xll-mod-chips { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.xll-mod-chips::-webkit-scrollbar { display:none; }
.xll-mod-chip { flex-shrink:0; min-height:36px; padding:0 14px; border:1px solid ${COLOR_LINE}; background:${COLOR_BG}; border-radius:999px; font-size:13px; color:${COLOR_TEXT_SEC}; cursor:pointer; white-space:nowrap; touch-action:manipulation; }
.xll-mod-chip.active { border-color:${XLL_GREEN}; color:${XLL_GREEN_DEEP}; background:${XLL_GREEN_SOFT}; font-weight:600; }
.xll-mod-list-head { display:flex; justify-content:space-between; padding:12px 16px 4px; font-size:12px; color:${COLOR_MUTED}; flex-shrink:0; }
.xll-mod-list { flex:1; min-height:0; overflow-y:auto; padding:4px 14px 20px; -webkit-overflow-scrolling:touch; }
.xll-mod-card { position:relative; background:${COLOR_BG}; border-radius:14px; padding:14px 14px 12px 16px; margin-bottom:12px; box-shadow:0 2px 8px rgba(15,23,42,.05); border:1px solid rgba(0,0,0,.04); cursor:pointer; touch-action:manipulation; }
.xll-mod-card::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--mod-accent, ${XLL_GREEN}); }
.xll-mod-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.xll-mod-card-type { font-size:11px; font-weight:600; color:var(--mod-accent, ${XLL_GREEN}); background:var(--mod-soft, ${XLL_GREEN_SOFT}); padding:2px 8px; border-radius:999px; }
.xll-mod-card-status { display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; line-height:1; padding:4px 8px; border-radius:999px; box-sizing:border-box; flex-shrink:0; }
.xll-mod-card-status.pending { color:${COLOR_WARN}; background:rgba(255,125,0,.1); }
.xll-mod-card-status.with-approvers { max-width:58%; text-align:right; line-height:1.35; white-space:normal; }
.xll-mod-card-status.ok { color:${COLOR_SUCCESS}; background:rgba(0,180,42,.1); }
.xll-mod-card-status.reject { color:${COLOR_DANGER}; background:rgba(245,63,63,.1); }
.xll-mod-card-status.info { color:#2563EB; background:rgba(37,99,235,.1); }
.xll-mod-card-title { font-size:15px; font-weight:700; color:${COLOR_TEXT}; margin-bottom:4px; }
.xll-mod-card-sub { font-size:13px; color:${COLOR_TEXT_SEC}; line-height:1.5; margin-bottom:8px; }
.xll-mod-card-period { font-size:12px; color:${COLOR_TEXT_SEC}; line-height:1.45; margin-bottom:8px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.xll-mod-card-period-tag { font-size:11px; font-weight:700; color:#0EA5E9; background:rgba(14,165,233,.12); padding:2px 8px; border-radius:999px; flex-shrink:0; }
.xll-mod-card-vehicles { margin-bottom:8px; }
.xll-mod-card-vehicle-line { font-size:13px; color:${COLOR_TEXT_SEC}; line-height:1.5; }
.xll-mod-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; font-size:12px; }
.xll-mod-meta-label { color:${COLOR_MUTED}; }
.xll-mod-meta-val { color:${COLOR_TEXT_SEC}; font-weight:500; }
.xll-mod-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid ${COLOR_LINE}; }
.xll-mod-card-btn { min-height:36px; padding:0 14px; border-radius:10px; border:1px solid rgba(122,185,41,.35); background:${XLL_GREEN_SOFT}; color:${XLL_GREEN}; font-size:13px; font-weight:600; cursor:pointer; }
.xll-mod-empty { text-align:center; padding:48px 24px; color:${COLOR_MUTED}; font-size:14px; line-height:1.6; }
.xll-mod-scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:88px; }
.xll-mod-hero { margin:12px 14px 0; border-radius:14px; padding:18px 16px; color:#fff; }
.xll-mod-hero.orange { background:linear-gradient(135deg,#F97316,#EA580C); }
.xll-mod-hero.purple { background:linear-gradient(135deg,#8B5CF6,#7C3AED); }
.xll-mod-hero.green { background:linear-gradient(135deg,${XLL_GREEN},${XLL_GREEN_DEEP}); }
.xll-mod-hero-label { font-size:13px; opacity:.9; margin-bottom:6px; }
.xll-mod-hero-amt { font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; margin-bottom:8px; }
.xll-mod-hero-meta { font-size:13px; opacity:.92; line-height:1.5; }
.xll-mod-section { margin:12px 14px 0; background:${COLOR_BG}; border-radius:14px; padding:14px 16px; box-shadow:0 2px 8px rgba(15,23,42,.04); border:1px solid rgba(0,0,0,.03); }
.xll-mod-section-title { font-size:14px; font-weight:700; color:${COLOR_TEXT}; margin-bottom:12px; }
.xll-mod-action-bar { position:absolute; left:0; right:0; bottom:0; display:flex; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0)); background:${COLOR_BG}; border-top:1px solid ${COLOR_LINE}; z-index:20; }
.xll-mod-action-bar button { flex:1; min-height:44px; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; border:none; touch-action:manipulation; }
.xll-mod-btn-ghost { background:${COLOR_PAGE}; color:${COLOR_TEXT_SEC}; border:1px solid ${COLOR_LINE}; }
.xll-mod-btn-danger { background:rgba(245,63,63,.08); color:${COLOR_DANGER}; border:1px solid rgba(245,63,63,.25); }
.xll-mod-btn-primary { background:${XLL_GREEN}; color:#fff; box-shadow:0 4px 12px rgba(122,185,41,.3); }
.xll-mod-ar-plate { font-size:18px; font-weight:800; color:${COLOR_TEXT}; }
.xll-mod-ar-tag { display:inline-flex; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-left:8px; }
.xll-mod-ar-tag.warn { color:${COLOR_WARN}; background:rgba(255,125,0,.12); }
.xll-mod-ar-tag.danger { color:${COLOR_DANGER}; background:rgba(245,63,63,.1); }
.xll-mod-form-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid ${COLOR_LINE}; gap:12px; font-size:14px; }
.xll-mod-form-row:last-child { border-bottom:none; }
.xll-mod-form-label { color:${COLOR_MUTED}; flex-shrink:0; }
.xll-mod-form-value { color:${COLOR_TEXT}; text-align:right; flex:1; word-break:break-all; }
.xll-mod-form-input { flex:1; min-height:40px; border:1px solid ${COLOR_LINE}; border-radius:8px; padding:0 10px; font-size:14px; text-align:right; outline:none; }
.xll-mod-form-input:focus { border-color:${XLL_GREEN}; box-shadow:0 0 0 2px ${XLL_GREEN_SOFT}; }
.xll-mod-foot-btns { display:flex; gap:10px; padding:14px; flex-shrink:0; background:${COLOR_BG}; border-top:1px solid ${COLOR_LINE}; }
.xll-mod-foot-btns button { flex:1; min-height:48px; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; border:none; touch-action:manipulation; }
.xll-mod-detail-wrap { flex:1; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.xll-mod-drawer-types { display:flex; flex-wrap:wrap; gap:8px; }
.xll-mod-drawer-type-btn { min-height:40px; padding:0 14px; border:1px solid ${COLOR_LINE}; border-radius:10px; background:${COLOR_BG}; font-size:13px; color:${COLOR_TEXT_SEC}; cursor:pointer; }
.xll-mod-drawer-type-btn.active { border-color:${XLL_GREEN}; color:${XLL_GREEN_DEEP}; background:${XLL_GREEN_SOFT}; font-weight:600; }
.xll-mod-timeline { padding-left:4px; }
.xll-mod-step { display:flex; gap:12px; margin-bottom:14px; }
.xll-mod-step-dot { width:22px; height:22px; border-radius:50%; background:${COLOR_LINE}; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xll-mod-step-dot.done { background:${COLOR_SUCCESS}; }
.xll-mod-step-title { font-size:14px; font-weight:600; color:${COLOR_TEXT}; margin-bottom:4px; }
.xll-mod-step-meta { font-size:12px; color:${COLOR_MUTED}; line-height:1.55; }
.xll-mod-upload { border:1px dashed ${COLOR_LINE}; border-radius:10px; padding:20px; text-align:center; color:${COLOR_MUTED}; font-size:13px; cursor:pointer; background:${COLOR_PAGE}; }
.xll-mod-upload:active { background:${XLL_GREEN_SOFT}; border-color:${XLL_GREEN}; }
.xll-dv-steps-wrap { flex-shrink:0; background:${COLOR_BG}; border-bottom:1px solid ${COLOR_LINE}; padding:10px 14px; }
.xll-dv-steps { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.xll-dv-steps::-webkit-scrollbar { display:none; }
.xll-dv-step { flex-shrink:0; font-size:11px; padding:5px 10px; border-radius:999px; background:${COLOR_PAGE}; color:${COLOR_MUTED}; border:1px solid transparent; }
.xll-dv-step.active { background:${XLL_GREEN_SOFT}; color:${XLL_GREEN_DEEP}; border-color:rgba(122,185,41,.35); font-weight:600; }
.xll-dv-step.done { color:${COLOR_SUCCESS}; background:rgba(0,180,42,.08); }
.xll-dv-status { display:inline-flex; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.xll-dv-status.neutral { color:${COLOR_TEXT_SEC}; background:${COLOR_PAGE}; }
.xll-dv-status.warn { color:${COLOR_WARN}; background:rgba(255,125,0,.12); }
.xll-dv-status.ok { color:${COLOR_SUCCESS}; background:rgba(0,180,42,.1); }
.xll-dv-status.info { color:#2563EB; background:rgba(37,99,235,.1); }
.xll-dv-plate-pending { color:${COLOR_WARN}; font-weight:700; }
.xll-dv-plate-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; flex:1; min-width:0; }
.xll-dv-replace-tag { display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; line-height:1; padding:3px 8px; border-radius:999px; color:#E11D48; background:rgba(244,63,94,.12); flex-shrink:0; }
.xll-dv-hint { font-size:12px; color:${COLOR_MUTED}; line-height:1.55; margin-bottom:10px; padding:8px 10px; background:${COLOR_PAGE}; border-radius:8px; }
.xll-dv-photo-block { margin-bottom:14px; }
.xll-dv-photo-title { font-size:13px; font-weight:600; color:${COLOR_TEXT}; margin-bottom:8px; }
.xll-dv-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.xll-dv-photo-slot { aspect-ratio:1; border-radius:8px; border:1px dashed ${COLOR_LINE}; background:${COLOR_PAGE}; display:flex; align-items:center; justify-content:center; font-size:11px; color:${COLOR_MUTED}; text-align:center; padding:4px; cursor:pointer; touch-action:manipulation; }
.xll-dv-photo-slot:active { background:${XLL_GREEN_SOFT}; border-color:${XLL_GREEN}; }
.xll-dv-view-val { color:#000 !important; }
.xll-dv-module .tc-section-form { padding:0 14px 14px; }
.xll-dv-module .tc-section-form .xll-mod-form-row { padding:10px 0; }
.xll-dv-module .tc-section-form .xll-mod-form-row:last-child { border-bottom:none; }
.xll-dv-module .tc-section-hint { padding:0 14px 12px; font-size:12px; color:${COLOR_MUTED}; line-height:1.55; }
.xll-dv-module .xll-dv-photo-block { margin-bottom:0; padding:0 14px 14px; }
.xll-dv-filter-field { margin-bottom:14px; }
.xll-dv-filter-label { display:block; font-size:13px; font-weight:600; color:${COLOR_TEXT}; margin-bottom:8px; }
.xll-dv-filter-input { width:100%; min-height:44px; border:1px solid ${COLOR_LINE}; border-radius:10px; padding:0 12px; font-size:14px; box-sizing:border-box; outline:none; background:${COLOR_BG}; color:${COLOR_TEXT}; }
.xll-dv-filter-input:focus { border-color:${XLL_GREEN}; box-shadow:0 0 0 2px ${XLL_GREEN_SOFT}; }
.xll-dv-filter-date-row { display:flex; align-items:center; gap:8px; }
.xll-dv-filter-date-row .xll-dv-filter-input { flex:1; min-width:0; }
.xll-dv-filter-hint { font-size:12px; color:${COLOR_MUTED}; line-height:1.55; margin-top:8px; }
.xll-vr-module .xll-mod-tab.active { color:#E11D48; }
.xll-vr-module .xll-mod-chip.active { border-color:#F43F5E; color:#E11D48; background:rgba(244,63,94,.12); font-weight:600; }
.xll-vr-module .xll-mod-card-btn { border-color:rgba(244,63,94,.35); background:rgba(244,63,94,.1); color:#E11D48; }
.xll-vr-module .xll-vr-add-btn { flex-shrink:0; min-height:32px; padding:0 14px; border-radius:8px; border:1px solid #F43F5E; background:rgba(244,63,94,.1); color:#E11D48; font-size:13px; font-weight:600; cursor:pointer; touch-action:manipulation; }
.xll-vr-module .xll-mod-form-input:focus { border-color:#F43F5E; box-shadow:0 0 0 2px rgba(244,63,94,.12); }
.xll-vr-module .xll-vr-form-textarea { width:100%; min-height:72px; border:1px solid ${COLOR_LINE}; border-radius:8px; padding:8px 10px; font-size:14px; resize:vertical; outline:none; box-sizing:border-box; }
.xll-vr-module .xll-vr-form-textarea:focus { border-color:#F43F5E; box-shadow:0 0 0 2px rgba(244,63,94,.12); }
.xll-vr-module .xll-mod-btn-rose { background:#F43F5E; color:#fff; box-shadow:0 4px 12px rgba(244,63,94,.3); border:none; }
.xll-vr-module .tc-section-form { padding:0 14px 14px; }
.xll-vr-module .tc-section-form .xll-mod-form-row { padding:10px 0; }
.xll-vr-module .tc-section-form .xll-mod-form-row:last-child { border-bottom:none; }
.xll-vr-module .tc-section-hint { padding:0 14px 12px; font-size:12px; color:${COLOR_MUTED}; line-height:1.55; }
.xll-vr-module .tc-section-chips { padding:0 14px 14px; display:flex; flex-wrap:wrap; gap:8px; }
.xll-vm-online { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; }
.xll-vm-dot { width:6px; height:6px; border-radius:50%; background:${COLOR_MUTED}; }
.xll-vm-dot.on { background:${COLOR_SUCCESS}; }
.xll-vm-dot.off { background:${COLOR_MUTED}; }
.xll-vm-plate-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.xll-vm-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:${XLL_GREEN_SOFT}; color:${XLL_GREEN_DEEP}; }
.xll-vm-badge.warn { background:rgba(255,125,0,.12); color:${COLOR_WARN}; }
.xll-vm-badge.danger { background:rgba(245,63,63,.1); color:${COLOR_DANGER}; }
.xll-vm-badge.neutral { background:${COLOR_PAGE}; color:${COLOR_TEXT_SEC}; }
.xll-vm-filter-btn { width:44px; height:44px; border:none; background:${COLOR_PAGE}; border-radius:10px; color:${COLOR_TEXT_SEC}; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.xll-vm-filter-btn.active { background:${XLL_GREEN_SOFT}; color:${XLL_GREEN_DEEP}; }
.xll-vm-detail-hero { margin:12px 14px 0; background:${COLOR_BG}; border-radius:14px; padding:16px; box-shadow:0 2px 8px rgba(15,23,42,.05); border:1px solid rgba(0,0,0,.04); }
.xll-vm-detail-plate { font-size:20px; font-weight:800; color:${COLOR_TEXT}; margin-bottom:6px; }
.xll-vm-detail-sub { font-size:13px; color:${COLOR_TEXT_SEC}; line-height:1.5; margin-bottom:10px; }
.xll-vm-detail-tags { display:flex; flex-wrap:wrap; gap:6px; }
.xll-vm-subtabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; flex-shrink:0; background:${COLOR_BG}; border-bottom:1px solid ${COLOR_LINE}; position:sticky; top:0; z-index:5; }
.xll-vm-subtab { min-height:44px; padding:8px 4px; border:none; border-radius:0; background:transparent; color:${COLOR_MUTED}; font-size:12px; font-weight:500; cursor:pointer; touch-action:manipulation; border-bottom:2px solid transparent; margin-bottom:-1px; line-height:1.3; white-space:normal; word-break:keep-all; }
.xll-vm-subtab.active { color:${XLL_GREEN_DEEP}; border-bottom-color:${XLL_GREEN}; font-weight:700; background:rgba(122,185,41,.06); }
.xll-vm-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.xll-vm-detail-kv { min-width:0; }
.xll-vm-detail-kv.full { grid-column:1 / -1; }
.xll-vm-detail-kv-label { font-size:11px; color:${COLOR_MUTED}; margin-bottom:3px; line-height:1.3; }
.xll-vm-detail-kv-val { font-size:13px; color:${COLOR_TEXT}; font-weight:500; line-height:1.45; word-break:break-word; overflow-wrap:anywhere; }
.xll-vm-cert-nav { display:flex; gap:6px; padding:10px 0 12px; overflow-x:auto; scrollbar-width:none; margin:0 -2px; }
.xll-vm-cert-nav::-webkit-scrollbar { display:none; }
.xll-vm-cert-nav-btn { flex-shrink:0; min-height:32px; padding:0 12px; border:1px solid ${COLOR_LINE}; border-radius:999px; background:${COLOR_BG}; font-size:12px; color:${COLOR_TEXT_SEC}; cursor:pointer; }
.xll-vm-cert-nav-btn.active { border-color:${XLL_GREEN}; color:${XLL_GREEN_DEEP}; background:${XLL_GREEN_SOFT}; font-weight:600; }
.xll-vm-photo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
.xll-vm-photo { aspect-ratio:3/2; border-radius:10px; overflow:hidden; background:${COLOR_PAGE}; border:1px solid ${COLOR_LINE}; }
.xll-vm-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.xll-vm-photo-empty { aspect-ratio:3/2; border-radius:10px; background:${COLOR_PAGE}; border:1px dashed ${COLOR_LINE}; display:flex; align-items:center; justify-content:center; font-size:12px; color:${COLOR_MUTED}; }
.xll-vm-ins-card { background:${COLOR_PAGE}; border-radius:12px; padding:12px 14px; margin-bottom:10px; border:1px solid rgba(0,0,0,.04); }
.xll-vm-ins-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.xll-vm-ins-type { font-size:14px; font-weight:700; color:${COLOR_TEXT}; }
.xll-vm-ins-status { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:${XLL_GREEN_SOFT}; color:${XLL_GREEN_DEEP}; }
.xll-vm-ins-status.warn { background:rgba(255,125,0,.12); color:${COLOR_WARN}; }
.xll-vm-ins-status.empty { background:${COLOR_PAGE}; color:${COLOR_MUTED}; }
.xll-vm-ins-row { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:${COLOR_TEXT_SEC}; margin-bottom:4px; }
.xll-vm-ins-pdf { margin-top:10px; min-height:36px; padding:0 12px; border-radius:8px; border:1px solid rgba(122,185,41,.35); background:${XLL_GREEN_SOFT}; color:${XLL_GREEN}; font-size:12px; font-weight:600; cursor:pointer; width:100%; touch-action:manipulation; }
.xll-vm-event-list { position:relative; padding-left:18px; }
.xll-vm-event-item { position:relative; padding:0 0 16px 14px; }
.xll-vm-event-item:last-child { padding-bottom:0; }
.xll-vm-event-item::before { content:''; position:absolute; left:-18px; top:6px; bottom:-6px; width:2px; background:${COLOR_LINE}; }
.xll-vm-event-item:last-child::before { bottom:auto; height:6px; }
.xll-vm-event-dot { position:absolute; left:-23px; top:4px; width:10px; height:10px; border-radius:50%; background:${XLL_GREEN}; border:2px solid ${COLOR_BG}; box-shadow:0 0 0 1px ${XLL_GREEN}; }
.xll-vm-event-type { font-size:13px; font-weight:700; color:${COLOR_TEXT}; margin-bottom:4px; }
.xll-vm-event-meta { font-size:12px; color:${COLOR_MUTED}; line-height:1.55; }
.xll-vm-event-summary { font-size:13px; color:${COLOR_TEXT_SEC}; margin-top:4px; line-height:1.5; }
.xll-vm-ins-pdf { margin-top:10px; min-height:36px; padding:0 12px; border-radius:8px; border:1px solid rgba(122,185,41,.35); background:${XLL_GREEN_SOFT}; color:${XLL_GREEN}; font-size:12px; font-weight:600; cursor:pointer; width:100%; touch-action:manipulation; }
.xll-mod-form-row--stack { flex-direction:column; align-items:stretch; gap:6px; }
.xll-mod-form-row--stack .xll-mod-form-label { font-size:12px; line-height:1.4; }
.xll-mod-form-row--stack .xll-mod-form-value { text-align:left; line-height:1.55; word-break:break-word; overflow-wrap:anywhere; }
.xll-vm-meta-cell { min-width:0; }
.xll-vm-meta-cell .xll-mod-meta-val { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.xll-vm-card-vin-wrap { flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding-right:8px; }
.xll-vm-card-vin-label { flex-shrink:0; font-size:11px; color:${COLOR_MUTED}; }
.xll-vm-card-vin { flex:1; min-width:0; font-size:11px; color:${COLOR_TEXT_SEC}; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xll-vm-customer-bar { display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; padding:9px 10px; background:${COLOR_PAGE}; border-radius:10px; min-width:0; border:1px solid rgba(0,0,0,.04); }
.xll-vm-customer-bar--detail { margin:10px 0 0; background:${XLL_GREEN_SOFT}; border-color:rgba(122,185,41,.18); }
.xll-vm-customer-bar.is-long { cursor:pointer; touch-action:manipulation; }
.xll-vm-customer-bar.is-long:active { background:rgba(122,185,41,.12); }
.xll-vm-customer-icon { flex-shrink:0; width:24px; height:24px; border-radius:7px; background:${XLL_GREEN_SOFT}; color:${XLL_GREEN_DEEP}; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.xll-vm-customer-bar--detail .xll-vm-customer-icon { background:rgba(255,255,255,.85); }
.xll-vm-customer-body { flex:1; min-width:0; }
.xll-vm-customer-label { display:block; font-size:11px; color:${COLOR_MUTED}; margin-bottom:3px; line-height:1.3; }
.xll-vm-customer-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:13px; color:${COLOR_TEXT}; font-weight:600; line-height:1.45; word-break:break-all; }
.xll-vm-customer-bar:not(.is-long) .xll-vm-customer-text { -webkit-line-clamp:1; }
.xll-vm-customer-hint { display:block; margin-top:4px; font-size:11px; color:${XLL_GREEN}; font-weight:500; }
.xll-vm-name-modal-text { font-size:15px; color:${COLOR_TEXT}; line-height:1.6; word-break:break-word; overflow-wrap:anywhere; padding:4px 0; }
.xll-list-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 4px; font-size:12px; color:${COLOR_MUTED}; }
.xll-list-count { font-variant-numeric:tabular-nums; font-weight:600; }
.xll-task-card { position:relative; margin:0 14px 12px; background:${COLOR_BG}; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(15,23,42,.05); border:1px solid rgba(0,0,0,.04); animation:xll-card-in 0.35s ease both; }
.xll-task-card::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--xll-accent, ${XLL_GREEN}); }
.xll-task-badge { position:absolute; top:10px; right:10px; min-width:22px; height:22px; padding:0 6px; border-radius:6px; background:rgba(255,229,143,.95); color:#AD6800; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:1; font-variant-numeric:tabular-nums; }
.xll-task-head { display:flex; align-items:flex-start; justify-content:space-between; padding:14px 14px 10px 16px; gap:10px; }
.xll-task-title-row { display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding-right:24px; }
.xll-task-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--xll-soft, ${XLL_GREEN_SOFT}); color:var(--xll-accent, ${XLL_GREEN}); }
.xll-task-title-wrap { min-width:0; flex:1; }
.xll-task-type-tag { display:inline-flex; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-bottom:4px; color:var(--xll-accent, ${XLL_GREEN}); background:var(--xll-soft, ${XLL_GREEN_SOFT}); }
.xll-task-title { font-size:15px; font-weight:700; color:${COLOR_TEXT}; line-height:1.35; }
.xll-task-action { flex-shrink:0; min-height:44px; padding:0 12px; font-size:14px; font-weight:600; color:${XLL_GREEN}; border:1px solid rgba(122,185,41,.35); background:${XLL_GREEN_SOFT}; border-radius:10px; cursor:pointer; touch-action:manipulation; transition:transform 0.15s ease, background 0.15s ease; white-space:nowrap; }
.xll-task-action:active { transform:scale(0.97); background:rgba(122,185,41,.22); }
.xll-task-action:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-task-body { padding:0 16px 14px; border-top:1px solid ${COLOR_LINE}; margin-top:0; padding-top:12px; }
.xll-kv { display:flex; gap:8px; font-size:13px; line-height:1.55; margin-bottom:6px; }
.xll-kv:last-child { margin-bottom:0; }
.xll-kv-label { color:${COLOR_MUTED}; flex-shrink:0; min-width:72px; }
.xll-kv-value { color:${COLOR_TEXT_SEC}; flex:1; word-break:break-all; }
.xll-kv-value.warn { color:${COLOR_DANGER}; font-weight:600; }
.xll-kv-value.warn::after { content:' '; }
.xll-warn-tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:${COLOR_DANGER}; background:rgba(245,63,63,.1); padding:1px 6px; border-radius:4px; margin-left:4px; vertical-align:middle; }
.xll-biz-section { margin:0 14px 14px; background:${COLOR_BG}; border-radius:14px; padding:14px 12px 6px; box-shadow:0 2px 8px rgba(15,23,42,.04); border:1px solid rgba(0,0,0,.03); }
.xll-biz-section-title { font-size:13px; font-weight:600; color:${COLOR_MUTED}; margin-bottom:12px; padding-left:4px; letter-spacing:0.02em; }
.xll-biz-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 8px; }
.xll-biz-item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 2px 10px; border:none; background:transparent; cursor:pointer; touch-action:manipulation; position:relative; border-radius:12px; transition:background 0.15s ease; min-height:88px; }
.xll-biz-item:active { background:${COLOR_PAGE}; }
.xll-biz-item:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-biz-icon { width:48px; height:48px; border-radius:12px; background:${COLOR_PAGE}; border:1px solid ${COLOR_LINE}; display:flex; align-items:center; justify-content:center; color:${XLL_GREEN_DEEP}; transition:transform 0.15s ease, box-shadow 0.15s ease; }
.xll-biz-item:active .xll-biz-icon { transform:scale(0.95); }
.xll-biz-label { font-size:12px; color:${COLOR_TEXT}; text-align:center; line-height:1.35; font-weight:500; }
.xll-biz-badge { position:absolute; top:2px; right:calc(50% - 32px); min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:${XLL_GREEN}; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; box-shadow:0 1px 4px rgba(122,185,41,.4); }
.xll-map-tabs { display:flex; background:${COLOR_BG}; border-bottom:1px solid ${COLOR_LINE}; }
.xll-map-tab { flex:1; min-height:44px; border:none; background:transparent; font-size:15px; color:${COLOR_TEXT_SEC}; cursor:pointer; position:relative; font-weight:500; touch-action:manipulation; transition:color 0.2s ease; }
.xll-map-tab.active { color:${XLL_GREEN}; font-weight:700; }
.xll-map-tab.active::after { content:''; position:absolute; left:20%; right:20%; bottom:0; height:3px; border-radius:3px 3px 0 0; background:${XLL_GREEN}; }
.xll-map-tab:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:-2px; }
.xll-map-toolbar { display:flex; gap:10px; padding:10px 14px; background:${COLOR_BG}; align-items:center; border-bottom:1px solid ${COLOR_LINE}; }
.xll-map-search-wrap { flex:1; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; background:${COLOR_PAGE}; border-radius:12px; border:1px solid transparent; transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.xll-map-search-wrap:focus-within { border-color:rgba(122,185,41,.45); box-shadow:0 0 0 3px ${XLL_GREEN_SOFT}; background:${COLOR_BG}; }
.xll-map-search-wrap svg { flex-shrink:0; color:${COLOR_MUTED}; }
.xll-map-search { flex:1; border:none; background:transparent; font-size:15px; color:${COLOR_TEXT}; outline:none; min-width:0; }
.xll-map-search::placeholder { color:${COLOR_MUTED}; }
.xll-map-filter { width:44px; height:44px; border:1px solid ${COLOR_LINE}; border-radius:12px; background:${COLOR_BG}; cursor:pointer; display:flex; align-items:center; justify-content:center; color:${COLOR_MUTED}; flex-shrink:0; touch-action:manipulation; transition:background 0.15s ease, border-color 0.15s ease; }
.xll-map-filter:active { background:${COLOR_PAGE}; border-color:${XLL_GREEN}; color:${XLL_GREEN}; }
.xll-map-filter:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-map-page { display:flex; flex-direction:column; min-height:min-content; }
.xll-map-area { margin:12px 14px 14px; height:min(420px, calc(100dvh - 320px)); min-height:240px; border-radius:14px; overflow:hidden; position:relative; background:linear-gradient(180deg,#e8f4e8 0%,#d4e8d4 50%,#c5dcc5 100%); border:1px solid ${COLOR_LINE}; box-shadow:inset 0 1px 4px rgba(0,0,0,.04); flex-shrink:0; }
.xll-map-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:${COLOR_MUTED}; font-size:13px; gap:8px; pointer-events:none; text-align:center; padding:0 24px; line-height:1.5; }
.xll-map-full { position:absolute; top:12px; left:12px; min-width:52px; min-height:52px; padding:8px 6px; border-radius:12px; background:rgba(255,255,255,.95); border:1px solid ${COLOR_LINE}; box-shadow:0 2px 8px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; font-weight:600; color:${XLL_GREEN}; cursor:pointer; z-index:2; touch-action:manipulation; transition:transform 0.15s ease; }
.xll-map-full:active { transform:scale(0.96); }
.xll-map-full:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-map-marker { position:absolute; width:36px; height:36px; border-radius:50%; background:${COLOR_BG}; border:2px solid ${XLL_GREEN}; box-shadow:0 2px 8px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; color:${XLL_GREEN}; z-index:1; }
.xll-map-marker--station { border-color:#2563EB; color:#2563EB; }
.xll-map-brand { position:absolute; left:8px; bottom:8px; font-size:10px; color:${COLOR_MUTED}; background:rgba(255,255,255,.85); padding:3px 8px; border-radius:6px; border:1px solid ${COLOR_LINE}; }
.xll-mine-hero { margin:12px 14px 0; padding:20px 16px; background:linear-gradient(135deg, ${XLL_GREEN} 0%, ${XLL_GREEN_DEEP} 100%); border-radius:14px; display:flex; align-items:center; gap:14px; box-shadow:0 4px 16px rgba(122,185,41,.3); }
.xll-mine-avatar { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:800; flex-shrink:0; }
.xll-mine-hero-info { min-width:0; }
.xll-mine-hero-name { font-size:18px; font-weight:700; color:#fff; margin-bottom:4px; }
.xll-mine-hero-role { font-size:13px; color:rgba(255,255,255,.85); }
.xll-mine-card { margin:12px 14px; background:${COLOR_BG}; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(15,23,42,.04); border:1px solid rgba(0,0,0,.03); }
.xll-mine-row { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid ${COLOR_LINE}; font-size:15px; min-height:52px; }
.xll-mine-row:last-child { border-bottom:none; }
.xll-mine-label { color:${COLOR_MUTED}; font-size:14px; }
.xll-mine-value { color:${COLOR_TEXT}; font-weight:500; font-size:15px; text-align:right; max-width:60%; word-break:break-all; }
.xll-logout { display:block; width:calc(100% - 28px); margin:20px 14px 8px; min-height:48px; border:none; border-radius:999px; background:${COLOR_BG}; color:${COLOR_DANGER}; font-size:16px; font-weight:600; cursor:pointer; border:1px solid rgba(245,63,63,.25); touch-action:manipulation; transition:background 0.15s ease; }
.xll-logout:active { background:rgba(245,63,63,.06); }
.xll-logout:focus-visible { outline:2px solid ${COLOR_DANGER}; outline-offset:2px; }
.xll-tabbar { flex-shrink:0; display:flex; height:52px; padding-bottom:env(safe-area-inset-bottom,0); background:${COLOR_BG}; border-top:1px solid ${COLOR_LINE}; z-index:30; }
.xll-tabbar-btn { flex:1; border:none; background:transparent; font-size:11px; color:${COLOR_MUTED}; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding-top:4px; touch-action:manipulation; transition:color 0.2s ease; min-height:52px; }
.xll-tabbar-btn.active { color:${XLL_GREEN}; font-weight:700; }
.xll-tabbar-btn:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:-2px; }
.xll-tabbar-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; }
.xll-login-wrap { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; }
.xll-login-logo { width:88px; height:88px; border-radius:22px; background:linear-gradient(135deg,${XLL_GREEN} 0%,${XLL_GREEN_DEEP} 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:800; margin-bottom:16px; box-shadow:0 12px 28px rgba(122,185,41,.35); }
.xll-login-name { font-size:24px; font-weight:800; color:${COLOR_TEXT}; margin-bottom:8px; letter-spacing:-0.02em; }
.xll-login-desc { font-size:14px; color:${COLOR_MUTED}; margin-bottom:40px; text-align:center; line-height:1.6; }
.xll-login-btn { width:100%; max-width:280px; min-height:48px; border:none; border-radius:999px; background:${XLL_GREEN}; color:#fff; font-size:16px; font-weight:700; cursor:pointer; touch-action:manipulation; box-shadow:0 4px 14px rgba(122,185,41,.35); transition:transform 0.15s ease, opacity 0.15s ease; }
.xll-login-btn:active:not(:disabled) { transform:scale(0.98); }
.xll-login-btn:disabled { opacity:0.65; cursor:not-allowed; }
.xll-login-btn:focus-visible { outline:2px solid ${XLL_GREEN_DEEP}; outline-offset:3px; }
.xll-sub-page { padding:14px; }
.xll-sub-hero { background:linear-gradient(135deg, var(--xll-accent, ${XLL_GREEN}) 0%, ${XLL_GREEN_DEEP} 100%); border-radius:14px; padding:16px; margin-bottom:12px; color:#fff; box-shadow:0 4px 16px rgba(122,185,41,.25); }
.xll-sub-hero-tag { display:inline-flex; font-size:11px; font-weight:600; padding:2px 10px; border-radius:999px; background:rgba(255,255,255,.22); margin-bottom:8px; }
.xll-sub-hero-title { font-size:17px; font-weight:700; line-height:1.4; }
.xll-sub-card { background:${COLOR_BG}; border-radius:14px; padding:16px; margin-bottom:12px; box-shadow:0 2px 8px rgba(15,23,42,.04); border:1px solid rgba(0,0,0,.03); }
.xll-sub-section-title { font-size:13px; font-weight:600; color:${COLOR_MUTED}; margin-bottom:12px; }
.xll-sub-foot { display:flex; gap:10px; margin-top:16px; }
.xll-sub-btn { flex:1; min-height:48px; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; border:none; touch-action:manipulation; transition:transform 0.15s ease; }
.xll-sub-btn:active { transform:scale(0.98); }
.xll-sub-btn:focus-visible { outline:2px solid ${XLL_GREEN}; outline-offset:2px; }
.xll-sub-btn-primary { background:${XLL_GREEN}; color:#fff; box-shadow:0 4px 12px rgba(122,185,41,.3); }
.xll-sub-btn-ghost { background:${COLOR_PAGE}; color:${COLOR_TEXT_SEC}; border:1px solid ${COLOR_LINE}; }
.xll-prd-doc { font-size:13px; color:${COLOR_TEXT_SEC}; line-height:1.65; }
.xll-prd-h2 { font-size:15px; font-weight:700; color:${COLOR_TEXT}; margin:16px 0 8px; }
.xll-prd-h2:first-child { margin-top:0; }
.xll-prd-h3 { font-size:14px; font-weight:600; color:${COLOR_TEXT}; margin:12px 0 6px; }
.xll-prd-p { margin:0 0 8px; }
.xll-prd-ul { margin:0 0 8px; padding-left:18px; }
.xll-prd-li { margin-bottom:4px; }
.xll-prd-meta { font-size:12px; color:${COLOR_MUTED}; margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed ${COLOR_LINE}; }
.xll-prd-tag { display:inline-block; font-size:11px; font-weight:600; color:${XLL_GREEN_DEEP}; background:${XLL_GREEN_SOFT}; padding:2px 8px; border-radius:999px; margin-bottom:8px; }
.xll-prd-highlight { background:${XLL_GREEN_SOFT}; border-left:3px solid ${XLL_GREEN}; padding:10px 12px; border-radius:0 8px 8px 0; margin:8px 0; font-size:13px; color:${COLOR_TEXT_SEC}; }
@keyframes xll-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.tc-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:88px; }
.tc-hero { margin:12px 14px 0; padding:18px 16px 16px; border-radius:16px; background:linear-gradient(135deg,#F97316 0%,#EA580C 100%); color:#fff; box-shadow:0 10px 28px rgba(249,115,22,.35); }
.tc-hero-label { font-size:13px; opacity:.92; margin-bottom:6px; }
.tc-hero-amount { font-size:36px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tc-hero-sub { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tc-hero-compare { font-size:12px; opacity:.9; line-height:1.45; }
.tc-hero-detail-btn { flex-shrink:0; min-height:32px; padding:0 12px; border:1px solid rgba(255,255,255,.45); border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:600; cursor:pointer; }
.tc-hero-meta { display:flex; gap:16px; margin-top:10px; font-size:12px; opacity:.88; }
.tc-section { margin:12px 14px 0; background:${COLOR_BG}; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(15,23,42,.04); border:1px solid rgba(0,0,0,.04); }
.tc-section-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid ${COLOR_LINE}; }
.tc-section-title { font-size:15px; font-weight:700; color:${COLOR_TEXT}; }
.tc-section-badge { font-size:11px; font-weight:600; color:#F97316; background:rgba(249,115,22,.12); padding:2px 8px; border-radius:999px; }
.tc-kv-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; padding:12px 14px 14px; }
.tc-kv-item { min-width:0; }
.tc-kv-label { font-size:11px; color:${COLOR_MUTED}; margin-bottom:3px; }
.tc-kv-value { font-size:13px; color:${COLOR_TEXT}; font-weight:500; line-height:1.4; word-break:break-all; }
.tc-kv-value--full { grid-column:1 / -1; }
.tc-vehicle-card { margin:0 14px 10px; padding:12px 14px; background:${COLOR_PAGE}; border-radius:12px; border:1px solid ${COLOR_LINE}; }
.tc-vehicle-card:last-child { margin-bottom:14px; }
.tc-vehicle-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.tc-vehicle-plate { font-size:15px; font-weight:700; color:${COLOR_TEXT}; }
.tc-vehicle-model { font-size:12px; color:${COLOR_MUTED}; margin-top:2px; }
.tc-vehicle-idx { font-size:11px; font-weight:700; color:#F97316; background:rgba(249,115,22,.12); padding:2px 8px; border-radius:999px; flex-shrink:0; }
.tc-vehicle-amount-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:10px 12px; background:${COLOR_BG}; border-radius:10px; margin-bottom:8px; }
.tc-vehicle-amount-label { font-size:12px; color:${COLOR_MUTED}; }
.tc-vehicle-amount-val { font-size:18px; font-weight:800; color:#F97316; font-variant-numeric:tabular-nums; }
.tc-vehicle-kv { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; }
.tc-vehicle-kv-item { font-size:12px; color:${COLOR_TEXT_SEC}; }
.tc-vehicle-kv-item span { color:${COLOR_MUTED}; }
.tc-service-toggle { width:100%; margin-top:8px; min-height:32px; border:none; background:transparent; color:${XLL_GREEN_DEEP}; font-size:12px; font-weight:600; cursor:pointer; text-align:left; padding:0; }
.tc-service-list { margin-top:8px; padding-top:8px; border-top:1px dashed ${COLOR_LINE}; }
.tc-service-row { display:grid; grid-template-columns:1fr auto; gap:4px 8px; font-size:12px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.04); }
.tc-service-name { color:${COLOR_TEXT}; font-weight:500; }
.tc-service-amt { color:#F97316; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.tc-service-sub { grid-column:1 / -1; color:${COLOR_MUTED}; font-size:11px; }
.tc-timeline { padding:4px 14px 14px; }
.tc-step { display:flex; gap:12px; position:relative; padding-bottom:16px; }
.tc-step:not(:last-child)::before { content:''; position:absolute; left:9px; top:22px; bottom:0; width:2px; background:${COLOR_LINE}; }
.tc-step-dot { width:20px; height:20px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; margin-top:1px; }
.tc-step-dot.done { background:${COLOR_SUCCESS}; color:#fff; }
.tc-step-dot.wait { background:rgba(249,115,22,.12); color:#F97316; border:2px solid #F97316; box-sizing:border-box; }
.tc-step-title { font-size:14px; font-weight:600; color:${COLOR_TEXT}; }
.tc-step-meta { font-size:12px; color:${COLOR_MUTED}; margin-top:4px; line-height:1.5; }
.tc-action-bar { position:absolute; left:0; right:0; bottom:0; z-index:20; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.96); border-top:1px solid ${COLOR_LINE}; backdrop-filter:blur(8px); }
.tc-action-bar--view { justify-content:flex-end; }
.tc-btn { flex:1; min-height:44px; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; border:none; touch-action:manipulation; }
.tc-btn-comment { flex:0 0 auto; min-width:64px; background:${COLOR_BG}; color:${COLOR_TEXT_SEC}; border:1px solid ${COLOR_LINE}; }
.tc-btn-terminate { background:${COLOR_PAGE}; color:${COLOR_WARN}; border:1px solid rgba(255,125,0,.3); }
.tc-btn-reject { background:${COLOR_PAGE}; color:${COLOR_DANGER}; border:1px solid rgba(245,63,63,.25); }
.tc-btn-approve { background:linear-gradient(135deg,${XLL_GREEN} 0%,${XLL_GREEN_DEEP} 100%); color:#fff; box-shadow:0 4px 14px rgba(122,185,41,.3); }
.tc-btn:active { opacity:.92; transform:scale(.98); }
.tc-approval-form { display:flex; flex-direction:column; gap:16px; padding:4px 0 8px; }
.tc-form-field { display:flex; flex-direction:column; gap:8px; }
.tc-form-label { font-size:14px; color:${COLOR_TEXT}; font-weight:500; }
.tc-form-label-required::before { content:'*'; color:${COLOR_DANGER}; margin-right:4px; }
.tc-notify-group { display:flex; flex-wrap:wrap; gap:16px; }
.tc-notify-item { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:${COLOR_TEXT_SEC}; cursor:pointer; min-height:32px; }
.tc-notify-item input { width:16px; height:16px; accent-color:${XLL_GREEN}; }
.tc-notify-item.disabled { opacity:.55; cursor:not-allowed; }
.tc-upload-btn { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px dashed ${COLOR_LINE}; border-radius:8px; background:${COLOR_PAGE}; color:${COLOR_TEXT_SEC}; font-size:13px; cursor:pointer; }
.tc-upload-hint { font-size:12px; color:${COLOR_MUTED}; line-height:1.55; margin-top:4px; }
.tc-file-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.tc-file-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:${COLOR_PAGE}; border-radius:8px; font-size:13px; color:${COLOR_TEXT}; }
.tc-file-remove { border:none; background:transparent; color:${COLOR_MUTED}; font-size:12px; cursor:pointer; padding:4px; }
.tc-select-person { min-height:44px; padding:0 14px; border:1px solid ${COLOR_LINE}; border-radius:10px; background:${COLOR_BG}; color:${COLOR_MUTED}; font-size:14px; text-align:left; cursor:pointer; width:100%; }
.tc-select-person.has-value { color:${COLOR_TEXT}; }
.tc-cc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tc-cc-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:${XLL_GREEN_SOFT}; color:${XLL_GREEN_DEEP}; font-size:12px; font-weight:600; }
.tc-cc-chip button { border:none; background:transparent; color:inherit; cursor:pointer; padding:0 2px; font-size:14px; line-height:1; }
.tc-textarea { width:100%; min-height:96px; padding:10px 12px; border:1px solid ${COLOR_LINE}; border-radius:10px; font-size:14px; color:${COLOR_TEXT}; resize:vertical; box-sizing:border-box; font-family:inherit; outline:none; }
.tc-textarea:focus { border-color:rgba(122,185,41,.55); box-shadow:0 0 0 3px rgba(122,185,41,.12); }
.tc-textarea-counter { text-align:right; font-size:12px; color:${COLOR_MUTED}; margin-top:4px; }
.tc-drawer-foot { display:flex; gap:10px; padding-top:12px; margin-top:4px; border-top:1px solid ${COLOR_LINE}; }
.tc-drawer-foot-btn { flex:1; min-height:44px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; border:none; }
.tc-drawer-foot-cancel { background:${COLOR_BG}; color:${COLOR_TEXT_SEC}; border:1px solid ${COLOR_LINE}; }
.tc-drawer-foot-confirm { background:#1677ff; color:#fff; }
.tc-person-list { display:flex; flex-direction:column; gap:8px; }
.tc-person-item { min-height:48px; padding:0 14px; border:1px solid ${COLOR_LINE}; border-radius:10px; background:${COLOR_BG}; font-size:14px; color:${COLOR_TEXT}; text-align:left; cursor:pointer; }
.tc-person-item.selected { border-color:${XLL_GREEN}; background:${XLL_GREEN_SOFT}; color:${XLL_GREEN_DEEP}; font-weight:600; }
.tc-drawer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid ${COLOR_LINE}; font-size:14px; }
.tc-drawer-row-val.highlight { color:#F97316; font-weight:700; }
.tc-drawer-total { margin-top:8px; padding-top:12px; border-top:2px solid ${COLOR_LINE}; display:flex; justify-content:space-between; font-size:15px; font-weight:700; }
.tc-drawer-total span:last-child { color:#F97316; font-size:18px; font-variant-numeric:tabular-nums; }
.tc-hero--return { background:linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%); box-shadow:0 10px 28px rgba(139,92,246,.35); }
.tc-section-badge--purple { color:#8B5CF6; background:rgba(139,92,246,.12); }
.hc-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px 14px 14px; }
.hc-stat-card { padding:12px; background:${COLOR_PAGE}; border-radius:10px; border:1px solid ${COLOR_LINE}; }
.hc-stat-label { font-size:11px; color:${COLOR_MUTED}; margin-bottom:6px; }
.hc-stat-val { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; color:${COLOR_TEXT}; }
.hc-stat-val.warn { color:#F97316; }
.hc-stat-val.success { color:${COLOR_SUCCESS}; }
.hc-stat-val.danger { color:${COLOR_DANGER}; }
.hc-insurance-row { display:flex; gap:8px; margin-top:4px; }
.hc-insurance-item { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:4px; padding:6px 8px; background:rgba(255,255,255,.14); border-radius:8px; font-size:11px; line-height:1.2; }
.hc-insurance-icon { width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; line-height:1; }
.hc-insurance-icon--yes { background:rgba(255,255,255,.32); color:#fff; }
.hc-insurance-icon--no { background:rgba(0,0,0,.18); color:rgba(255,255,255,.55); }
.hc-group-block { padding:0 14px 12px; }
.hc-group-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; cursor:pointer; touch-action:manipulation; }
.hc-group-title { font-size:14px; font-weight:700; color:${COLOR_TEXT}; }
.hc-group-meta { font-size:11px; color:${COLOR_MUTED}; margin-top:2px; }
.hc-fee-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:${COLOR_PAGE}; border-radius:8px; margin-bottom:6px; font-size:13px; }
.hc-fee-row-name { color:${COLOR_TEXT_SEC}; flex:1; min-width:0; }
.hc-fee-row-amt { font-weight:700; color:#8B5CF6; font-variant-numeric:tabular-nums; flex-shrink:0; }
.hc-settle-body { padding:0 14px 4px; }
.hc-settle-total { margin:0 14px 12px; padding:12px 14px; background:rgba(139,92,246,.08); border-radius:10px; border:1px solid rgba(139,92,246,.14); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hc-settle-total-label { font-size:13px; font-weight:600; color:${COLOR_TEXT_SEC}; }
.hc-settle-total-val { font-size:18px; font-weight:800; color:#8B5CF6; font-variant-numeric:tabular-nums; flex-shrink:0; }
.hc-fee-table { border:1px solid ${COLOR_LINE}; border-radius:10px; overflow:hidden; margin-bottom:8px; }
.hc-fee-table-head, .hc-fee-table-row { display:grid; grid-template-columns:44px minmax(0,1fr) 96px; align-items:center; gap:0; }
.hc-fee-table-head { background:${COLOR_PAGE}; border-bottom:1px solid ${COLOR_LINE}; font-size:11px; font-weight:600; color:${COLOR_MUTED}; }
.hc-fee-table-row { border-bottom:1px solid ${COLOR_LINE}; font-size:12px; color:${COLOR_TEXT}; background:${COLOR_BG}; }
.hc-fee-table-row:last-child { border-bottom:none; }
.hc-fee-table-row--custom { background:rgba(139,92,246,.03); }
.hc-fee-table-col { padding:10px 8px; min-width:0; }
.hc-fee-table-col--seq { text-align:center; color:${COLOR_MUTED}; }
.hc-fee-table-col--item { display:flex; align-items:center; gap:6px; flex-wrap:wrap; line-height:1.4; }
.hc-fee-table-col--amt { text-align:right; font-weight:700; color:#8B5CF6; font-variant-numeric:tabular-nums; padding-right:10px; }
.hc-fee-table-tag { font-size:10px; font-weight:600; color:#8B5CF6; background:rgba(139,92,246,.1); padding:1px 6px; border-radius:999px; flex-shrink:0; }
.hc-safety-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:4px; }
.hc-safety-stat-item { padding:12px 8px; background:${COLOR_PAGE}; border-radius:10px; border:1px solid ${COLOR_LINE}; text-align:center; }
.hc-safety-stat-label { font-size:11px; color:${COLOR_MUTED}; margin-bottom:6px; }
.hc-safety-stat-val { font-size:16px; font-weight:800; color:${COLOR_TEXT}; font-variant-numeric:tabular-nums; }
.hc-safety-stat-val.warn { color:#F97316; }
.hc-sub-block { margin-top:8px; padding-top:8px; border-top:1px dashed ${COLOR_LINE}; }
.hc-violation-card { margin:0 0 8px; padding:10px 12px; background:${COLOR_PAGE}; border-radius:10px; border:1px solid ${COLOR_LINE}; font-size:12px; color:${COLOR_TEXT_SEC}; line-height:1.55; }
.tc-hero--bill { background:linear-gradient(135deg,#0EA5E9 0%,#0284C7 100%); box-shadow:0 10px 28px rgba(14,165,233,.35); }
.tc-hero-period { margin-top:10px; font-size:12px; line-height:1.5; opacity:.92; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tc-hero-period-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.22); font-size:11px; font-weight:700; flex-shrink:0; }
.tc-hero-foot { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.22); font-size:12px; line-height:1.55; opacity:.9; }
.tc-hero-foot-row { margin-bottom:4px; }
.tc-hero-foot-row:last-child { margin-bottom:0; }
.tc-hero-foot-label { opacity:.85; margin-right:4px; }
.tc-hero-foot--compact { margin-top:6px; padding-top:0; border-top:none; }
.tc-section-badge--blue { color:#0EA5E9; background:rgba(14,165,233,.12); }
.tc-vehicle-idx--blue { color:#0EA5E9; background:rgba(14,165,233,.12); }
.tc-vehicle-amount-val--blue { color:#0EA5E9; }
.tc-service-amt--blue { color:#0EA5E9; }
.tc-step-dot.wait--blue { background:rgba(14,165,233,.12); color:#0EA5E9; border:2px solid #0EA5E9; box-sizing:border-box; }
.tc-drawer-row-val.highlight--blue { color:#0EA5E9; font-weight:700; }
.tc-drawer-total--blue span:last-child { color:#0EA5E9; }
.tc-drawer-row-val.highlight--purple { color:#8B5CF6; font-weight:700; }
.tc-drawer-total--purple span:last-child { color:#8B5CF6; }
.tc-hero--transfer { background:linear-gradient(135deg,#10B981 0%,#059669 100%); box-shadow:0 10px 28px rgba(16,185,129,.35); }
.tc-hero--replace { background:linear-gradient(135deg,#F43F5E 0%,#E11D48 100%); box-shadow:0 10px 28px rgba(244,63,94,.35); }
.tc-hero--delivery { background:linear-gradient(135deg,${XLL_GREEN} 0%,${XLL_GREEN_DEEP} 100%); box-shadow:0 10px 28px rgba(122,185,41,.35); }
.tc-section-badge--rose { color:#F43F5E; background:rgba(244,63,94,.12); }
.tc-step-dot.wait--rose { background:rgba(244,63,94,.12); color:#F43F5E; border:2px solid #F43F5E; box-sizing:border-box; }
.tc-vehicle-idx--rose { color:#F43F5E; background:rgba(244,63,94,.12); }
.vr-replace-swap { display:flex; align-items:stretch; gap:8px; margin:12px 14px 8px; }
.vr-replace-side { flex:1; min-width:0; padding:10px 10px 8px; border-radius:10px; }
.vr-replace-side--old { background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.28); }
.vr-replace-side--new { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.22); }
.vr-replace-side-tag { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; margin-bottom:8px; letter-spacing:.02em; }
.vr-replace-side--old .vr-replace-side-tag { color:#B45309; background:rgba(251,191,36,.22); }
.vr-replace-side--new .vr-replace-side-tag { color:#047857; background:rgba(16,185,129,.18); }
.vr-replace-side .tc-vehicle-plate { font-size:14px; }
.vr-replace-side .tc-vehicle-model { margin-top:4px; }
.vr-replace-mid { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; }
.vr-replace-mid-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; font-size:13px; color:#F43F5E; font-weight:700; background:rgba(244,63,94,.1); }
.vr-replace-reason.tc-kv-grid { padding:0 14px 14px; gap:8px 14px; }
.tc-hero-route { margin-top:10px; font-size:13px; line-height:1.5; opacity:.95; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tc-hero-route-arrow { opacity:.75; font-size:12px; }
.tc-section-badge--green { color:#059669; background:rgba(16,185,129,.12); }
.tc-vehicle-idx--green { color:#059669; background:rgba(16,185,129,.12); }
.tc-step-dot.wait--green { background:rgba(16,185,129,.12); color:#059669; border:2px solid #059669; box-sizing:border-box; }
.zl-proof-list { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.zl-proof-link { border:none; background:transparent; padding:0; font-size:12px; color:#0EA5E9; font-weight:600; text-align:left; cursor:pointer; text-decoration:underline; }
.tc-mini-sheet { position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; justify-content:flex-end; }
.tc-mini-sheet-mask { position:absolute; inset:0; background:rgba(0,0,0,.45); border:none; padding:0; cursor:pointer; }
.tc-mini-sheet-panel { position:relative; z-index:1; background:${COLOR_BG}; border-radius:16px 16px 0 0; max-height:min(72vh,520px); display:flex; flex-direction:column; box-shadow:0 -8px 28px rgba(15,23,42,.14); animation:tc-sheet-up .28s ease; }
.tc-mini-sheet-handle { width:36px; height:4px; background:rgba(0,0,0,.12); border-radius:999px; margin:10px auto 0; flex-shrink:0; }
.tc-mini-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px 12px; border-bottom:1px solid ${COLOR_LINE}; flex-shrink:0; }
.tc-mini-sheet-title { font-size:16px; font-weight:700; color:${COLOR_TEXT}; }
.tc-mini-sheet-close { width:32px; height:32px; border:none; background:${COLOR_PAGE}; border-radius:999px; font-size:20px; line-height:1; color:${COLOR_MUTED}; cursor:pointer; flex-shrink:0; }
.tc-mini-sheet-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 20px calc(16px + env(safe-area-inset-bottom,0px)); }
.tc-mini-sheet-foot { flex-shrink:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); border-top:1px solid ${COLOR_LINE}; }
.tc-mini-sheet-ok { width:100%; min-height:44px; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; background:${XLL_GREEN_DEEP}; color:#fff; touch-action:manipulation; }
.tc-mini-sheet-ok:active { opacity:.88; }
@keyframes tc-sheet-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .tc-mini-sheet-panel { animation:none; }
  .xll-task-card { animation:none; }
  .xll-task-action:active, .xll-biz-item:active .xll-biz-icon, .xll-map-full:active, .xll-sub-btn:active, .xll-login-btn:active { transform:none; }
}
`;

/* ── 审批中心 / 年审（内联模块，单页原型） ── */
const AC_TAB_ITEMS = [
  { key: 'initiated', label: '我发起的', short: '发起' },
  { key: 'todo', label: '我的待办', short: '待办' },
  { key: 'done', label: '我的已办', short: '已办' },
  { key: 'cc', label: '我的抄送', short: '抄送' },
];

const AC_FLOW_THEME = {
  合同审批: { accent: '#2563EB', soft: 'rgba(37, 99, 235, 0.12)' },
  提车应收款: { accent: '#F97316', soft: 'rgba(249, 115, 22, 0.12)' },
  租赁账单: { accent: '#0EA5E9', soft: 'rgba(14, 165, 233, 0.12)' },
  还车应结款: { accent: '#8B5CF6', soft: 'rgba(139, 92, 246, 0.12)' },
  '氢费对账单（对站）': { accent: '#10B981', soft: 'rgba(16, 185, 129, 0.12)' },
  '氢费对账单（对客）': { accent: '#059669', soft: 'rgba(5, 150, 105, 0.12)' },
  车辆调拨: { accent: XLL_GREEN_DEEP, soft: XLL_GREEN_SOFT },
  替换车申请: { accent: '#F43F5E', soft: 'rgba(244, 63, 94, 0.12)' },
  车辆异动: { accent: '#14B8A6', soft: 'rgba(20, 184, 166, 0.12)' },
};

const AC_FLOW_TYPES = [
  '合同审批', '提车应收款', '租赁账单', '还车应结款',
  '氢费对账单（对站）', '氢费对账单（对客）', '车辆调拨', '替换车申请', '车辆异动',
];

const AC_QUICK_FILTERS = ['合同审批', '提车应收款', '租赁账单', '车辆调拨'];

const AC_MOCK_TASKS = [
  { id: 'ap-1', flowType: '合同审批', bizNo: 'HT-ZL-2025-088', summary: '嘉兴氢能示范项目 · 正式合同', initiator: '张明辉', initiateTime: '2026-05-28 09:15', arriveTime: '2026-05-28 14:20', finishTime: '', currentNode: '法务审核', currentAssignee: '王法务', status: '审批中', ccUsers: ['李晓彤'], handledBy: [] },
  { id: 'ap-2', flowType: '提车应收款', bizNo: 'TC-2026-0312', summary: '上海迅杰物流 · 3 台提车收款', customerName: '上海迅杰物流有限公司', projectName: '上海氢能城际物流项目', vehicleCount: 3, actualAmount: '186800.00', initiator: '李晓彤', initiateTime: '2026-05-30 10:00', arriveTime: '2026-05-30 11:30', finishTime: '', currentNode: '财务审核', currentAssignee: '张明辉', status: '审批中', ccUsers: ['张明辉', '陈高伟'], handledBy: [] },
  { id: 'ap-3', flowType: '租赁账单', bizNo: 'ZD-2026-06-001', summary: '2026年6月 · 粤B58888F 等 5 车', customerName: '嘉兴某某物流有限公司', projectName: '嘉兴氢能示范项目', vehicleCount: 5, actualAmount: '142380.00', period: 6, billStartDate: '2026-06-01', billEndDate: '2026-06-30', initiator: '陈高伟', initiateTime: '2026-06-01 08:40', arriveTime: '2026-06-01 09:10', finishTime: '', currentNode: '业管主管', currentAssignee: '张明辉', approvers: ['张明辉', '李晓彤'], status: '审批中', ccUsers: [], handledBy: [] },
  { id: 'ap-4', flowType: '还车应结款', bizNo: 'HC-2026-0520', summary: '沪A03561F 还车结算', plateNo: '沪A03561F', customerName: '上海迅杰物流有限公司', projectName: '上海氢能城际物流项目', pendingSettle: '927.50', depositAmount: '5000.00', refundTotal: '4072.50', payTotal: '0.00', actualRent: '0.00', initiator: '张明辉', initiateTime: '2026-05-20 16:00', arriveTime: '2026-05-21 09:00', finishTime: '2026-05-21 15:30', currentNode: '—', currentAssignee: '', status: '已通过', ccUsers: ['李晓彤'], handledBy: ['张明辉', '财务-赵敏'] },
  { id: 'ap-5', flowType: '氢费对账单（对站）', bizNo: 'H2-ST-202605', summary: '平湖加氢站 · 2026年5月对账', initiator: '能源部-周工', initiateTime: '2026-05-25 11:00', arriveTime: '2026-05-26 08:30', finishTime: '2026-05-26 17:00', currentNode: '—', currentAssignee: '', status: '已通过', ccUsers: ['张明辉'], handledBy: ['张明辉'] },
  { id: 'ap-6', flowType: '氢费对账单（对客）', bizNo: 'H2-CU-202605', summary: '嘉兴某某物流 · 5月氢费账单', initiator: '李晓彤', initiateTime: '2026-05-27 14:20', arriveTime: '2026-05-28 09:00', finishTime: '', currentNode: 'CEO审批', currentAssignee: 'CEO办公室', status: '审批中', ccUsers: ['张明辉', '陈高伟'], handledBy: ['张明辉'] },
  {
    id: 'ap-8', flowType: '车辆调拨', transferStage: 'create', bizNo: 'DB-2026-018',
    summary: '广东省-广州市 → 浙江省-杭州市 · 2 台 · 司机运输',
    transferDate: '2026-06-01 09:30', departRegion: '广东省-广州市', receiveRegion: '浙江省-杭州市',
    reason: '华东业务增量，需将华南车辆调至杭州节点保障运力。',
    vehicleCount: 2,
    transferInfo: {
      method: '司机运输', transportLeader: '李强', transportPhone: '13912345678',
      receivePerson: '赵强（运维一部-驻场）', transportCost: '0.00', contractFiles: [],
    },
    vehicles: [
      { id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111', departParking: '天河智慧停车场', departMileageKm: '5620.00', departHydrogen: '78.50', departElectricKwh: '86.20', h2Unit: '%' },
      { id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222', departParking: '南山科技园停车场', departMileageKm: '4315.80', departHydrogen: '38.20', departElectricKwh: '72.60', h2Unit: 'MPa' },
    ],
    initiator: '王东东', initiateTime: '2026-06-01 08:00', arriveTime: '2026-06-01 08:45', finishTime: '',
    currentNode: '运维主管', currentAssignee: '张明辉', status: '审批中', ccUsers: ['张明辉'], handledBy: [],
  },
  {
    id: 'ap-16', flowType: '车辆调拨', transferStage: 'ops', bizNo: 'TP202603310001',
    summary: '广东省-广州市 → 浙江省-嘉兴市 · 2 台 · 第三方运输',
    transferDate: '2026-03-31 08:00', departRegion: '广东省-广州市', receiveRegion: '浙江省-嘉兴市',
    reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
    vehicleCount: 2,
    transferInfo: {
      method: '第三方运输', transportLeader: '张明', transportPhone: '13800138000',
      receivePerson: '王芳（运维二部-调度）', transportCost: '2800.00',
      contractFiles: [{ name: '华南至华东调拨运输合同.pdf' }, { name: '运输费用确认单.docx' }],
    },
    vehicles: [
      { id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111', departParking: '天河智慧停车场', departMileageKm: '12580.50', departHydrogen: '85.00', departElectricKwh: '92.30', h2Unit: '%' },
      { id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222', departParking: '白云维修基地停车场', departMileageKm: '8920.00', departHydrogen: '42.50', departElectricKwh: '68.00', h2Unit: 'MPa' },
    ],
    initiator: '王东东', initiateTime: '2026-03-31 07:40', arriveTime: '2026-03-31 08:10', finishTime: '',
    currentNode: '运维中心', currentAssignee: '张明辉', status: '审批中', ccUsers: ['陈高伟'], handledBy: ['运维主管-陈高伟'],
  },
  { id: 'ap-9', flowType: '车辆异动', bizNo: 'YD-2026-042', summary: '浙F06900F · 保养至检测站', initiator: '张明辉', initiateTime: '2026-05-18 13:20', arriveTime: '2026-05-18 14:00', finishTime: '2026-05-18 16:10', currentNode: '—', currentAssignee: '', status: '已驳回', ccUsers: ['李晓彤'], handledBy: ['运维主管-刘强'] },
  { id: 'ap-10', flowType: '合同审批', bizNo: 'HT-ZL-2024-066', summary: '上海迅杰物流 · 续签合同', initiator: '张明辉', initiateTime: '2026-04-10 10:00', arriveTime: '2026-04-10 11:00', finishTime: '2026-04-12 09:30', currentNode: '—', currentAssignee: '', status: '已通过', ccUsers: ['李晓彤', '王法务'], handledBy: ['法务-王法务', 'CEO办公室'] },
  { id: 'ap-11', flowType: '租赁账单', bizNo: 'ZD-2026-05-008', summary: '2026年5月 · 批量租赁账单', customerName: '嘉兴某某物流有限公司', projectName: '嘉兴氢能示范项目', vehicleCount: 3, actualAmount: '88600.00', period: 1, billStartDate: '2025-01-01', billEndDate: '2025-01-31', initiator: '陈高伟', initiateTime: '2026-05-05 09:00', arriveTime: '2026-05-05 09:30', finishTime: '2026-05-05 18:00', currentNode: '—', currentAssignee: '', status: '已通过', ccUsers: ['张明辉'], handledBy: ['张明辉'] },
  { id: 'ap-12', flowType: '提车应收款', bizNo: 'TC-2026-0228', summary: '嘉兴某某物流 · 2 台提车', customerName: '嘉兴某某物流有限公司', projectName: '嘉兴氢能示范项目', vehicleCount: 2, actualAmount: '98600.00', initiator: '张明辉', initiateTime: '2026-02-28 15:00', arriveTime: '2026-03-01 09:00', finishTime: '2026-03-01 11:20', currentNode: '—', currentAssignee: '', status: '已通过', ccUsers: ['财务-赵敏'], handledBy: ['财务-赵敏'] },
  { id: 'ap-14', flowType: '还车应结款', bizNo: 'HC-2026-0418', summary: '粤B58888F 还车应结', plateNo: '粤B58888F', customerName: '嘉兴某某物流有限公司', projectName: '嘉兴腾4.5T租赁', pendingSettle: '927.50', depositAmount: '5000.00', refundTotal: '4072.50', payTotal: '0.00', actualRent: '0.00', initiator: '李晓彤', initiateTime: '2026-04-18 09:00', arriveTime: '2026-04-18 09:30', finishTime: '', currentNode: '财务审核', currentAssignee: '张明辉', status: '审批中', ccUsers: ['张明辉'], handledBy: ['业管主管-陈高伟'] },
  {
    id: 'ap-17', flowType: '替换车申请', bizNo: 'TH-2026-0218',
    summary: '嘉兴氢能示范项目 · 2 辆车替换',
    customerName: '嘉兴某某物流有限公司', projectName: '嘉兴氢能示范项目', projectType: '租赁',
    contractCode: 'HT-ZL-2025-001', deliveryRegion: '浙江省-嘉兴市', vehicleCount: 2,
    pairs: [
      {
        id: 'pair_1', replaceType: '永久替换', replaceReason: '车辆原因',
        replaceReasonDesc: '原车故障需维修，临时用替换车保障客户用车。',
        originalPlate: '浙A12345', originalBrand: '东风', originalModel: 'DFH1180',
        replacePlate: '浙A67890', replaceBrand: '福田', replaceModel: 'BJ1180',
      },
      {
        id: 'pair_2', replaceType: '临时替换', replaceReason: '客户原因', replaceFee: '500.00',
        replaceReasonDesc: '',
        originalPlate: '浙A55555', originalBrand: '重汽', originalModel: 'ZZ1160',
        replacePlate: '浙A66666', replaceBrand: '江淮', replaceModel: 'HFC1190',
      },
    ],
    initiator: '王东东', initiateTime: '2026-02-18 09:30', arriveTime: '2026-02-18 10:00', finishTime: '',
    currentNode: '运维主管', currentAssignee: '张明辉', approvers: ['张明辉', '姚守涛'], status: '审批中',
    ccUsers: ['李晓彤'], handledBy: [],
  },
];

const acIsPending = (status) => status === '审批中' || status === '待审批';

const acFilterByTab = (task, tabKey, user) => {
  if (tabKey === 'initiated') return task.initiator === user;
  if (tabKey === 'todo') return task.currentAssignee === user && acIsPending(task.status);
  if (tabKey === 'done') return (task.handledBy || []).includes(user);
  if (tabKey === 'cc') return (task.ccUsers || []).includes(user);
  return false;
};

const acStatusClass = (status) => {
  if (status === '已通过') return 'ok';
  if (status === '已驳回' || status === '已撤回') return 'reject';
  return 'pending';
};

const acTaskStatusLabel = (task) => {
  if (!acIsPending(task.status)) return task.status;
  const list = task.approvers?.length
    ? task.approvers
    : task.currentAssignee
      ? [task.currentAssignee]
      : [];
  if (!list.length) return task.status;
  return `${task.status}：${list.join(',')}`;
};

const acTransferRouteTitle = (task) => {
  if (task.departRegion && task.receiveRegion) {
    return `${task.departRegion}调拨到${task.receiveRegion}`;
  }
  return task.summary || '—';
};

const acTransferVehicleLines = (vehicles = []) => {
  const map = new Map();
  vehicles.forEach((v) => {
    const label = `${v.brand || '—'}/${v.model || '—'}`;
    map.set(label, (map.get(label) || 0) + 1);
  });
  return Array.from(map.entries()).map(([label, count]) => ({ label, count }));
};

const acReturnSettleDisplay = (task) => {
  const depositAmount = task?.depositAmount || '0';
  const pendingSettle = task?.pendingSettle || '0';
  const diff = (parseFloat(depositAmount) || 0) - (parseFloat(pendingSettle) || 0);
  const refundTotal = task?.refundTotal || (diff > 0 ? diff.toFixed(2) : '0.00');
  const payTotal = task?.payTotal || (diff < 0 ? Math.abs(diff).toFixed(2) : '0.00');
  const isRefund = parseFloat(depositAmount) >= parseFloat(pendingSettle);
  return {
    label: isRefund ? '应退还' : '应补缴',
    amount: isRefund ? refundTotal : payTotal,
  };
};

const AR_MOCK_TASKS = [
  { id: 'ar-1', plateNo: '粤B58888F', brand: '福田', model: '奥铃4.5吨冷藏车', operateStatus: '租赁', expireDate: '2026-07-20', daysLeft: 49, tab: 'pending', province: '广东省', city: '深圳市' },
  { id: 'ar-2', plateNo: '沪A03561F', brand: '宇通', model: '49吨牵引车头', operateStatus: '自营', expireDate: '2026-07-31', daysLeft: 60, tab: 'pending', province: '上海市', city: '上海市' },
  { id: 'ar-3', plateNo: '苏E33333', brand: '陕汽', model: '德龙X3000混动牵引车', operateStatus: '库存', expireDate: '2026-05-15', daysLeft: -17, tab: 'pending', province: '江苏省', city: '苏州市' },
  { id: 'ar-7', plateNo: '鲁Q88901', brand: '重汽', model: '豪沃T7H牵引车', operateStatus: '租赁', expireDate: '2026-04-10', daysLeft: -52, tab: 'pending', province: '山东省', city: '临沂市' },
  { id: 'ar-8', plateNo: '闽D55662', brand: '金龙', model: '凯歌纯电动厢货', operateStatus: '自营', expireDate: '2026-04-27', daysLeft: -35, tab: 'pending', province: '福建省', city: '厦门市' },
  { id: 'ar-4', plateNo: '浙A88888', brand: '宇通', model: '氢燃料电池大巴', operateStatus: '库存', expireDate: '2026-08-10', daysLeft: 70, tab: 'pending', province: '浙江省', city: '杭州市' },
  { id: 'ar-6', plateNo: '皖B66221', brand: '江淮', model: '格尔发A5', operateStatus: '库存', expireDate: '2026-06-28', daysLeft: 27, tab: 'pending', province: '安徽省', city: '合肥市' },
  { id: 'ar-h1', plateNo: '苏A88991', brand: '解放', model: 'J6P牵引车', operateStatus: '自营', expireDate: '2026-03-10', daysLeft: 0, tab: 'history', province: '江苏省', city: '南京市', executor: '张明辉', executeTime: '2026-03-08 14:20', newValidUntil: '2027-03-31', station: '南京机动车检测站', cost: '380.00' },
  { id: 'ar-h2', plateNo: '粤A11223', brand: '比亚迪', model: 'T5纯电轻卡', operateStatus: '库存', expireDate: '2026-02-20', daysLeft: 0, tab: 'history', province: '广东省', city: '广州市', executor: '李晓彤', executeTime: '2026-02-18 09:45', newValidUntil: '2027-02-28', station: '广州南沙检测站', cost: '420.00' },
  { id: 'ar-h3', plateNo: '京A55667', brand: '东风', model: '天龙KL', operateStatus: '租赁', expireDate: '2026-01-15', daysLeft: 0, tab: 'history', province: '广东省', city: '东莞市', executor: '王建国', executeTime: '2026-01-12 16:30', newValidUntil: '2027-01-31', station: '东莞厚街检测站', cost: '350.00' },
];

const arSortPending = (tasks) =>
  [...tasks].sort((a, b) => {
    const overdueA = a.daysLeft < 0 ? -a.daysLeft : 0;
    const overdueB = b.daysLeft < 0 ? -b.daysLeft : 0;
    if (overdueB !== overdueA) return overdueB - overdueA;
    return a.daysLeft - b.daysLeft;
  });

const arDaysTag = (task) => {
  if (task.tab === 'history') return null;
  if (task.daysLeft > 0) return { text: `剩余${task.daysLeft}天`, cls: 'warn' };
  return { text: `逾期${Math.abs(task.daysLeft)}天`, cls: 'danger' };
};

/* ── 交车（参照 web端/交车管理.jsx + Axhub 交车原型） ── */
const DV_OPERATOR_REGIONS = ['浙江省-嘉兴市'];
const DV_RESERVE_PLATES = [
  { plateNo: '浙F80088', parkingLot: '嘉兴港区氢能停车场', brand: '苏龙', model: '海格牌18吨双飞翼货车', vin: 'LKLG7C4E4NA774701' },
  { plateNo: '浙F88601', parkingLot: '平湖指定停车场', brand: '现代', model: '帕力安牌4.5吨冷链车', vin: 'LNBSCPKB8RR123401' },
  { plateNo: '浙F88602', parkingLot: '平湖指定停车场', brand: '现代', model: '帕力安牌4.5吨冷链车', vin: 'LNBSCPKB8RR123402' },
];

const DV_FORM_STEPS = [
  { key: 'info', label: '交车信息' },
  { key: 'equip', label: '车辆信息' },
  { key: 'metrics', label: '交车数据' },
  { key: 'photos', label: '交车照片' },
  { key: 'confirm', label: '确认提交' },
];

const DV_PHOTO_SECTIONS = [
  { key: 'body', label: '车身照片' },
  { key: 'chassis', label: '底盘照片' },
  { key: 'tire', label: '轮胎照片' },
  { key: 'defect', label: '瑕疵照片' },
  { key: 'other', label: '其他照片' },
];

const DV_MOCK_ORDERS = [
  {
    id: 'o1', expectedDate: '2025-02-28 至 2025-03-05', contractCode: 'LNZLHT 20260104001', projectName: '桐乡韵达租赁4.5T*10', customerName: '桐乡市丰韵快递有限责任公司', businessDept: '业务二部', businessOwner: '刘念念', taskSource: '替换车', bizType: '租赁', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '平湖指定停车场', createTime: '2026-06-04 11:28', createBy: '赵小峰',
    vehicleList: [
      { vehicleKey: 1, seq: 1, vehicleType: '4.5吨冷链车', brand: '现代', model: '帕力安牌4.5吨冷链车', vin: 'LNBSCPKB8RR123401', replaceOldPlate: '浙A88601F', plateNo: '', deliveryTime: '', deliveryPerson: '', deliveryStatus: '未开始', deliveryMileage: null, deliveryH2: null, deliveryH2Unit: '%', deliveryElec: null, hasAd: '', hasTailgate: '', spareTire: '', driverTraining: '' },
      { vehicleKey: 2, seq: 2, vehicleType: '4.5吨冷链车', brand: '现代', model: '帕力安牌4.5吨冷链车', vin: 'LNBSCPKB8RR123402', replaceOldPlate: '浙A88602F', plateNo: '浙F88601', deliveryTime: '2026-06-03 14:20', deliveryPerson: '张明辉', deliveryStatus: '待客户签章', deliveryMileage: 12500, deliveryH2: 18, deliveryH2Unit: '%', deliveryElec: 76, hasAd: '无', hasTailgate: '有', spareTire: '有', driverTraining: '已完成' },
    ],
  },
  {
    id: 'o4', expectedDate: '2024-11-15', contractCode: 'LNZLHT2024111401', projectName: '聚德11月新增苏龙18T*2', customerName: '沈阳聚德物流有限公司', businessDept: '业务三部', businessOwner: '金可鹏', taskSource: '交车任务', bizType: '租赁', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '嘉兴港区氢能停车场', createTime: '2024-11-15 15:05', createBy: '何苗苗',
    vehicleList: [
      { vehicleKey: 1, seq: 1, vehicleType: '18吨双飞翼货车', brand: '苏龙', model: '海格牌18吨双飞翼货车', vin: 'LKLG7C4E4NA774701', plateNo: '浙F80088', deliveryTime: '2026-06-02 16:00', deliveryPerson: '魏山', deliveryStatus: '待客户签章', deliveryMileage: 46200, deliveryH2: 21, deliveryH2Unit: '%', deliveryElec: 80, hasAd: '无', hasTailgate: '有', spareTire: '有', driverTraining: '已完成' },
      { vehicleKey: 2, seq: 2, vehicleType: '18吨双飞翼货车', brand: '苏龙', model: '海格牌18吨双飞翼货车', vin: 'LKLG7C4E4NA774702', plateNo: '沪A03802F', deliveryTime: '2025-11-20 09:30', deliveryPerson: '何苗苗', deliveryStatus: '已保存', deliveryMileage: null, deliveryH2: null, deliveryH2Unit: '%', deliveryElec: null, hasAd: '无', hasTailgate: '有', spareTire: '有', driverTraining: '已完成' },
    ],
  },
  {
    id: 'o5', expectedDate: '2025-02-15', contractCode: 'HT-ZL-2024-001', projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', businessDept: '业务一部', businessOwner: '张经理', taskSource: '交车任务', bizType: '租赁', deliveryRegion: '浙江省-嘉兴市', deliveryAddress: '南湖科技大道停车场', createTime: '2025-02-10 09:00', createBy: '系统',
    vehicleList: [
      { vehicleKey: 1, seq: 1, vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', vin: 'LKLG7C4E4NA774759', plateNo: '京A12345', deliveryTime: '2025-02-15 10:30', deliveryPerson: '张三', deliveryStatus: '客户已签章', deliveryMileage: 12580, deliveryH2: 35, deliveryH2Unit: 'MPa', deliveryElec: 45, hasAd: '有', hasTailgate: '有', spareTire: '有', driverTraining: '已完成', vehicleReturned: true },
      { vehicleKey: 2, seq: 2, vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', vin: 'LKLG7C4E4NA774760', plateNo: '京C11111', deliveryTime: '2025-02-15 14:00', deliveryPerson: '李四', deliveryStatus: '客户已签章', deliveryMileage: 13200, deliveryH2: 68, deliveryH2Unit: '%', deliveryElec: 38, hasAd: '无', hasTailgate: '无', spareTire: '有', driverTraining: '已完成', vehicleReturned: false },
    ],
  },
];

const DV_IN_PROGRESS_STATUSES = ['未开始', '已保存', '待客户签章'];
const DV_STATUS_FILTER_OPTIONS = ['', '未开始', '已保存', '待客户签章'];
const DV_LIST_TABS = [
  { key: 'inProgress', short: '进行中', label: '进行中' },
  { key: 'completed', short: '已完成', label: '已完成' },
  { key: 'all', short: '全部', label: '全部任务' },
];
const DV_EMPTY_MORE_FILTER = { customerName: '', projectName: '', dateStart: '', dateEnd: '' };

const dvIsHistoryStatus = (s) => s === '客户已签章';
const dvIsInProgressStatus = (s) => DV_IN_PROGRESS_STATUSES.indexOf(s || '未开始') >= 0;
const dvDisplayPlate = (p) => (p && String(p).trim() ? p : '车辆待选');
const dvFormatExpectedDate = (expectedDate) => {
  if (!expectedDate || !String(expectedDate).trim()) return '—';
  return String(expectedDate).trim().replace(/\s*至\s*/g, ' - ');
};
const dvDisplayActualTime = (t) => (t && String(t).trim() ? String(t).trim() : '—');
const dvVehicleDesc = (row) => [row.brand, row.model].filter(Boolean).join('·') || '—';
const dvStatusTag = (status) => {
  if (status === '客户已签章') return { text: status, cls: 'ok' };
  if (status === '待客户签章') return { text: status, cls: 'info' };
  if (status === '已保存') return { text: status, cls: 'warn' };
  return { text: status || '未开始', cls: 'neutral' };
};
const dvCardStatusClass = (status) => {
  if (status === '客户已签章') return 'ok';
  if (status === '待客户签章') return 'info';
  return 'pending';
};
const dvParseDateOnly = (value) => {
  if (!value || !String(value).trim()) return null;
  const raw = String(value).trim().replace('T', ' ').slice(0, 10);
  return /^\d{4}-\d{2}-\d{2}$/.test(raw) ? raw : null;
};
const dvIsDeliveredStatus = (status) => status === '待客户签章' || status === '客户已签章';
const dvGetDeliveryDateForFilter = (row) => {
  if (!dvIsDeliveredStatus(row.deliveryStatus)) return null;
  return dvParseDateOnly(row.deliveryTime);
};
const dvIsReplaceDeliveryTask = (row) => row.taskSource === '替换车';
const dvRowMatchesDateRange = (row, dateStart, dateEnd) => {
  if (!dateStart && !dateEnd) return true;
  const d = dvGetDeliveryDateForFilter(row);
  if (!d) return false;
  if (dateStart && d < dateStart) return false;
  if (dateEnd && d > dateEnd) return false;
  return true;
};

const dvFlattenOrders = (orders) => {
  const rows = [];
  orders.forEach((order) => {
    (order.vehicleList || []).forEach((v) => {
      if (DV_OPERATOR_REGIONS.indexOf(order.deliveryRegion) < 0) return;
      rows.push({
        id: `${order.id}-${v.vehicleKey}`,
        orderId: order.id,
        vehicleKey: v.vehicleKey,
        seq: v.seq,
        expectedDate: order.expectedDate,
        contractCode: order.contractCode,
        projectName: order.projectName,
        customerName: order.customerName,
        businessDept: order.businessDept,
        businessOwner: order.businessOwner,
        taskSource: order.taskSource,
        bizType: order.bizType,
        deliveryRegion: order.deliveryRegion,
        deliveryAddress: order.deliveryAddress,
        createTime: order.createTime,
        createBy: order.createBy,
        vehicleType: v.vehicleType,
        brand: v.brand,
        model: v.model,
        vin: v.vin,
        replaceOldPlate: v.replaceOldPlate,
        plateNo: v.plateNo || '',
        deliveryTime: v.deliveryTime || '',
        deliveryPerson: v.deliveryPerson || '',
        deliveryStatus: v.deliveryStatus || '未开始',
        deliveryMileage: v.deliveryMileage,
        deliveryH2: v.deliveryH2,
        deliveryH2Unit: v.deliveryH2Unit || '%',
        deliveryElec: v.deliveryElec,
        hasAd: v.hasAd || '',
        hasTailgate: v.hasTailgate || '',
        spareTire: v.spareTire || '',
        driverTraining: v.driverTraining || '',
        vehicleReturned: v.vehicleReturned,
      });
    });
  });
  return rows;
};

const dvBuildEmptyForm = (row) => ({
  plateNo: row.plateNo || '',
  brand: row.brand || '',
  model: row.model || '',
  vin: row.vin || '',
  hasAd: row.hasAd || '',
  hasTailgate: row.hasTailgate || '',
  spareTire: row.spareTire || '',
  driverTraining: row.driverTraining || '',
  deliveryMileage: row.deliveryMileage != null ? String(row.deliveryMileage) : '',
  deliveryH2: row.deliveryH2 != null ? String(row.deliveryH2) : '',
  deliveryH2Unit: row.deliveryH2Unit || '%',
  deliveryElec: row.deliveryElec != null ? String(row.deliveryElec) : '',
  deliveryTime: row.deliveryTime ? row.deliveryTime.replace(' ', 'T').slice(0, 16) : '',
});

const dvFormatH2 = (v, unit) => (v == null || v === '' ? '—' : `${v} ${unit || '%'}`);
const dvFormatMileage = (v) => (v == null || v === '' ? '—' : `${Number(v).toLocaleString()} km`);

const buildPickupDetail = (task) => {
  const isShanghai = task?.bizNo === 'TC-2026-0312';
  const projectInfo = isShanghai
    ? {
        collectCode: 'HT-ZL-2025-088TC0001', contractCode: 'HT-ZL-2025-088', contractType: '正式合同',
        projectName: '上海氢能城际物流项目', customerName: '上海迅杰物流有限公司',
        paymentMethod: '预付', paymentCycle: '6个月', contractStart: '2025-03-01', contractEnd: '2026-02-28',
        businessDept: '业务2部', businessPerson: '李晓彤',
      }
    : {
        collectCode: 'HT-ZL-2025-001TC0001', contractCode: 'HT-ZL-2025-001', contractType: '正式合同',
        projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司',
        paymentMethod: '预付', paymentCycle: '6个月', contractStart: '2025-01-15', contractEnd: '2026-01-14',
        businessDept: '业务1部', businessPerson: '张经理',
      };
  const vehicles = isShanghai
    ? [
        { key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '沪A88123', receivableRent: 62000, actualRent: '61200.00', rentRemark: '首期六期一次性付清', receivableDeposit: 12000, receivableService: 880, actualService: '860.00', discountAmount: '200.00', discountRemark: '首月优惠', serviceItems: [{ name: '代处理费用', receivable: 280, actual: '280.00', discount: '0.00', remark: '' }, { name: '保险上浮', receivable: 600, actual: '580.00', discount: '20.00', remark: '客户协商' }] },
        { key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '沪A88234', receivableRent: 58000, actualRent: '58000.00', rentRemark: '', receivableDeposit: 10000, receivableService: 500, actualService: '500.00', discountAmount: '0.00', discountRemark: '', serviceItems: [{ name: '保养费用', receivable: 500, actual: '500.00', discount: '0.00', remark: '含首保' }] },
        { key: 'v3', index: 3, brand: '重汽', model: 'ZZ1187', plateNo: '沪A88345', receivableRent: 64000, actualRent: '63600.00', rentRemark: '按合同约定', receivableDeposit: 12000, receivableService: 720, actualService: '700.00', discountAmount: '150.00', discountRemark: '批量提车减免', serviceItems: [{ name: '代处理费用', receivable: 220, actual: '220.00', discount: '0.00', remark: '' }, { name: '上牌服务', receivable: 500, actual: '480.00', discount: '20.00', remark: '已含上牌' }] },
      ]
    : [
        { key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '浙A12345', receivableRent: 30000, actualRent: '29800.00', rentRemark: '首期六期一次性付清', receivableDeposit: 10000, receivableService: 700, actualService: '680.00', discountAmount: '200.00', discountRemark: '首月优惠', serviceItems: [{ name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' }, { name: '保险上浮', receivable: 500, actual: '480.00', discount: '20.00', remark: '客户协商' }] },
        { key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '浙A23456', receivableRent: 27000, actualRent: '27000.00', rentRemark: '', receivableDeposit: 8000, receivableService: 300, actualService: '300.00', discountAmount: '0.00', discountRemark: '', serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '含首保' }] },
      ];
  const hasHydrogenPrepay = true;
  const hydrogen = isShanghai
    ? { receivable: '4200.00', actual: '4100.00', discount: '100.00', discountRemark: '预付款批量减免' }
    : { receivable: '3580.00', actual: '3500.00', discount: '80.00', discountRemark: '预付款批量减免' };
  const approvalSteps = isShanghai
    ? [
        { title: '业务部主管', department: '业务2部', status: '已通过', person: '李晓彤', approveTime: '2026-05-30 10:30' },
        { title: '财务部', department: '财务部', status: '待审批', person: '张明辉', approveTime: '—' },
      ]
    : [
        { title: '业务部主管', department: '业务1部', status: '已通过', person: '张经理', approveTime: '2026-02-28 09:30' },
        { title: '财务部', department: '财务部', status: '已通过', person: '李财务', approveTime: '2026-02-28 10:15' },
        { title: '事业部主管', department: '事业部', status: '已通过', person: '王总', approveTime: '2026-03-01 11:20' },
      ];
  return {
    projectInfo, vehicles, hasHydrogenPrepay, hydrogen, approvalSteps,
    invoiceMethod: '先开票后付款',
    invoiceRemark: isShanghai
      ? '增值税专用发票，税率13%，开票项目：*现代服务*车辆租赁费；备注：上海氢能城际物流项目-提车首付款'
      : '增值税专用发票，税率13%，开票项目：*现代服务*车辆租赁费；备注：嘉兴氢能示范项目-提车首付款',
  };
};

const calcPickupTotals = (vehicles, hasHydrogenPrepay, hydrogen) => {
  let receivableRent = 0; let actualRent = 0; let receivableDeposit = 0;
  let receivableService = 0; let actualService = 0; let discountTotal = 0;
  vehicles.forEach((v) => {
    receivableRent += Number(v.receivableRent) || 0;
    actualRent += parseFloat(v.actualRent) || 0;
    receivableDeposit += Number(v.receivableDeposit) || 0;
    receivableService += Number(v.receivableService) || 0;
    actualService += parseFloat(v.actualService) || 0;
    discountTotal += parseFloat(v.discountAmount) || 0;
  });
  const hydrogenReceivable = hasHydrogenPrepay ? (parseFloat(hydrogen.receivable) || 0) : 0;
  const hydrogenActual = hasHydrogenPrepay ? (parseFloat(hydrogen.actual) || 0) : 0;
  return {
    receivableRent: receivableRent.toFixed(2), actualRent: actualRent.toFixed(2),
    receivableDeposit: receivableDeposit.toFixed(2), receivableService: receivableService.toFixed(2),
    actualService: actualService.toFixed(2), discountTotal: discountTotal.toFixed(2),
    receivableTotal: (receivableRent + receivableDeposit + receivableService + hydrogenReceivable).toFixed(2),
    actualTotal: (actualRent + receivableDeposit + actualService - discountTotal + hydrogenActual).toFixed(2),
  };
};

const TcInfoRow = ({ label, value, full }) => (
  <div className={`tc-kv-item${full ? ' tc-kv-value--full' : ''}`}>
    <div className="tc-kv-label">{label}</div>
    <div className="tc-kv-value">{value || '—'}</div>
  </div>
);

const TcVehicleCard = ({ vehicle }) => {
  const [serviceOpen, setServiceOpen] = useState(false);
  const vehicleActual = (
    parseFloat(vehicle.actualRent || 0)
    + parseFloat(vehicle.receivableDeposit || 0)
    + parseFloat(vehicle.actualService || 0)
    - parseFloat(vehicle.discountAmount || 0)
  ).toFixed(2);
  return (
    <div className="tc-vehicle-card">
      <div className="tc-vehicle-head">
        <div>
          <div className="tc-vehicle-plate">{vehicle.plateNo || '待上牌'}</div>
          <div className="tc-vehicle-model">{vehicle.brand} · {vehicle.model}</div>
        </div>
        <span className="tc-vehicle-idx">#{vehicle.index}</span>
      </div>
      <div className="tc-vehicle-amount-row">
        <span className="tc-vehicle-amount-label">本车实收合计</span>
        <span className="tc-vehicle-amount-val">{formatMoneySymbol(vehicleActual)}</span>
      </div>
      <div className="tc-vehicle-kv">
        <div className="tc-vehicle-kv-item"><span>实收月租金 </span>{formatYuan(vehicle.actualRent)}</div>
        <div className="tc-vehicle-kv-item"><span>应收保证金 </span>{formatYuan(vehicle.receivableDeposit)}</div>
        <div className="tc-vehicle-kv-item"><span>实收服务费 </span>{formatYuan(vehicle.actualService)}</div>
        <div className="tc-vehicle-kv-item"><span>减免金额 </span>{formatYuan(vehicle.discountAmount)}</div>
      </div>
      {(vehicle.serviceItems || []).length > 0 && (
        <>
          <button type="button" className="tc-service-toggle" onClick={() => setServiceOpen((o) => !o)}>
            {serviceOpen ? '收起' : '查看'}服务费明细
          </button>
          {serviceOpen && (
            <div className="tc-service-list">
              {(vehicle.serviceItems || []).map((s, i) => (
                <div className="tc-service-row" key={i}>
                  <span className="tc-service-name">{s.name}</span>
                  <span className="tc-service-amt">{formatMoneySymbol(s.actual)}</span>
                  <span className="tc-service-sub">应收 {formatYuan(s.receivable)} · 减免 {formatYuan(s.discount)}</span>
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
};

const APPROVAL_DECISION_META = {
  approve: { title: '审批通过', success: '审批已通过（原型）' },
  reject: { title: '审批驳回', success: '已驳回（原型）' },
  terminate: { title: '审批终止', success: '已终止（原型）' },
};

const MOCK_CC_CANDIDATES = ['李晓彤', '陈高伟', '王法务', '财务-赵敏'];
const UPLOAD_ACCEPT = '.png,.jpg,.jpeg,.doc,.docx,.xlsx,.xls,.ppt,.pdf';
const UPLOAD_HINT = '请上传不超过 20MB 的 png, jpg, jpeg, doc, docx, xlsx, xls, ppt, pdf 格式文件';

const emptyDecisionForm = () => ({
  notifyEmail: false,
  notifySms: false,
  ccUsers: [],
  opinion: '',
  attachments: [],
});

const ApprovalDecisionDrawer = ({ open, actionType, onClose, onConfirm }) => {
  const meta = APPROVAL_DECISION_META[actionType] || APPROVAL_DECISION_META.approve;
  const [form, setForm] = useState(emptyDecisionForm);
  const [ccPickerOpen, setCcPickerOpen] = useState(false);
  const fileInputRef = useRef(null);

  useEffect(() => {
    if (open) {
      setForm(emptyDecisionForm());
      setCcPickerOpen(false);
    }
  }, [open, actionType]);

  const handleDrawerClose = () => {
    if (ccPickerOpen) {
      setCcPickerOpen(false);
      return;
    }
    onClose();
  };

  const toggleCcUser = (name) => {
    setForm((p) => ({
      ...p,
      ccUsers: p.ccUsers.includes(name) ? p.ccUsers.filter((n) => n !== name) : [...p.ccUsers, name],
    }));
  };

  const handleUpload = (e) => {
    const files = Array.from(e.target.files || []);
    if (!files.length) return;
    setForm((p) => ({
      ...p,
      attachments: [
        ...p.attachments,
        ...files.map((f) => ({ id: `${f.name}-${Date.now()}`, name: f.name, size: f.size })),
      ],
    }));
    e.target.value = '';
  };

  const handleConfirm = () => {
    onConfirm?.({ actionType, ...form, notifyInternal: true });
    onClose();
  };

  if (!Drawer) return null;

  return (
    <Drawer
      title={ccPickerOpen ? '选择抄送人' : meta.title}
      placement="bottom"
      height={ccPickerOpen ? 360 : 'auto'}
      open={open}
      onClose={handleDrawerClose}
      destroyOnClose
      zIndex={1000}
      styles={{ body: { padding: '8px 16px 24px', maxHeight: ccPickerOpen ? undefined : '78vh', overflowY: 'auto' } }}
    >
      {ccPickerOpen ? (
        <>
          <div className="tc-person-list">
            {MOCK_CC_CANDIDATES.map((name) => (
              <button
                key={name}
                type="button"
                className={`tc-person-item${form.ccUsers.includes(name) ? ' selected' : ''}`}
                onClick={() => toggleCcUser(name)}
              >
                {name}
              </button>
            ))}
          </div>
          <div className="tc-drawer-foot">
            <button type="button" className="tc-drawer-foot-btn tc-drawer-foot-cancel" onClick={() => setCcPickerOpen(false)}>返回</button>
            <button type="button" className="tc-drawer-foot-btn tc-drawer-foot-confirm" onClick={() => setCcPickerOpen(false)}>确定</button>
          </div>
        </>
      ) : (
        <>
        <div className="tc-approval-form">
          <div className="tc-form-field">
            <div className="tc-form-label">通知方式</div>
            <div className="tc-notify-group">
              <label className="tc-notify-item disabled">
                <input type="checkbox" checked disabled readOnly />站内信
              </label>
              <label className="tc-notify-item">
                <input
                  type="checkbox"
                  checked={form.notifyEmail}
                  onChange={(e) => setForm((p) => ({ ...p, notifyEmail: e.target.checked }))}
                />
                邮件
              </label>
              <label className="tc-notify-item">
                <input
                  type="checkbox"
                  checked={form.notifySms}
                  onChange={(e) => setForm((p) => ({ ...p, notifySms: e.target.checked }))}
                />
                短信
              </label>
            </div>
          </div>
          <div className="tc-form-field">
            <div className="tc-form-label">附件上传</div>
            <button type="button" className="tc-upload-btn" onClick={() => fileInputRef.current?.click()}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" /></svg>
              上传
            </button>
            <input ref={fileInputRef} type="file" accept={UPLOAD_ACCEPT} multiple style={{ display: 'none' }} onChange={handleUpload} />
            <div className="tc-upload-hint">{UPLOAD_HINT}</div>
            {form.attachments.length > 0 && (
              <div className="tc-file-list">
                {form.attachments.map((f) => (
                  <div className="tc-file-item" key={f.id}>
                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</span>
                    <button
                      type="button"
                      className="tc-file-remove"
                      onClick={() => setForm((p) => ({ ...p, attachments: p.attachments.filter((a) => a.id !== f.id) }))}
                    >
                      删除
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
          <div className="tc-form-field">
            <div className="tc-form-label">抄送人</div>
            <button
              type="button"
              className={`tc-select-person${form.ccUsers.length ? ' has-value' : ''}`}
              onClick={() => setCcPickerOpen(true)}
            >
              {form.ccUsers.length ? `已选 ${form.ccUsers.length} 人` : '选择人员'}
            </button>
            {form.ccUsers.length > 0 && (
              <div className="tc-cc-chips">
                {form.ccUsers.map((name) => (
                  <span className="tc-cc-chip" key={name}>
                    {name}
                    <button type="button" aria-label={`移除${name}`} onClick={() => toggleCcUser(name)}>×</button>
                  </span>
                ))}
              </div>
            )}
          </div>
          <div className="tc-form-field">
            <div className="tc-form-label">审批意见</div>
            <textarea
              className="tc-textarea"
              placeholder="请输入"
              value={form.opinion}
              onChange={(e) => setForm((p) => ({ ...p, opinion: e.target.value }))}
              maxLength={500}
            />
          </div>
        </div>
        <div className="tc-drawer-foot">
          <button type="button" className="tc-drawer-foot-btn tc-drawer-foot-cancel" onClick={onClose}>取消</button>
          <button type="button" className="tc-drawer-foot-btn tc-drawer-foot-confirm" onClick={handleConfirm}>确认</button>
        </div>
        </>
      )}
    </Drawer>
  );
};

const ApprovalCommentDrawer = ({ open, onClose, onConfirm }) => {
  const [content, setContent] = useState('');

  useEffect(() => {
    if (open) setContent('');
  }, [open]);

  const handleConfirm = () => {
    if (!content.trim()) {
      message.warning('请输入评论内容');
      return;
    }
    onConfirm?.({ content: content.trim() });
    onClose();
  };

  if (!Drawer) return null;

  return (
    <Drawer
      title="添加评论"
      placement="bottom"
      height="auto"
      open={open}
      onClose={onClose}
      destroyOnClose
      zIndex={1000}
      styles={{ body: { padding: '8px 16px 24px' } }}
    >
      <div className="tc-form-field">
        <div className="tc-form-label tc-form-label-required">评论内容</div>
        <textarea
          className="tc-textarea"
          placeholder="请输入评论内容"
          value={content}
          onChange={(e) => setContent(e.target.value.slice(0, 500))}
          maxLength={500}
        />
        <div className="tc-textarea-counter">{content.length} / 500</div>
      </div>
      <div className="tc-drawer-foot">
        <button type="button" className="tc-drawer-foot-btn tc-drawer-foot-cancel" onClick={onClose}>取消</button>
        <button type="button" className="tc-drawer-foot-btn tc-drawer-foot-confirm" onClick={handleConfirm}>确认</button>
      </div>
    </Drawer>
  );
};

const TcMiniBottomSheet = ({ open, title, onClose, rows, totalLabel, totalValue, totalTheme }) => {
  if (!open) return null;
  const totalCls = totalTheme === 'blue' ? ' tc-drawer-total--blue' : totalTheme === 'purple' ? ' tc-drawer-total--purple' : '';
  const highlightCls = totalTheme === 'blue' ? ' highlight--blue' : totalTheme === 'purple' ? ' highlight--purple' : totalTheme === 'orange' ? ' highlight' : '';
  return (
    <div className="tc-mini-sheet" role="dialog" aria-modal="true" aria-label={title}>
      <button type="button" className="tc-mini-sheet-mask" onClick={onClose} aria-label="关闭" />
      <div className="tc-mini-sheet-panel">
        <div className="tc-mini-sheet-handle" aria-hidden="true" />
        <div className="tc-mini-sheet-head">
          <span className="tc-mini-sheet-title">{title}</span>
          <button type="button" className="tc-mini-sheet-close" onClick={onClose} aria-label="关闭">×</button>
        </div>
        <div className="tc-mini-sheet-body">
          {(rows || []).map((r) => (
            <div className="tc-drawer-row" key={r.label}>
              <span style={{ color: COLOR_TEXT_SEC, flex: 1, minWidth: 0, paddingRight: 8 }}>{r.label}</span>
              <span className={`tc-drawer-row-val${r.highlight ? highlightCls : ''}`} style={{ fontWeight: 700, flexShrink: 0, textAlign: 'right' }}>{r.value}</span>
            </div>
          ))}
          <div className={`tc-drawer-total${totalCls}`}>
            <span>{totalLabel}</span>
            <span>{totalValue}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const ApprovalActionBar = ({ mode, onComment, onTerminate, onReject, onApprove }) => {
  if (mode === 'approve') {
    return (
      <div className="tc-action-bar">
        <button type="button" className="tc-btn tc-btn-comment" onClick={onComment}>评论</button>
        <button type="button" className="tc-btn tc-btn-terminate" onClick={onTerminate}>终止</button>
        <button type="button" className="tc-btn tc-btn-reject" onClick={onReject}>驳回</button>
        <button type="button" className="tc-btn tc-btn-approve" onClick={onApprove}>通过</button>
      </div>
    );
  }
  return (
    <div className="tc-action-bar tc-action-bar--view">
      <button type="button" className="tc-btn tc-btn-comment" style={{ flex: '0 0 88px' }} onClick={onComment}>评论</button>
    </div>
  );
};

const PickupReceivableApprovePage = ({ task, mode, onBack }) => {
  const detail = useMemo(() => buildPickupDetail(task), [task]);
  const { projectInfo, vehicles, hasHydrogenPrepay, hydrogen, approvalSteps, invoiceMethod, invoiceRemark } = detail;
  const totals = useMemo(() => calcPickupTotals(vehicles, hasHydrogenPrepay, hydrogen), [vehicles, hasHydrogenPrepay, hydrogen]);
  const [actualDrawerOpen, setActualDrawerOpen] = useState(false);
  const displayActualTotal = task?.actualAmount || totals.actualTotal;
  const diff = (parseFloat(totals.receivableTotal) - parseFloat(displayActualTotal)).toFixed(2);

  const actualRows = [
    { label: '总计实收车辆月租金', value: formatYuan(totals.actualRent) },
    { label: '总计应收车辆保证金', value: formatYuan(totals.receivableDeposit) },
    { label: '总计实收服务费', value: formatYuan(totals.actualService) },
    { label: '总计减免金额', value: `- ${formatYuan(totals.discountTotal)}` },
  ];
  if (hasHydrogenPrepay) actualRows.push({ label: '氢费预充值实收金额', value: formatYuan(hydrogen.actual), highlight: true });

  const [decisionOpen, setDecisionOpen] = useState(false);
  const [decisionType, setDecisionType] = useState('approve');
  const [commentOpen, setCommentOpen] = useState(false);
  const showActions = mode === 'approve' || mode === 'view';

  const openDecision = (type) => {
    setDecisionType(type);
    setDecisionOpen(true);
  };

  const handleDecisionConfirm = (payload) => {
    const meta = APPROVAL_DECISION_META[payload.actionType];
    if (payload.actionType === 'reject' || payload.actionType === 'terminate') {
      message.warning(meta?.success || '操作成功（原型）');
    } else {
      message.success(meta?.success || '操作成功（原型）');
    }
    if (mode === 'approve') onBack();
  };

  const handleCommentConfirm = () => {
    message.success('评论已添加（原型）');
  };

  return (
    <>
      <div className="tc-scroll">
        <div className="tc-hero">
          <div className="tc-hero-label">实收款总额</div>
          <div className="tc-hero-amount">{formatMoneySymbol(displayActualTotal)}</div>
          <div className="tc-hero-meta">
            <span>{projectInfo.customerName}</span>
          </div>
          <div className="tc-hero-foot tc-hero-foot--compact">
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">合同编码</span>{projectInfo.contractCode || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">项目名称</span>{projectInfo.projectName || '—'}</div>
          </div>
          <div className="tc-hero-period">
            <span className="tc-hero-period-tag">{vehicles.length} 台车</span>
          </div>
          <div className="tc-hero-sub">
            <div className="tc-hero-compare">
              应收款总额 {formatMoneySymbol(totals.receivableTotal)}
              <br />
              较应收减免 {formatMoneySymbol(diff)}
            </div>
            <button type="button" className="tc-hero-detail-btn" onClick={() => setActualDrawerOpen(true)}>实收明细</button>
          </div>
        </div>
        <div className="tc-section">
          <div className="tc-section-head">
            <span className="tc-section-title">提车应收款 · 车辆明细</span>
            <span className="tc-section-badge">{vehicles.length} 台</span>
          </div>
          {vehicles.map((v) => <TcVehicleCard key={v.key} vehicle={v} />)}
        </div>
        {hasHydrogenPrepay && (
          <div className="tc-section">
            <div className="tc-section-head"><span className="tc-section-title">氢费预付款</span></div>
            <div className="tc-kv-grid">
              <TcInfoRow label="应收金额" value={formatYuan(hydrogen.receivable)} />
              <TcInfoRow label="实收金额" value={formatYuan(hydrogen.actual)} />
              <TcInfoRow label="减免金额" value={formatYuan(hydrogen.discount)} />
              <TcInfoRow label="减免备注" value={hydrogen.discountRemark} full />
            </div>
          </div>
        )}
        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">开票信息</span></div>
          <div className="tc-kv-grid">
            <TcInfoRow label="开票方式" value={invoiceMethod} />
            <TcInfoRow label="开票备注" value={invoiceRemark} full />
          </div>
        </div>
        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">审批情况</span></div>
          <div className="tc-timeline">
            {approvalSteps.map((step, idx) => (
              <div className="tc-step" key={idx}>
                <div className={`tc-step-dot ${step.status === '已通过' ? 'done' : 'wait'}`}>{step.status === '已通过' ? '✓' : ''}</div>
                <div>
                  <div className="tc-step-title">{step.department || step.title}</div>
                  <div className="tc-step-meta">状态：{step.status}<br />审批人：{step.person}<br />时间：{step.approveTime}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: showActions ? 16 : 24 }} />
      </div>
      {showActions && !decisionOpen && !commentOpen && (
        <ApprovalActionBar
          mode={mode}
          onComment={() => setCommentOpen(true)}
          onTerminate={() => openDecision('terminate')}
          onReject={() => openDecision('reject')}
          onApprove={() => openDecision('approve')}
        />
      )}
      <ApprovalDecisionDrawer
        open={decisionOpen}
        actionType={decisionType}
        onClose={() => setDecisionOpen(false)}
        onConfirm={handleDecisionConfirm}
      />
      <ApprovalCommentDrawer
        open={commentOpen}
        onClose={() => setCommentOpen(false)}
        onConfirm={handleCommentConfirm}
      />
      <TcMiniBottomSheet
        open={actualDrawerOpen}
        title="实收款明细"
        onClose={() => setActualDrawerOpen(false)}
        rows={actualRows}
        totalLabel="实收款总额"
        totalValue={formatMoneySymbol(displayActualTotal)}
        totalTheme="orange"
      />
    </>
  );
};

const HC_CUSTOMER_SERVICE_FIXED = ['违章处理违约金', '保险上浮', 'ETC-客户未缴费用', 'ETC卡缺损费', 'ETC设备缺损费'];
const HC_OPERATION_FIXED = ['清洗费', '未结算保养', '未结算维修', '车损费用', '工具损坏丢失费用', '证件丢失费用', '广告损坏丢失费用', '送车服务费', '接车服务费', '轮胎磨损费用'];

const buildHcFeeRows = (fixedItems, amountMap, customRows) => {
  const fixed = fixedItems.map((name, i) => ({
    key: `fixed-${i}-${name}`,
    seq: i + 1,
    feeItem: name,
    amount: amountMap[name] != null ? amountMap[name] : '0.00',
    isCustom: false,
  }));
  const custom = (customRows || []).map((r, i) => ({
    key: r.key || `custom-${i}`,
    seq: fixed.length + i + 1,
    feeItem: r.feeItem,
    amount: r.amount || '0.00',
    isCustom: true,
  }));
  return [...fixed, ...custom];
};

const sumFeeRows = (rows) => rows.reduce((s, r) => s + (parseFloat(r.amount) || 0), 0).toFixed(2);

const calcSafetyInfo = (violations) => {
  const list = violations || [];
  let paid = 0;
  let unpaid = 0;
  list.forEach((v) => {
    const amt = parseFloat(v.penaltyAmount) || 0;
    const status = v.paymentStatus || '';
    if (status === '已缴费' || status === '已缴') paid += amt;
    else unpaid += amt;
  });
  return {
    violationCount: list.length,
    paidAmount: paid.toFixed(2),
    unpaidAmount: unpaid.toFixed(2),
  };
};

const HcFeeItemTable = ({ rows }) => (
  <div className="hc-fee-table">
    <div className="hc-fee-table-head">
      <span className="hc-fee-table-col hc-fee-table-col--seq">序号</span>
      <span className="hc-fee-table-col hc-fee-table-col--item">费用项</span>
      <span className="hc-fee-table-col hc-fee-table-col--amt">金额</span>
    </div>
    {(rows || []).map((r) => (
      <div className={`hc-fee-table-row${r.isCustom ? ' hc-fee-table-row--custom' : ''}`} key={r.key}>
        <span className="hc-fee-table-col hc-fee-table-col--seq">{r.seq}</span>
        <span className="hc-fee-table-col hc-fee-table-col--item">
          {r.feeItem}
          {r.isCustom ? <span className="hc-fee-table-tag">手动</span> : null}
        </span>
        <span className="hc-fee-table-col hc-fee-table-col--amt">{formatYuan(r.amount)}</span>
      </div>
    ))}
  </div>
);

const buildReturnSettlementDetail = (task) => {
  const isGuangzhou = task?.bizNo === 'HC-2026-0418';
  const vehicle = isGuangzhou
    ? {
        plateNo: '粤B58888F', contractCode: 'LNZLHT20251106001', projectName: '嘉兴腾4.5T租赁',
        customerName: '嘉兴某某物流有限公司', deliveryTime: '2026-02-01 09:30', returnTime: '2026-02-27 16:20',
        fragileInsurance: '是', tireInsurance: '否', maintenanceInsurance: '是',
      }
    : {
        plateNo: '沪A03561F', contractCode: 'LNZLHT20251012003', projectName: '上海氢能城际物流项目',
        customerName: '上海迅杰物流有限公司', deliveryTime: '2026-04-01 10:00', returnTime: '2026-05-18 15:40',
        fragileInsurance: '是', tireInsurance: '是', maintenanceInsurance: '是',
      };

  const businessServiceRows = buildHcFeeRows(
    HC_CUSTOMER_SERVICE_FIXED,
    {
      违章处理违约金: '0.00',
      保险上浮: '0.00',
      'ETC-客户未缴费用': '100.00',
      ETC卡缺损费: '0.00',
      ETC设备缺损费: '0.00',
    },
    [{ key: 'bs-custom-1', feeItem: '停车费', amount: '50.00' }],
  );
  const billInfo = { receivedRent: '0.00', actualRent: task?.actualRent || '0.00', shouldRefundRent: '0.00' };
  const energy = {
    deliveryHydrogen: '85.00', returnHydrogen: '72.00', hydrogenUnitPrice: '35.00',
    hydrogenSupplement: '455.00', hydrogenFee: '0.00', electricFee: '0.00', prepayRefund: '0.00', userBalance: '1200.00',
  };
  const operationRows = buildHcFeeRows(
    HC_OPERATION_FIXED,
    {
      清洗费: '0.00',
      未结算保养: '372.50',
      未结算维修: '0.00',
      车损费用: '0.00',
      工具损坏丢失费用: '0.00',
      证件丢失费用: '0.00',
      广告损坏丢失费用: '0.00',
      送车服务费: '0.00',
      接车服务费: '0.00',
      轮胎磨损费用: '0.00',
    },
    [{ key: 'op-custom-1', feeItem: '补办行驶证', amount: '80.00' }],
  );
  const violations = [
    {
      code: 'WZ202602010001', plateNo: vehicle.plateNo, violationBehavior: '闯红灯',
      violationTime: '2026-02-01', penaltyAmount: '100.00', paymentStatus: '未缴费', handleStatus: '未处理',
    },
    {
      code: 'WZ202602150002', plateNo: vehicle.plateNo, violationBehavior: '违停',
      violationTime: '2026-02-15', penaltyAmount: '200.00', paymentStatus: '已缴费', handleStatus: '已处理',
    },
  ];
  const safetyInfo = calcSafetyInfo(violations);
  const approvalSteps = isGuangzhou
    ? [
        { department: '客户服务组', status: '已通过', person: '张三', approveTime: '2026-04-17 16:00' },
        { department: '能源采购组', status: '已通过', person: '李四', approveTime: '2026-04-17 17:30' },
        { department: '运维部', status: '已通过', person: '王五', approveTime: '2026-04-18 08:20' },
        { department: '财务部', status: '待审批', person: '张明辉', approveTime: '—' },
      ]
    : [
        { department: '客户服务组', status: '已通过', person: '张三', approveTime: '2026-05-19 14:00' },
        { department: '财务部', status: '已通过', person: '李财务', approveTime: '2026-05-21 15:30' },
      ];

  const businessServiceTotal = sumFeeRows(businessServiceRows);
  const customerServiceTotal = (parseFloat(businessServiceTotal) + parseFloat(billInfo.shouldRefundRent || 0)).toFixed(2);
  const operationTotal = sumFeeRows(operationRows);
  const energySettleTotal = (
    (parseFloat(energy.hydrogenSupplement) || 0) - (parseFloat(energy.prepayRefund) || 0)
  ).toFixed(2);
  const safetyTotal = safetyInfo.unpaidAmount;
  const depositAmount = task?.depositAmount || '5000.00';
  const pendingSettle = task?.pendingSettle || (
    parseFloat(customerServiceTotal) + parseFloat(energySettleTotal)
    + parseFloat(operationTotal) + parseFloat(safetyTotal)
  ).toFixed(2);
  const diff = (parseFloat(depositAmount) || 0) - (parseFloat(pendingSettle) || 0);
  const refundTotal = task?.refundTotal || (diff > 0 ? diff.toFixed(2) : '0.00');
  const payTotal = task?.payTotal || (diff < 0 ? Math.abs(diff).toFixed(2) : '0.00');

  const settleBreakdown = [
    { label: '保证金', value: formatMoneySymbol(depositAmount) },
    { label: '客户服务组总计', value: formatYuan(customerServiceTotal) },
    { label: '能源采购组总计', value: formatYuan(energySettleTotal) },
    { label: '运维部总计', value: formatYuan(operationTotal) },
    { label: '安全部总计', value: formatYuan(safetyTotal) },
  ];

  return {
    vehicle, businessServiceRows, billInfo, energy, operationRows, violations, safetyInfo,
    approvalSteps, businessServiceTotal, customerServiceTotal, operationTotal, energySettleTotal, safetyTotal,
    depositAmount, pendingSettle, refundTotal, payTotal, settleBreakdown,
  };
};

const HcInsuranceBadge = ({ label, value }) => {
  const yes = value === '是';
  return (
    <div className="hc-insurance-item">
      <span>{label}</span>
      <span className={`hc-insurance-icon${yes ? ' hc-insurance-icon--yes' : ' hc-insurance-icon--no'}`} aria-label={value || '否'} title={value || '否'}>
        {yes ? '✓' : '×'}
      </span>
    </div>
  );
};

const HcSettleGroupCard = ({ title, submitter, settleTotal, children }) => (
  <div className="tc-section">
    <div className="tc-section-head">
      <span className="tc-section-title">{title}</span>
      {submitter ? <span className="tc-section-badge tc-section-badge--purple">{submitter}</span> : null}
    </div>
    <div className="hc-settle-body">{children}</div>
    <div className="hc-settle-total">
      <span className="hc-settle-total-label">应结算总额</span>
      <span className="hc-settle-total-val">{formatYuan(settleTotal)}</span>
    </div>
  </div>
);

const ReturnSettlementApprovePage = ({ task, mode, onBack }) => {
  const detail = useMemo(() => buildReturnSettlementDetail(task), [task]);
  const {
    vehicle, businessServiceRows, billInfo, energy, operationRows, safetyInfo, approvalSteps,
    businessServiceTotal, customerServiceTotal, operationTotal, energySettleTotal, safetyTotal,
    depositAmount, pendingSettle, refundTotal, payTotal, settleBreakdown,
  } = detail;

  const [settleDrawerOpen, setSettleDrawerOpen] = useState(false);
  const [decisionOpen, setDecisionOpen] = useState(false);
  const [decisionType, setDecisionType] = useState('approve');
  const [commentOpen, setCommentOpen] = useState(false);
  const showActions = mode === 'approve' || mode === 'view';
  const displayPending = task?.pendingSettle || pendingSettle;
  const isDepositCoverPending = parseFloat(depositAmount) >= parseFloat(displayPending);
  const heroSettleLabel = isDepositCoverPending ? '应退还总额' : '应补缴总额';
  const heroSettleAmount = isDepositCoverPending ? refundTotal : payTotal;

  const openDecision = (type) => { setDecisionType(type); setDecisionOpen(true); };
  const handleDecisionConfirm = (payload) => {
    const meta = APPROVAL_DECISION_META[payload.actionType];
    if (payload.actionType === 'reject' || payload.actionType === 'terminate') message.warning(meta?.success || '操作成功（原型）');
    else message.success(meta?.success || '操作成功（原型）');
    if (mode === 'approve') onBack();
  };

  return (
    <>
      <div className="tc-scroll">
        <div className="tc-hero tc-hero--return">
          <div className="tc-hero-label">{heroSettleLabel}</div>
          <div className="tc-hero-amount">{formatMoneySymbol(heroSettleAmount)}</div>
          <div className="tc-hero-meta">
            <span>{vehicle.customerName}</span>
          </div>
          <div className="tc-hero-foot tc-hero-foot--compact">
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">车牌号</span>{vehicle.plateNo || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">合同编码</span>{vehicle.contractCode || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">项目名称</span>{vehicle.projectName || '—'}</div>
            <div className="hc-insurance-row">
              <HcInsuranceBadge label="易损保" value={vehicle.fragileInsurance} />
              <HcInsuranceBadge label="轮胎保" value={vehicle.tireInsurance} />
              <HcInsuranceBadge label="养护保" value={vehicle.maintenanceInsurance} />
            </div>
          </div>
          <div className="tc-hero-period">
            <span>交车：{vehicle.deliveryTime}</span>
            <span>还车：{vehicle.returnTime}</span>
          </div>
          <div className="tc-hero-sub">
            <div className="tc-hero-compare">
              保证金 {formatMoneySymbol(depositAmount)}
              <br />
              待结算总额 {formatMoneySymbol(displayPending)}
              <br />
              车辆实际租金 {formatYuan(billInfo.actualRent)}
            </div>
            <button type="button" className="tc-hero-detail-btn" onClick={() => setSettleDrawerOpen(true)}>结算明细</button>
          </div>
        </div>

        <HcSettleGroupCard title="客户服务组" submitter="张三 · 已提交" settleTotal={customerServiceTotal}>
          <HcFeeItemTable rows={businessServiceRows} />
        </HcSettleGroupCard>

        <HcSettleGroupCard title="能源采购组" submitter="李四 · 已提交" settleTotal={energySettleTotal}>
          <div className="tc-kv-grid" style={{ padding: '0 0 8px' }}>
            <TcInfoRow label="氢量差补缴" value={formatYuan(energy.hydrogenSupplement)} />
            <TcInfoRow label="交车氢量" value={`${energy.deliveryHydrogen} MPa`} />
            <TcInfoRow label="还车氢量" value={`${energy.returnHydrogen} MPa`} />
            <TcInfoRow label="退还氢气单价" value={formatYuan(energy.hydrogenUnitPrice)} />
            <TcInfoRow label="预付款退费" value={formatYuan(energy.prepayRefund)} />
          </div>
        </HcSettleGroupCard>

        <HcSettleGroupCard title="运维部" submitter="王五 · 已提交" settleTotal={operationTotal}>
          <HcFeeItemTable rows={operationRows} />
        </HcSettleGroupCard>

        <HcSettleGroupCard title="安全部" submitter="赵六 · 已提交" settleTotal={safetyTotal}>
          <div className="hc-safety-stat-grid">
            <div className="hc-safety-stat-item">
              <div className="hc-safety-stat-label">违章次数</div>
              <div className="hc-safety-stat-val">{safetyInfo.violationCount}</div>
            </div>
            <div className="hc-safety-stat-item">
              <div className="hc-safety-stat-label">已缴金额</div>
              <div className="hc-safety-stat-val">{formatYuan(safetyInfo.paidAmount)}</div>
            </div>
            <div className="hc-safety-stat-item">
              <div className="hc-safety-stat-label">未缴金额</div>
              <div className="hc-safety-stat-val warn">{formatYuan(safetyInfo.unpaidAmount)}</div>
            </div>
          </div>
        </HcSettleGroupCard>

        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">审批情况</span></div>
          <div className="tc-timeline">
            {approvalSteps.map((step, idx) => (
              <div className="tc-step" key={idx}>
                <div className={`tc-step-dot ${step.status === '已通过' ? 'done' : 'wait'}`}>{step.status === '已通过' ? '✓' : ''}</div>
                <div>
                  <div className="tc-step-title">{step.department}</div>
                  <div className="tc-step-meta">状态：{step.status}<br />审批人：{step.person}<br />时间：{step.approveTime}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: showActions ? 16 : 24 }} />
      </div>

      {showActions && !decisionOpen && !commentOpen && (
        <ApprovalActionBar mode={mode} onComment={() => setCommentOpen(true)} onTerminate={() => openDecision('terminate')} onReject={() => openDecision('reject')} onApprove={() => openDecision('approve')} />
      )}
      <ApprovalDecisionDrawer open={decisionOpen} actionType={decisionType} onClose={() => setDecisionOpen(false)} onConfirm={handleDecisionConfirm} />
      <ApprovalCommentDrawer open={commentOpen} onClose={() => setCommentOpen(false)} onConfirm={() => message.success('评论已添加（原型）')} />

      <TcMiniBottomSheet
        open={settleDrawerOpen}
        title="结算明细"
        onClose={() => setSettleDrawerOpen(false)}
        rows={settleBreakdown}
        totalLabel={heroSettleLabel}
        totalValue={formatMoneySymbol(heroSettleAmount)}
        totalTheme="purple"
      />
    </>
  );
};

const WEB_BILL_VEHICLES = [
  { key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '浙A12345', receivableRent: 30000, actualRent: '29800.00', rentRemark: '首期六期一次性付清', discountAmount: '200.00', discountRemark: '首月优惠', discountProof: [{ name: '优惠审批单.pdf' }], receivableDeposit: 10000, serviceItems: [{ name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' }, { name: '保险上浮', receivable: 500, actual: '480.00', discount: '20.00', remark: '客户协商' }], receivableService: 700, actualService: '680.00' },
  { key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '浙A23456', receivableRent: 27000, actualRent: '27000.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 8000, serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '含首保' }], receivableService: 300, actualService: '300.00' },
  { key: 'v3', index: 3, brand: '重汽', model: 'ZZ1187', plateNo: '浙A34567', receivableRent: 31200, actualRent: '31200.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 10000, serviceItems: [{ name: '代处理费用', receivable: 180, actual: '180.00', discount: '0.00', remark: '' }, { name: '上牌服务', receivable: 400, actual: '400.00', discount: '0.00', remark: '' }], receivableService: 580, actualService: '580.00' },
];

const buildLeaseBillDetail = (task) => {
  const isJuneBill = task?.bizNo === 'ZD-2026-06-001';
  const billInfo = isJuneBill
    ? {
        contractCode: 'HT-ZL-2025-001', contractType: '正式合同', projectName: '嘉兴氢能示范项目',
        customerName: '嘉兴某某物流有限公司', deliveryTaskCode: 'JT-2025-001-A',
        billCode: 'HT-ZL-2025-0010006', period: 6, billStartDate: '2026-06-01', billEndDate: '2026-06-30',
      }
    : {
        contractCode: 'HT-ZL-2025-001', contractType: '正式合同', projectName: '嘉兴氢能示范项目',
        customerName: '嘉兴某某物流有限公司', deliveryTaskCode: 'JT-2025-001-A',
        billCode: 'HT-ZL-2025-0010001', period: 1, billStartDate: '2025-01-01', billEndDate: '2025-01-31',
      };
  const vehicles = isJuneBill
    ? [
        { key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '粤B58888F', receivableRent: 30000, actualRent: '29800.00', rentRemark: '', discountAmount: '200.00', discountRemark: '批量优惠', discountProof: [], receivableDeposit: 0, serviceItems: [{ name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' }], receivableService: 200, actualService: '200.00' },
        { key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '粤B59999F', receivableRent: 28500, actualRent: '28500.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 0, serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '' }], receivableService: 300, actualService: '300.00' },
        { key: 'v3', index: 3, brand: '重汽', model: 'ZZ1187', plateNo: '粤B60001F', receivableRent: 29200, actualRent: '29000.00', rentRemark: '按合同约定', discountAmount: '200.00', discountRemark: '协商减免', discountProof: [{ name: '减免说明.pdf' }], receivableDeposit: 0, serviceItems: [{ name: '保险上浮', receivable: 500, actual: '480.00', discount: '20.00', remark: '' }], receivableService: 500, actualService: '480.00' },
        { key: 'v4', index: 4, brand: '东风', model: 'DFH1180', plateNo: '粤B61112F', receivableRent: 27800, actualRent: '27800.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 0, serviceItems: [], receivableService: 0, actualService: '0.00' },
        { key: 'v5', index: 5, brand: '福田', model: 'BJ1180', plateNo: '粤B62223F', receivableRent: 26880, actualRent: '26880.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 0, serviceItems: [{ name: '代处理费用', receivable: 180, actual: '180.00', discount: '0.00', remark: '' }], receivableService: 180, actualService: '180.00' },
      ]
    : WEB_BILL_VEHICLES;
  const isFirstPeriod = billInfo.period === 1;
  const hydrogen = { receivable: '3580.00', actual: '3500.00', discount: '80.00', discountRemark: '预付款批量减免' };
  const approvalSteps = isJuneBill
    ? [
        { department: '业务服务组', status: '已通过', person: '陈高伟', approveTime: '2026-06-01 09:00' },
        { department: '业管主管', status: '待审批', person: '张明辉', approveTime: '—' },
      ]
    : [
        { department: '业务服务组', status: '已通过', person: '陈高伟', approveTime: '2026-05-05 09:20' },
        { department: '业管主管', status: '已通过', person: '张明辉', approveTime: '2026-05-05 14:30' },
        { department: '财务部', status: '已通过', person: '财务-赵敏', approveTime: '2026-05-05 18:00' },
      ];
  return { billInfo, vehicles, isFirstPeriod, hydrogen, approvalSteps };
};

const calcLeaseBillTotals = (vehicles, hydrogen, isFirstPeriod) => {
  let receivableRent = 0; let actualRent = 0; let receivableDeposit = 0;
  let receivableService = 0; let actualService = 0; let discountTotal = 0; let serviceDiscountTotal = 0;
  vehicles.forEach((v) => {
    receivableRent += Number(v.receivableRent) || 0;
    actualRent += parseFloat(v.actualRent) || 0;
    receivableDeposit += isFirstPeriod ? (Number(v.receivableDeposit) || 0) : 0;
    receivableService += Number(v.receivableService) || 0;
    actualService += parseFloat(v.actualService) || 0;
    discountTotal += parseFloat(v.discountAmount) || 0;
    (v.serviceItems || []).forEach((s) => { serviceDiscountTotal += parseFloat(s.discount) || 0; });
  });
  const hydrogenReceivable = isFirstPeriod ? (parseFloat(hydrogen.receivable) || 0) : 0;
  const hydrogenActual = isFirstPeriod ? (parseFloat(hydrogen.actual) || 0) : 0;
  const hydrogenDiscount = isFirstPeriod ? (parseFloat(hydrogen.discount) || 0) : 0;
  const receivableTotal = (receivableRent + receivableDeposit + receivableService + hydrogenReceivable).toFixed(2);
  const actualTotal = (actualRent + receivableDeposit + actualService - discountTotal - serviceDiscountTotal + hydrogenActual - hydrogenDiscount).toFixed(2);
  const invoiceTotal = (actualRent + actualService - discountTotal - serviceDiscountTotal + hydrogenActual - hydrogenDiscount).toFixed(2);
  return {
    receivableRent: receivableRent.toFixed(2), actualRent: actualRent.toFixed(2),
    receivableDeposit: receivableDeposit.toFixed(2), receivableService: receivableService.toFixed(2),
    actualService: actualService.toFixed(2), discountTotal: discountTotal.toFixed(2),
    serviceDiscountTotal: serviceDiscountTotal.toFixed(2),
    hydrogenReceivable: hydrogenReceivable.toFixed(2), hydrogenActual: hydrogenActual.toFixed(2),
    hydrogenDiscount: hydrogenDiscount.toFixed(2),
    receivableTotal, actualTotal, invoiceTotal,
  };
};

const ZlVehicleCard = ({ vehicle, isFirstPeriod }) => {
  const [serviceOpen, setServiceOpen] = useState(false);
  const serviceDiscount = (vehicle.serviceItems || []).reduce((s, item) => s + (parseFloat(item.discount) || 0), 0);
  const deposit = isFirstPeriod ? (Number(vehicle.receivableDeposit) || 0) : 0;
  const vehicleActual = (
    parseFloat(vehicle.actualRent || 0) + deposit + parseFloat(vehicle.actualService || 0)
    - parseFloat(vehicle.discountAmount || 0) - serviceDiscount
  ).toFixed(2);
  return (
    <div className="tc-vehicle-card">
      <div className="tc-vehicle-head">
        <div>
          <div className="tc-vehicle-plate">{vehicle.plateNo || '—'}</div>
          <div className="tc-vehicle-model">{vehicle.brand} · {vehicle.model}</div>
        </div>
        <span className="tc-vehicle-idx tc-vehicle-idx--blue">#{vehicle.index}</span>
      </div>
      <div className="tc-vehicle-amount-row">
        <span className="tc-vehicle-amount-label">本车实收合计</span>
        <span className="tc-vehicle-amount-val tc-vehicle-amount-val--blue">{formatMoneySymbol(vehicleActual)}</span>
      </div>
      <div className="tc-vehicle-kv">
        <div className="tc-vehicle-kv-item"><span>应收月租金 </span>{formatYuan(vehicle.receivableRent)}</div>
        <div className="tc-vehicle-kv-item"><span>实收月租金 </span>{formatYuan(vehicle.actualRent)}</div>
        <div className="tc-vehicle-kv-item"><span>应收保证金 </span>{formatYuan(isFirstPeriod ? vehicle.receivableDeposit : 0)}</div>
        <div className="tc-vehicle-kv-item"><span>减免金额 </span>{formatYuan(vehicle.discountAmount)}</div>
        <div className="tc-vehicle-kv-item"><span>应收服务费 </span>{formatYuan(vehicle.receivableService)}</div>
        <div className="tc-vehicle-kv-item"><span>实收服务费 </span>{formatYuan(vehicle.actualService)}</div>
      </div>
      {vehicle.rentRemark ? (
        <div className="tc-vehicle-kv-item" style={{ marginTop: 6, fontSize: 12, color: COLOR_TEXT_SEC }}>
          <span style={{ color: COLOR_MUTED }}>租金备注 </span>{vehicle.rentRemark}
        </div>
      ) : null}
      {vehicle.discountRemark ? (
        <div className="tc-vehicle-kv-item" style={{ marginTop: 4, fontSize: 12, color: COLOR_TEXT_SEC }}>
          <span style={{ color: COLOR_MUTED }}>减免备注 </span>{vehicle.discountRemark}
        </div>
      ) : null}
      {(vehicle.discountProof || []).length > 0 && (
        <div style={{ marginTop: 6 }}>
          <div style={{ fontSize: 11, color: COLOR_MUTED, marginBottom: 4 }}>减免证明</div>
          <div className="zl-proof-list">
            {(vehicle.discountProof || []).map((p, i) => (
              <button key={i} type="button" className="zl-proof-link" onClick={() => message.info(`预览：${p.name || '附件'}`)}>
                {p.name || '附件'}
              </button>
            ))}
          </div>
        </div>
      )}
      {(vehicle.serviceItems || []).length > 0 && (
        <>
          <button type="button" className="tc-service-toggle" onClick={() => setServiceOpen((o) => !o)}>
            {serviceOpen ? '收起' : '查看'}服务费明细
          </button>
          {serviceOpen && (
            <div className="tc-service-list">
              {(vehicle.serviceItems || []).map((s, i) => (
                <div className="tc-service-row" key={i}>
                  <span className="tc-service-name">{s.name}</span>
                  <span className="tc-service-amt tc-service-amt--blue">{formatMoneySymbol(s.actual)}</span>
                  <span className="tc-service-sub">应收 {formatYuan(s.receivable)} · 减免 {formatYuan(s.discount)}{s.remark ? ` · ${s.remark}` : ''}</span>
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
};

const DEFAULT_TRANSFER_APPROVAL_STEPS = [
  { department: '运维主管', status: '已通过', person: '陈高伟', approveTime: '2026-06-01 08:30' },
  { department: '运维中心', status: '审批中', person: '张明辉', approveTime: '—' },
];

const parseTransferInfo = (task) => {
  const info = task?.transferInfo || {};
  return {
    method: info.method || '—',
    transportLeader: info.transportLeader || '—',
    transportPhone: info.transportPhone || '—',
    receivePerson: info.receivePerson || '—',
    transportCost: info.transportCost || '',
    contractFiles: info.contractFiles || [],
  };
};

const buildTransferCreateDetail = (task) => ({
  transferDate: task?.transferDate || '2026-06-01 09:30',
  departRegion: task?.departRegion || '广东省-广州市',
  receiveRegion: task?.receiveRegion || '浙江省-杭州市',
  reason: task?.reason || '—',
  transferInfo: parseTransferInfo(task),
  vehicles: (task?.vehicles || []).map((v, i) => ({ ...v, index: i + 1 })),
  approvalSteps: task?.approvalSteps || DEFAULT_TRANSFER_APPROVAL_STEPS,
});

const buildTransferOpsDetail = (task) => ({
    transferDate: task?.transferDate || '2026-03-31 08:00',
    departRegion: task?.departRegion || '广东省-广州市',
    receiveRegion: task?.receiveRegion || '浙江省-嘉兴市',
    reason: task?.reason || '—',
    transferInfo: parseTransferInfo(task),
    vehicles: (task?.vehicles || []).map((v, i) => ({ ...v, index: i + 1 })),
    approvalSteps: task?.approvalSteps || [
      { department: '运维主管', status: '已通过', person: '陈高伟', approveTime: '2026-03-31 08:00' },
      { department: '运维中心', status: '审批中', person: '张明辉', approveTime: '—' },
    ],
});

const TransferInfoSection = ({ transferInfo }) => (
  <div className="tc-section">
    <div className="tc-section-head"><span className="tc-section-title">调拨信息</span></div>
    <div className="tc-kv-grid">
      <TcInfoRow label="调拨方式" value={transferInfo.method} />
      <TcInfoRow label="运输负责人" value={transferInfo.transportLeader} />
      <TcInfoRow label="运输方联系方式" value={transferInfo.transportPhone} full />
      <TcInfoRow label="接收人员" value={transferInfo.receivePerson} full />
      <TcInfoRow label="运输费用" value={transferInfo.transportCost ? formatMoneySymbol(transferInfo.transportCost) : '—'} />
      {(transferInfo.contractFiles || []).length > 0 ? (
        <div className="tc-kv-item tc-kv-value--full">
          <div className="tc-kv-label">运输合同附件</div>
          <div className="zl-proof-list">
            {(transferInfo.contractFiles || []).map((f, i) => (
              <button key={i} type="button" className="zl-proof-link" onClick={() => message.info(`预览：${f.name || '附件'}`)}>{f.name || '附件'}</button>
            ))}
          </div>
        </div>
      ) : null}
    </div>
  </div>
);

const DbVehicleCard = ({ vehicle }) => (
  <div className="tc-vehicle-card">
    <div className="tc-vehicle-head">
      <div>
        <div className="tc-vehicle-plate">{vehicle.plateNo || '—'}</div>
        <div className="tc-vehicle-model">{vehicle.brand} · {vehicle.model}</div>
      </div>
      <span className="tc-vehicle-idx tc-vehicle-idx--green">#{vehicle.index}</span>
    </div>
    <div className="tc-vehicle-kv">
      <div className="tc-vehicle-kv-item"><span>出发停车场 </span>{vehicle.departParking || '—'}</div>
      <div className="tc-vehicle-kv-item"><span>出发里程 </span>{vehicle.departMileageKm ? `${vehicle.departMileageKm} km` : '—'}</div>
      <div className="tc-vehicle-kv-item"><span>出发氢量 </span>{vehicle.departHydrogen ? `${vehicle.departHydrogen} ${vehicle.h2Unit || '%'}` : '—'}</div>
      <div className="tc-vehicle-kv-item"><span>出发电量 </span>{vehicle.departElectricKwh ? `${vehicle.departElectricKwh} kWh` : '—'}</div>
    </div>
  </div>
);

const TransferCreateApprovePage = ({ task, mode, onBack }) => {
  const detail = useMemo(() => buildTransferCreateDetail(task), [task]);
  const { transferDate, departRegion, receiveRegion, reason, transferInfo, vehicles, approvalSteps } = detail;
  const [decisionOpen, setDecisionOpen] = useState(false);
  const [decisionType, setDecisionType] = useState('approve');
  const [commentOpen, setCommentOpen] = useState(false);
  const showActions = mode === 'approve' || mode === 'view';

  const openDecision = (type) => { setDecisionType(type); setDecisionOpen(true); };
  const handleDecisionConfirm = (payload) => {
    const meta = APPROVAL_DECISION_META[payload.actionType];
    if (payload.actionType === 'reject' || payload.actionType === 'terminate') message.warning(meta?.success || '操作成功（原型）');
    else message.success(meta?.success || '操作成功（原型）');
    if (mode === 'approve') onBack();
  };

  return (
    <>
      <div className="tc-scroll">
        <div className="tc-hero tc-hero--transfer">
          <div className="tc-hero-label">调拨车辆</div>
          <div className="tc-hero-amount">{vehicles.length} 台</div>
          <div className="tc-hero-route">
            <span>{departRegion}</span>
            <span className="tc-hero-route-arrow">→</span>
            <span>{receiveRegion}</span>
          </div>
          <div className="tc-hero-foot tc-hero-foot--compact">
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">调拨日期</span>{transferDate}</div>
          </div>
          <div className="tc-hero-period">
            <span className="tc-hero-period-tag">调拨申请</span>
          </div>
        </div>

        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">调拨情况</span></div>
          <div className="tc-kv-grid">
            <TcInfoRow label="调拨日期" value={transferDate} full />
            <TcInfoRow label="出发区域" value={departRegion} />
            <TcInfoRow label="接收区域" value={receiveRegion} />
            <TcInfoRow label="调拨原因" value={reason} full />
          </div>
        </div>

        <TransferInfoSection transferInfo={transferInfo} />

        <div className="tc-section">
          <div className="tc-section-head">
            <span className="tc-section-title">调拨车辆清单</span>
            <span className="tc-section-badge tc-section-badge--green">{vehicles.length} 台</span>
          </div>
          {vehicles.map((v) => <DbVehicleCard key={v.id || v.index} vehicle={v} />)}
        </div>

        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">审批情况</span></div>
          <div className="tc-timeline">
            {approvalSteps.map((step, idx) => (
              <div className="tc-step" key={idx}>
                <div className={`tc-step-dot ${step.status === '已通过' ? 'done' : 'wait--green'}`}>{step.status === '已通过' ? '✓' : ''}</div>
                <div>
                  <div className="tc-step-title">{step.department}</div>
                  <div className="tc-step-meta">状态：{step.status}<br />审批人：{step.person}<br />时间：{step.approveTime}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: showActions ? 16 : 24 }} />
      </div>

      {showActions && !decisionOpen && !commentOpen && (
        <ApprovalActionBar mode={mode} onComment={() => setCommentOpen(true)} onTerminate={() => openDecision('terminate')} onReject={() => openDecision('reject')} onApprove={() => openDecision('approve')} />
      )}
      <ApprovalDecisionDrawer open={decisionOpen} actionType={decisionType} onClose={() => setDecisionOpen(false)} onConfirm={handleDecisionConfirm} />
      <ApprovalCommentDrawer open={commentOpen} onClose={() => setCommentOpen(false)} onConfirm={() => message.success('评论已添加（原型）')} />
    </>
  );
};

const TransferOpsApprovePage = ({ task, mode, onBack }) => {
  const detail = useMemo(() => buildTransferOpsDetail(task), [task]);
  const { transferDate, departRegion, receiveRegion, reason, transferInfo, vehicles, approvalSteps } = detail;
  const [decisionOpen, setDecisionOpen] = useState(false);
  const [decisionType, setDecisionType] = useState('approve');
  const [commentOpen, setCommentOpen] = useState(false);
  const showActions = mode === 'approve' || mode === 'view';

  const openDecision = (type) => { setDecisionType(type); setDecisionOpen(true); };
  const handleDecisionConfirm = (payload) => {
    const meta = APPROVAL_DECISION_META[payload.actionType];
    if (payload.actionType === 'reject' || payload.actionType === 'terminate') message.warning(meta?.success || '操作成功（原型）');
    else message.success(meta?.success || '操作成功（原型）');
    if (mode === 'approve') onBack();
  };

  return (
    <>
      <div className="tc-scroll">
        <div className="tc-hero tc-hero--transfer">
          <div className="tc-hero-label">调拨车辆</div>
          <div className="tc-hero-amount">{vehicles.length} 台</div>
          <div className="tc-hero-route">
            <span>{departRegion}</span>
            <span className="tc-hero-route-arrow">→</span>
            <span>{receiveRegion}</span>
          </div>
          <div className="tc-hero-foot tc-hero-foot--compact">
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">调拨日期</span>{transferDate}</div>
          </div>
          <div className="tc-hero-period">
            <span className="tc-hero-period-tag">运维调拨方</span>
          </div>
        </div>

        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">调拨情况</span></div>
          <div className="tc-kv-grid">
            <TcInfoRow label="调拨日期" value={transferDate} full />
            <TcInfoRow label="出发区域" value={departRegion} />
            <TcInfoRow label="接收区域" value={receiveRegion} />
            <TcInfoRow label="调拨原因" value={reason} full />
          </div>
        </div>

        <TransferInfoSection transferInfo={transferInfo} />

        <div className="tc-section">
          <div className="tc-section-head">
            <span className="tc-section-title">调拨车辆清单</span>
            <span className="tc-section-badge tc-section-badge--green">{vehicles.length} 台</span>
          </div>
          {vehicles.map((v) => <DbVehicleCard key={v.id || v.index} vehicle={v} />)}
        </div>

        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">审批情况</span></div>
          <div className="tc-timeline">
            {approvalSteps.map((step, idx) => (
              <div className="tc-step" key={idx}>
                <div className={`tc-step-dot ${step.status === '已通过' ? 'done' : 'wait--green'}`}>{step.status === '已通过' ? '✓' : ''}</div>
                <div>
                  <div className="tc-step-title">{step.department}</div>
                  <div className="tc-step-meta">状态：{step.status}<br />审批人：{step.person}<br />时间：{step.approveTime}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: showActions ? 16 : 24 }} />
      </div>

      {showActions && !decisionOpen && !commentOpen && (
        <ApprovalActionBar mode={mode} onComment={() => setCommentOpen(true)} onTerminate={() => openDecision('terminate')} onReject={() => openDecision('reject')} onApprove={() => openDecision('approve')} />
      )}
      <ApprovalDecisionDrawer open={decisionOpen} actionType={decisionType} onClose={() => setDecisionOpen(false)} onConfirm={handleDecisionConfirm} />
      <ApprovalCommentDrawer open={commentOpen} onClose={() => setCommentOpen(false)} onConfirm={() => message.success('评论已添加（原型）')} />
    </>
  );
};

const LeaseBillApprovePage = ({ task, mode, onBack }) => {
  const detail = useMemo(() => buildLeaseBillDetail(task), [task]);
  const { billInfo, vehicles, isFirstPeriod, hydrogen, approvalSteps } = detail;
  const totals = useMemo(() => calcLeaseBillTotals(vehicles, hydrogen, isFirstPeriod), [vehicles, hydrogen, isFirstPeriod]);
  const [receivableDrawerOpen, setReceivableDrawerOpen] = useState(false);
  const [actualDrawerOpen, setActualDrawerOpen] = useState(false);
  const displayActualTotal = task?.actualAmount || totals.actualTotal;

  const receivableRows = [
    { label: '总计应收车辆月租金', value: formatYuan(totals.receivableRent) },
    { label: '总计应收车辆保证金', value: formatYuan(totals.receivableDeposit) },
    { label: '总计应收服务费', value: formatYuan(totals.receivableService) },
  ];
  if (isFirstPeriod) receivableRows.push({ label: '氢费预付款应收金额', value: formatYuan(totals.hydrogenReceivable), highlight: true });

  const actualRows = [
    { label: '总计实收车辆月租金', value: formatYuan(totals.actualRent) },
    { label: '总计应收车辆保证金', value: formatYuan(totals.receivableDeposit) },
    { label: '总计实收服务费', value: formatYuan(totals.actualService) },
    { label: '总计减免金额', value: formatYuan(totals.discountTotal) },
    { label: '服务费各项减免费用总和', value: formatYuan(totals.serviceDiscountTotal) },
  ];
  if (isFirstPeriod) {
    actualRows.push({ label: '氢费预付款实收金额', value: formatYuan(totals.hydrogenActual), highlight: true });
    actualRows.push({ label: '氢费预付款减免金额', value: formatYuan(totals.hydrogenDiscount) });
  }

  const [decisionOpen, setDecisionOpen] = useState(false);
  const [decisionType, setDecisionType] = useState('approve');
  const [commentOpen, setCommentOpen] = useState(false);
  const showActions = mode === 'approve' || mode === 'view';

  const openDecision = (type) => { setDecisionType(type); setDecisionOpen(true); };
  const handleDecisionConfirm = (payload) => {
    const meta = APPROVAL_DECISION_META[payload.actionType];
    if (payload.actionType === 'reject' || payload.actionType === 'terminate') message.warning(meta?.success || '操作成功（原型）');
    else message.success(meta?.success || '操作成功（原型）');
    if (mode === 'approve') onBack();
  };

  return (
    <>
      <div className="tc-scroll">
        <div className="tc-hero tc-hero--bill">
          <div className="tc-hero-label">实收款总额</div>
          <div className="tc-hero-amount">{formatMoneySymbol(displayActualTotal)}</div>
          <div className="tc-hero-meta">
            <span>{billInfo.customerName}</span>
          </div>
          <div className="tc-hero-foot tc-hero-foot--compact">
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">合同编码</span>{billInfo.contractCode || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">项目名称</span>{billInfo.projectName || '—'}</div>
          </div>
          <div className="tc-hero-period">
            <span>账单周期：{billInfo.billStartDate}至{billInfo.billEndDate}</span>
            {billInfo.period != null && <span className="tc-hero-period-tag">第{billInfo.period}期</span>}
          </div>
          <div className="tc-hero-sub">
            <div className="tc-hero-compare">
              应收款总额 {formatMoneySymbol(totals.receivableTotal)}
              <br />
              开票总额 {formatMoneySymbol(totals.invoiceTotal)}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
              <button type="button" className="tc-hero-detail-btn" onClick={() => setReceivableDrawerOpen(true)}>应收明细</button>
              <button type="button" className="tc-hero-detail-btn" onClick={() => setActualDrawerOpen(true)}>实收明细</button>
            </div>
          </div>
        </div>

        <div className="tc-section">
          <div className="tc-section-head">
            <span className="tc-section-title">账单明细 · 车辆列表</span>
            <span className="tc-section-badge tc-section-badge--blue">{vehicles.length} 台</span>
          </div>
          {vehicles.map((v) => <ZlVehicleCard key={v.key} vehicle={v} isFirstPeriod={isFirstPeriod} />)}
        </div>

        {isFirstPeriod && (
          <div className="tc-section">
            <div className="tc-section-head"><span className="tc-section-title">氢费预付款情况</span></div>
            <div className="tc-kv-grid">
              <TcInfoRow label="氢费预付款应收金额" value={formatYuan(hydrogen.receivable)} />
              <TcInfoRow label="氢费预付款实收金额" value={formatYuan(hydrogen.actual)} />
              <TcInfoRow label="减免金额" value={formatYuan(hydrogen.discount)} />
              <TcInfoRow label="减免金额备注" value={hydrogen.discountRemark} full />
            </div>
          </div>
        )}

        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">审批情况</span></div>
          <div className="tc-timeline">
            {approvalSteps.map((step, idx) => (
              <div className="tc-step" key={idx}>
                <div className={`tc-step-dot ${step.status === '已通过' ? 'done' : 'wait--blue'}`}>{step.status === '已通过' ? '✓' : ''}</div>
                <div>
                  <div className="tc-step-title">{step.department}</div>
                  <div className="tc-step-meta">状态：{step.status}<br />审批人：{step.person}<br />时间：{step.approveTime}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: showActions ? 16 : 24 }} />
      </div>

      {showActions && !decisionOpen && !commentOpen && (
        <ApprovalActionBar
          mode={mode}
          onComment={() => setCommentOpen(true)}
          onTerminate={() => openDecision('terminate')}
          onReject={() => openDecision('reject')}
          onApprove={() => openDecision('approve')}
        />
      )}
      <ApprovalDecisionDrawer open={decisionOpen} actionType={decisionType} onClose={() => setDecisionOpen(false)} onConfirm={handleDecisionConfirm} />
      <ApprovalCommentDrawer open={commentOpen} onClose={() => setCommentOpen(false)} onConfirm={() => message.success('评论已添加（原型）')} />

      <TcMiniBottomSheet
        open={receivableDrawerOpen}
        title="应收款明细"
        onClose={() => setReceivableDrawerOpen(false)}
        rows={receivableRows}
        totalLabel="应收款总额"
        totalValue={formatMoneySymbol(totals.receivableTotal)}
        totalTheme="blue"
      />
      <TcMiniBottomSheet
        open={actualDrawerOpen}
        title="实收款明细"
        onClose={() => setActualDrawerOpen(false)}
        rows={actualRows}
        totalLabel="实收款总额"
        totalValue={formatMoneySymbol(displayActualTotal)}
        totalTheme="blue"
      />
    </>
  );
};

const DEFAULT_REPLACE_PAIRS = [
  {
    id: 'pair_1', replaceType: '永久替换', replaceReason: '车辆原因',
    replaceReasonDesc: '原车故障需维修，临时用替换车保障客户用车。',
    originalPlate: '浙A12345', originalBrand: '东风', originalModel: 'DFH1180',
    replacePlate: '浙A67890', replaceBrand: '福田', replaceModel: 'BJ1180',
  },
  {
    id: 'pair_2', replaceType: '临时替换', replaceReason: '客户原因', replaceFee: '500.00',
    replaceReasonDesc: '',
    originalPlate: '浙A55555', originalBrand: '重汽', originalModel: 'ZZ1160',
    replacePlate: '浙A66666', replaceBrand: '江淮', replaceModel: 'HFC1190',
  },
];

const buildReplaceVehicleDetail = (task) => {
  const pairs = (task?.pairs && task.pairs.length) ? task.pairs : DEFAULT_REPLACE_PAIRS;
  const projectInfo = {
    customerName: task?.customerName || '嘉兴某某物流有限公司',
    projectName: task?.projectName || '嘉兴氢能示范项目',
    projectType: task?.projectType || '租赁',
    contractCode: task?.contractCode || 'HT-ZL-2025-001',
    deliveryRegion: task?.deliveryRegion || '浙江省-嘉兴市',
  };
  const approvalSteps = task?.approvalSteps || [
    { title: '业务部主管', department: '业务部主管', status: '已通过', person: '姚守涛', approveTime: '2026-02-18 10:05' },
    { title: '事业部主管', department: '事业部主管', status: '已通过', person: '尚建华', approveTime: '2026-02-18 10:40' },
    { title: '运维主管', department: '运维主管', status: '待审批', person: '张明辉', approveTime: '—' },
  ];
  return { pairs, projectInfo, approvalSteps };
};

const VrReplaceVehicleCard = ({ pair, index }) => (
  <div className="tc-section">
    <div className="tc-section-head">
      <span className="tc-section-title">车辆替换 · #{index + 1}</span>
      <span className="tc-section-badge tc-section-badge--rose">{pair.replaceType || '—'}</span>
    </div>
    <div className="vr-replace-swap">
      <div className="vr-replace-side vr-replace-side--old">
        <span className="vr-replace-side-tag">被替换</span>
        <div className="tc-vehicle-plate">{pair.originalPlate || '—'}</div>
        <div className="tc-vehicle-model">{pair.originalBrand || '—'} · {pair.originalModel || '—'}</div>
      </div>
      <div className="vr-replace-mid" aria-hidden="true">
        <span className="vr-replace-mid-icon">→</span>
      </div>
      <div className="vr-replace-side vr-replace-side--new">
        <span className="vr-replace-side-tag">替换为</span>
        <div className="tc-vehicle-plate">{pair.replacePlate || '—'}</div>
        <div className="tc-vehicle-model">{pair.replaceBrand || '—'} · {pair.replaceModel || '—'}</div>
      </div>
    </div>
    <div className="tc-kv-grid vr-replace-reason">
      <TcInfoRow label="替换原因" value={pair.replaceReason} />
      {pair.replaceReason === '客户原因' ? (
        <TcInfoRow label="替换费用" value={pair.replaceFee ? formatMoneySymbol(pair.replaceFee) : '—'} />
      ) : null}
      <TcInfoRow label="替换原因说明" value={pair.replaceReasonDesc || '—'} full />
    </div>
  </div>
);

const getAuditPrdKey = (task) => {
  if (!task) return 'audit';
  if (task.flowType === '提车应收款') return 'audit-pickup';
  if (task.flowType === '还车应结款') return 'audit-return';
  if (task.flowType === '租赁账单') return 'audit-lease-bill';
  if (task.flowType === '替换车申请') return 'audit-replace';
  if (task.flowType === '车辆调拨') return task.transferStage === 'ops' ? 'audit-transfer-ops' : 'audit-transfer-create';
  return 'audit';
};

const ReplaceVehicleApprovePage = ({ task, mode, onBack }) => {
  const detail = useMemo(() => buildReplaceVehicleDetail(task), [task]);
  const { pairs, projectInfo, approvalSteps } = detail;
  const [decisionOpen, setDecisionOpen] = useState(false);
  const [decisionType, setDecisionType] = useState('approve');
  const [commentOpen, setCommentOpen] = useState(false);
  const showActions = mode === 'approve' || mode === 'view';

  const openDecision = (type) => { setDecisionType(type); setDecisionOpen(true); };
  const handleDecisionConfirm = (payload) => {
    const meta = APPROVAL_DECISION_META[payload.actionType];
    if (payload.actionType === 'reject' || payload.actionType === 'terminate') message.warning(meta?.success || '操作成功（原型）');
    else message.success(meta?.success || '操作成功（原型）');
    if (mode === 'approve') onBack();
  };

  return (
    <>
      <div className="tc-scroll">
        <div className="tc-hero tc-hero--replace">
          <div className="tc-hero-label">替换车辆</div>
          <div className="tc-hero-amount">{pairs.length} 台</div>
          <div className="tc-hero-meta">
            <span>{projectInfo.customerName}</span>
          </div>
          <div className="tc-hero-foot tc-hero-foot--compact">
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">合同编码</span>{projectInfo.contractCode || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">项目名称</span>{projectInfo.projectName || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">交车区域</span>{projectInfo.deliveryRegion || '—'}</div>
          </div>
          <div className="tc-hero-period">
            <span className="tc-hero-period-tag">{projectInfo.projectType || '租赁'}</span>
          </div>
        </div>

        {pairs.map((pair, index) => (
          <VrReplaceVehicleCard key={pair.id || index} pair={pair} index={index} />
        ))}

        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">审批情况</span></div>
          <div className="tc-timeline">
            {approvalSteps.map((step, idx) => (
              <div className="tc-step" key={idx}>
                <div className={`tc-step-dot ${step.status === '已通过' ? 'done' : 'wait--rose'}`}>{step.status === '已通过' ? '✓' : ''}</div>
                <div>
                  <div className="tc-step-title">{step.department || step.title}</div>
                  <div className="tc-step-meta">状态：{step.status}<br />审批人：{step.person}<br />时间：{step.approveTime}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ height: showActions ? 16 : 24 }} />
      </div>

      {showActions && !decisionOpen && !commentOpen && (
        <ApprovalActionBar mode={mode} onComment={() => setCommentOpen(true)} onTerminate={() => openDecision('terminate')} onReject={() => openDecision('reject')} onApprove={() => openDecision('approve')} />
      )}
      <ApprovalDecisionDrawer open={decisionOpen} actionType={decisionType} onClose={() => setDecisionOpen(false)} onConfirm={handleDecisionConfirm} />
      <ApprovalCommentDrawer open={commentOpen} onClose={() => setCommentOpen(false)} onConfirm={() => message.success('评论已添加（原型）')} />
    </>
  );
};

const ApprovalCenterModule = ({ onRegisterBack, onPrdKeyChange }) => {
  const [mainTab, setMainTab] = useState('todo');
  const [flowFilter, setFlowFilter] = useState('');
  const [searchKey, setSearchKey] = useState('');
  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
  const [detailTask, setDetailTask] = useState(null);

  useEffect(() => {
    onPrdKeyChange?.(getAuditPrdKey(detailTask));
    return () => onPrdKeyChange?.(null);
  }, [detailTask, onPrdKeyChange]);

  const tabCounts = useMemo(() => {
    const counts = { initiated: 0, todo: 0, done: 0, cc: 0 };
    AC_MOCK_TASKS.forEach((t) => {
      AC_TAB_ITEMS.forEach((tab) => {
        if (acFilterByTab(t, tab.key, MOCK_USER)) counts[tab.key] += 1;
      });
    });
    return counts;
  }, []);

  const filteredList = useMemo(() => {
    const q = searchKey.trim().toLowerCase();
    let list = AC_MOCK_TASKS.filter((t) => acFilterByTab(t, mainTab, MOCK_USER));
    if (flowFilter) list = list.filter((t) => t.flowType === flowFilter);
    if (q) {
      list = list.filter(
        (t) =>
          t.bizNo.toLowerCase().includes(q)
          || t.summary.toLowerCase().includes(q)
          || t.flowType.toLowerCase().includes(q)
          || t.initiator.toLowerCase().includes(q)
          || (t.customerName && t.customerName.toLowerCase().includes(q))
          || (t.projectName && t.projectName.toLowerCase().includes(q))
          || (t.plateNo && t.plateNo.toLowerCase().includes(q))
      );
    }
    return [...list].sort((a, b) => String(b.arriveTime || b.initiateTime || '').localeCompare(String(a.arriveTime || a.initiateTime || '')));
  }, [mainTab, flowFilter, searchKey]);

  const handleCardClick = useCallback((task) => {
    if (task.flowType === '提车应收款' || task.flowType === '还车应结款' || task.flowType === '租赁账单' || task.flowType === '车辆调拨' || task.flowType === '替换车申请') {
      setDetailTask(task);
      return;
    }
    if (mainTab === 'todo') message.info(`打开「${task.flowType}」审批办理页（原型）\n单据：${task.bizNo}`);
    else message.info(`查看「${task.flowType}」详情（原型）\n单据：${task.bizNo}`);
  }, [mainTab]);

  useEffect(() => {
    if (!onRegisterBack) return undefined;
    onRegisterBack(() => {
      if (detailTask) { setDetailTask(null); return true; }
      return false;
    });
    return () => onRegisterBack(null);
  }, [detailTask, onRegisterBack]);

  if (detailTask) {
    const flowType = detailTask.flowType;
    const Detail = flowType === '还车应结款'
      ? ReturnSettlementApprovePage
      : flowType === '租赁账单'
        ? LeaseBillApprovePage
        : flowType === '车辆调拨'
          ? (detailTask.transferStage === 'ops' ? TransferOpsApprovePage : TransferCreateApprovePage)
          : flowType === '替换车申请'
            ? ReplaceVehicleApprovePage
            : PickupReceivableApprovePage;
    return (
      <div className="xll-mod-root">
        <div className="xll-mod-detail-wrap">
          <Detail task={detailTask} mode={mainTab === 'todo' ? 'approve' : 'view'} onBack={() => setDetailTask(null)} />
        </div>
      </div>
    );
  }

  const activeTabLabel = AC_TAB_ITEMS.find((t) => t.key === mainTab)?.label || '';

  return (
    <div className="xll-mod-root">
      <div className="xll-mod-tabs" role="tablist" aria-label="审批列表分类">
        {AC_TAB_ITEMS.map((tab) => (
          <button
            key={tab.key}
            type="button"
            role="tab"
            aria-selected={mainTab === tab.key}
            className={`xll-mod-tab${mainTab === tab.key ? ' active' : ''}`}
            onClick={() => setMainTab(tab.key)}
          >
            {tab.short}
            <span className="xll-mod-tab-count">{tabCounts[tab.key]} 条</span>
          </button>
        ))}
      </div>
      <div className="xll-mod-toolbar">
        <div className="xll-mod-search">
          <IconSearch />
          <input type="search" placeholder="搜索单据号、摘要、发起人" value={searchKey} onChange={(e) => setSearchKey(e.target.value)} aria-label="搜索审批任务" />
        </div>
        <div className="xll-mod-chips" role="group" aria-label="流程类型筛选">
          <button type="button" className={`xll-mod-chip${!flowFilter ? ' active' : ''}`} onClick={() => setFlowFilter('')}>全部</button>
          {AC_QUICK_FILTERS.map((type) => (
            <button key={type} type="button" className={`xll-mod-chip${flowFilter === type ? ' active' : ''}`} onClick={() => setFlowFilter(flowFilter === type ? '' : type)}>{type}</button>
          ))}
          <button type="button" className="xll-mod-chip" style={{ borderStyle: 'dashed' }} onClick={() => setFilterDrawerOpen(true)}>更多类型</button>
        </div>
      </div>
      <div className="xll-mod-list-head"><span>{activeTabLabel}</span><span>共 {filteredList.length} 条</span></div>
      <div className="xll-mod-list">
        {filteredList.length === 0 ? (
          <div className="xll-mod-empty">暂无{activeTabLabel}任务<br />{searchKey || flowFilter ? '试试清空搜索或切换流程类型' : '新的审批任务到达后将在此展示'}</div>
        ) : (
          filteredList.map((task) => {
            const theme = AC_FLOW_THEME[task.flowType] || { accent: XLL_GREEN_DEEP, soft: XLL_GREEN_SOFT };
            const stCls = acStatusClass(task.status);
            const isPickup = task.flowType === '提车应收款';
            const isReturn = task.flowType === '还车应结款';
            const isBill = task.flowType === '租赁账单';
            const isTransfer = task.flowType === '车辆调拨';
            const isReplace = task.flowType === '替换车申请';
            const isCustomerFlow = isBill || isPickup || isReturn || isReplace;
            const returnSettle = isReturn ? acReturnSettleDisplay(task) : null;
            const statusLabel = acTaskStatusLabel(task);
            return (
              <div
                key={task.id}
                className="xll-mod-card"
                style={{ '--mod-accent': theme.accent, '--mod-soft': theme.soft }}
                role="button"
                tabIndex={0}
                onClick={() => handleCardClick(task)}
                onKeyDown={(e) => e.key === 'Enter' && handleCardClick(task)}
              >
                <div className="xll-mod-card-head">
                  <span className="xll-mod-card-type">{task.flowType}</span>
                  <span className={`xll-mod-card-status ${stCls}${statusLabel !== task.status ? ' with-approvers' : ''}`}>{statusLabel}</span>
                </div>
                <div className="xll-mod-card-title">
                  {isCustomerFlow ? (task.customerName || '—') : isTransfer ? acTransferRouteTitle(task) : task.bizNo}
                </div>
                {!isTransfer && (
                  <div className="xll-mod-card-sub">
                    {isCustomerFlow ? (task.projectName || '—') : task.summary}
                  </div>
                )}
                {isBill && task.billStartDate && task.billEndDate && (
                  <div className="xll-mod-card-period">
                    <span>账单周期：{task.billStartDate}至{task.billEndDate}</span>
                    {task.period != null && <span className="xll-mod-card-period-tag">第{task.period}期</span>}
                  </div>
                )}
                {isTransfer && (
                  <>
                    <div className="xll-mod-card-vehicles">
                      {acTransferVehicleLines(task.vehicles).map((row) => (
                        <div key={row.label} className="xll-mod-card-vehicle-line">{row.label} {row.count}台</div>
                      ))}
                    </div>
                    {task.transferDate && (
                      <div className="xll-mod-card-period">
                        <span>调拨日期：{task.transferDate}</span>
                      </div>
                    )}
                  </>
                )}
                {isReplace && (task.pairs || []).length > 0 && (
                  <div className="xll-mod-card-vehicles">
                    {(task.pairs || []).map((p) => (
                      <div key={p.id || p.originalPlate} className="xll-mod-card-vehicle-line">{p.originalPlate} → {p.replacePlate}</div>
                    ))}
                  </div>
                )}
                <div className="xll-mod-meta">
                  <div><span className="xll-mod-meta-label">发起人 </span><span className="xll-mod-meta-val">{task.initiator}</span></div>
                  {isPickup && <div><span className="xll-mod-meta-label">实收金额 </span><span className="xll-mod-meta-val" style={{ color: '#F97316', fontWeight: 700 }}>{formatMoney(task.actualAmount)}</span></div>}
                  {isBill && <div><span className="xll-mod-meta-label">实收金额 </span><span className="xll-mod-meta-val" style={{ color: '#0EA5E9', fontWeight: 700 }}>{formatMoney(task.actualAmount)}</span></div>}
                  {returnSettle && <div><span className="xll-mod-meta-label">{returnSettle.label} </span><span className="xll-mod-meta-val" style={{ color: '#8B5CF6', fontWeight: 700 }}>{formatMoney(returnSettle.amount)}</span></div>}
                  {isReplace && <div><span className="xll-mod-meta-label">替换车辆 </span><span className="xll-mod-meta-val" style={{ color: '#F43F5E', fontWeight: 700 }}>{(task.pairs || []).length || task.vehicleCount || 0} 台</span></div>}
                </div>
                <div className="xll-mod-card-foot">
                  <span style={{ fontSize: 12, color: COLOR_MUTED }}>发起时间 {task.initiateTime}</span>
                  {mainTab === 'todo' && (
                    <button type="button" className="xll-mod-card-btn" onClick={(e) => { e.stopPropagation(); handleCardClick(task); }}>去审批</button>
                  )}
                </div>
              </div>
            );
          })
        )}
      </div>
      {Drawer ? (
        <Drawer title="选择流程类型" placement="bottom" height={420} open={filterDrawerOpen} onClose={() => setFilterDrawerOpen(false)} styles={{ body: { padding: '12px 16px 24px' } }}>
          <div className="xll-mod-drawer-types">
            <button type="button" className={`xll-mod-drawer-type-btn${!flowFilter ? ' active' : ''}`} onClick={() => { setFlowFilter(''); setFilterDrawerOpen(false); }}>全部类型</button>
            {AC_FLOW_TYPES.map((type) => (
              <button key={type} type="button" className={`xll-mod-drawer-type-btn${flowFilter === type ? ' active' : ''}`} onClick={() => { setFlowFilter(type); setFilterDrawerOpen(false); }}>{type}</button>
            ))}
          </div>
        </Drawer>
      ) : null}
    </div>
  );
};

const AnnualReviewModule = ({ onRegisterBack }) => {
  const [mainTab, setMainTab] = useState('pending');
  const [searchKey, setSearchKey] = useState('');
  const [operateTask, setOperateTask] = useState(null);
  const [historyTask, setHistoryTask] = useState(null);
  const [form, setForm] = useState({ station: '嘉兴机动车检测站', cost: '380', validUntil: '2027-07-31', remark: '' });
  const [tasks, setTasks] = useState(AR_MOCK_TASKS);

  const filteredList = useMemo(() => {
    const q = searchKey.trim().toUpperCase();
    let list = tasks.filter((t) => t.tab === mainTab);
    if (q) list = list.filter((t) => t.plateNo.toUpperCase().includes(q));
    return mainTab === 'pending' ? arSortPending(list) : list;
  }, [tasks, mainTab, searchKey]);

  const tabCounts = useMemo(() => ({
    pending: tasks.filter((t) => t.tab === 'pending').length,
    history: tasks.filter((t) => t.tab === 'history').length,
  }), [tasks]);

  const handleCardClick = useCallback((task) => {
    if (task.tab === 'pending') {
      setForm({ station: '嘉兴机动车检测站', cost: '380', validUntil: '2027-07-31', remark: '' });
      setOperateTask(task);
      return;
    }
    setHistoryTask(task);
  }, []);

  const handleSubmit = useCallback(() => {
    if (!form.station || !form.cost || !form.validUntil) {
      message.warning('请填写检测服务站、费用和检验有效期');
      return;
    }
    setTasks((prev) => prev.filter((t) => t.id !== operateTask.id).concat({
      ...operateTask,
      tab: 'history',
      executor: MOCK_USER,
      executeTime: '2026-06-01 10:00',
      newValidUntil: form.validUntil,
      station: form.station,
      cost: form.cost,
    }));
    message.success('年审办理完成（原型）');
    setOperateTask(null);
  }, [form, operateTask]);

  useEffect(() => {
    if (!onRegisterBack) return undefined;
    onRegisterBack(() => {
      if (operateTask) { setOperateTask(null); return true; }
      if (historyTask) { setHistoryTask(null); return true; }
      return false;
    });
    return () => onRegisterBack(null);
  }, [operateTask, historyTask, onRegisterBack]);

  if (historyTask) {
    const t = historyTask;
    return (
      <div className="xll-mod-root">
        <div className="xll-mod-scroll" style={{ paddingBottom: 24 }}>
          <div className="xll-mod-hero green">
            <div className="xll-mod-hero-label">检验有效期</div>
            <div className="xll-mod-hero-amt" style={{ fontSize: 22 }}>{t.newValidUntil || t.expireDate}</div>
            <div className="xll-mod-hero-meta">{t.plateNo} · {t.brand} {t.model}</div>
          </div>
          <div className="xll-mod-section">
            <div className="xll-mod-section-title">办理记录</div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">办理人</span><span className="xll-mod-form-value">{t.executor}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">完成时间</span><span className="xll-mod-form-value">{t.executeTime}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">检测服务站</span><span className="xll-mod-form-value">{t.station || '—'}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">费用</span><span className="xll-mod-form-value">{t.cost ? formatMoneySymbol(t.cost) : '—'}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">运营区域</span><span className="xll-mod-form-value">{t.province} {t.city}</span></div>
          </div>
        </div>
      </div>
    );
  }

  if (operateTask) {
    const t = operateTask;
    return (
      <div className="xll-mod-root">
        <div className="xll-mod-scroll">
          <div className="xll-mod-section">
            <div className="xll-mod-section-title">车辆信息</div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">车牌号</span><span className="xll-mod-form-value xll-mod-ar-plate">{t.plateNo}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">品牌型号</span><span className="xll-mod-form-value">{t.brand} · {t.model}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">检验有效期</span><span className="xll-mod-form-value">{t.expireDate}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">运营状态</span><span className="xll-mod-form-value">{t.operateStatus}</span></div>
          </div>
          <div className="xll-mod-section">
            <div className="xll-mod-section-title">更新行驶证</div>
            <div className="xll-mod-upload" onClick={() => message.info('上传行驶证照片（原型）')} role="button" tabIndex={0}>点击上传行驶证照片<br /><span style={{ fontSize: 12 }}>上传后自动识别检验有效期</span></div>
            <div className="xll-mod-form-row">
              <span className="xll-mod-form-label">检验有效期</span>
              <input className="xll-mod-form-input" type="date" value={form.validUntil} onChange={(e) => setForm((f) => ({ ...f, validUntil: e.target.value }))} />
            </div>
          </div>
          <div className="xll-mod-section">
            <div className="xll-mod-section-title">检测服务站信息</div>
            <div className="xll-mod-form-row">
              <span className="xll-mod-form-label">检测服务站</span>
              <input className="xll-mod-form-input" value={form.station} onChange={(e) => setForm((f) => ({ ...f, station: e.target.value }))} placeholder="请选择" />
            </div>
            <div className="xll-mod-form-row">
              <span className="xll-mod-form-label">费用（￥）</span>
              <input className="xll-mod-form-input" type="number" value={form.cost} onChange={(e) => setForm((f) => ({ ...f, cost: e.target.value }))} placeholder="0.00" />
            </div>
            <div className="xll-mod-form-row">
              <span className="xll-mod-form-label">备注</span>
              <input className="xll-mod-form-input" value={form.remark} onChange={(e) => setForm((f) => ({ ...f, remark: e.target.value }))} placeholder="检测备注" />
            </div>
          </div>
        </div>
        <div className="xll-mod-foot-btns">
          <button type="button" style={{ background: COLOR_PAGE, color: COLOR_TEXT_SEC, border: `1px solid ${COLOR_LINE}` }} onClick={() => { message.success('草稿已保存（原型）'); }}>保存</button>
          <button type="button" style={{ background: XLL_GREEN, color: '#fff' }} onClick={handleSubmit}>提交</button>
        </div>
      </div>
    );
  }

  return (
    <div className="xll-mod-root">
      <div className="xll-mod-tabs" role="tablist">
        <button type="button" role="tab" aria-selected={mainTab === 'pending'} className={`xll-mod-tab${mainTab === 'pending' ? ' active' : ''}`} onClick={() => setMainTab('pending')}>
          待处理<span className="xll-mod-tab-count">{tabCounts.pending} 辆</span>
        </button>
        <button type="button" role="tab" aria-selected={mainTab === 'history'} className={`xll-mod-tab${mainTab === 'history' ? ' active' : ''}`} onClick={() => setMainTab('history')}>
          历史记录<span className="xll-mod-tab-count">{tabCounts.history} 辆</span>
        </button>
      </div>
      <div className="xll-mod-toolbar">
        <div className="xll-mod-search">
          <IconSearch />
          <input type="search" placeholder="搜索车牌号" value={searchKey} onChange={(e) => setSearchKey(e.target.value)} aria-label="搜索车牌" />
        </div>
      </div>
      <div className="xll-mod-list-head"><span>{mainTab === 'pending' ? '待办任务' : '历史记录'}</span><span>共 {filteredList.length} 辆</span></div>
      <div className="xll-mod-list">
        {filteredList.length === 0 ? (
          <div className="xll-mod-empty">暂无{mainTab === 'pending' ? '待办' : '历史'}年审任务</div>
        ) : (
          filteredList.map((task) => {
            const tag = arDaysTag(task);
            return (
              <div key={task.id} className="xll-mod-card" style={{ '--mod-accent': COLOR_WARN, '--mod-soft': 'rgba(255,125,0,.12)' }} role="button" tabIndex={0} onClick={() => handleCardClick(task)} onKeyDown={(e) => e.key === 'Enter' && handleCardClick(task)}>
                <div className="xll-mod-card-head">
                  <span className="xll-mod-ar-plate">{task.plateNo}{tag ? <span className={`xll-mod-ar-tag ${tag.cls}`}>{tag.text}</span> : null}</span>
                </div>
                <div className="xll-mod-meta">
                  <div><span className="xll-mod-meta-label">运营状态 </span><span className="xll-mod-meta-val">{task.operateStatus}</span></div>
                  <div><span className="xll-mod-meta-label">运营区域 </span><span className="xll-mod-meta-val">{task.province} {task.city}</span></div>
                  <div><span className="xll-mod-meta-label">到期时间 </span><span className="xll-mod-meta-val">{task.expireDate}</span></div>
                  {task.tab === 'history' && (
                    <div><span className="xll-mod-meta-label">办理人 </span><span className="xll-mod-meta-val">{task.executor}</span></div>
                  )}
                </div>
                {task.tab === 'pending' && (
                  <div className="xll-mod-card-foot">
                    <span style={{ fontSize: 12, color: COLOR_MUTED }}>{task.brand} · {task.model}</span>
                    <button type="button" className="xll-mod-card-btn" onClick={(e) => { e.stopPropagation(); handleCardClick(task); }}>去办理</button>
                  </div>
                )}
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};

const DeliveryModule = ({ onRegisterBack }) => {
  const [orders, setOrders] = useState(DV_MOCK_ORDERS);
  const [listFilter, setListFilter] = useState('inProgress');
  const [statusFilter, setStatusFilter] = useState('');
  const [searchKey, setSearchKey] = useState('');
  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
  const [moreFilter, setMoreFilter] = useState(DV_EMPTY_MORE_FILTER);
  const [moreFilterDraft, setMoreFilterDraft] = useState(DV_EMPTY_MORE_FILTER);
  const [activeRow, setActiveRow] = useState(null);
  const [formStep, setFormStep] = useState(0);
  const [formDraft, setFormDraft] = useState(null);

  const rows = useMemo(() => dvFlattenOrders(orders), [orders]);

  const kpi = useMemo(() => ({
    all: rows.length,
    inProgress: rows.filter((r) => dvIsInProgressStatus(r.deliveryStatus)).length,
    completed: rows.filter((r) => dvIsHistoryStatus(r.deliveryStatus)).length,
  }), [rows]);

  const activeMoreFilterCount = useMemo(() => {
    let n = 0;
    if (moreFilter.customerName.trim()) n += 1;
    if (moreFilter.projectName.trim()) n += 1;
    if (moreFilter.dateStart || moreFilter.dateEnd) n += 1;
    return n;
  }, [moreFilter]);

  const filteredList = useMemo(() => {
    const q = searchKey.trim().toUpperCase();
    const customerQ = moreFilter.customerName.trim();
    const projectQ = moreFilter.projectName.trim();
    let list = rows;
    if (listFilter === 'inProgress') list = list.filter((r) => dvIsInProgressStatus(r.deliveryStatus));
    if (listFilter === 'completed') list = list.filter((r) => dvIsHistoryStatus(r.deliveryStatus));
    if (statusFilter) list = list.filter((r) => r.deliveryStatus === statusFilter);
    if (q) list = list.filter((r) => dvDisplayPlate(r.plateNo).toUpperCase().includes(q));
    if (customerQ) list = list.filter((r) => (r.customerName || '').includes(customerQ));
    if (projectQ) list = list.filter((r) => (r.projectName || '').includes(projectQ));
    if (moreFilter.dateStart || moreFilter.dateEnd) {
      list = list.filter((r) => dvRowMatchesDateRange(r, moreFilter.dateStart, moreFilter.dateEnd));
    }
    return list;
  }, [rows, listFilter, statusFilter, searchKey, moreFilter]);

  const readOnly = activeRow && (dvIsHistoryStatus(activeRow.deliveryStatus) || activeRow.deliveryStatus === '待客户签章');
  const plateOptions = useMemo(() => {
    const addr = activeRow?.deliveryAddress || '';
    return DV_RESERVE_PLATES.filter((p) => !addr || p.parkingLot === addr || addr.indexOf(p.parkingLot.slice(0, 2)) >= 0);
  }, [activeRow]);

  const patchRow = useCallback((rowId, patch) => {
    setOrders((prev) => prev.map((order) => {
      const has = (order.vehicleList || []).some((v) => `${order.id}-${v.vehicleKey}` === rowId);
      if (!has) return order;
      return {
        ...order,
        vehicleList: order.vehicleList.map((v) => {
          if (`${order.id}-${v.vehicleKey}` !== rowId) return v;
          return { ...v, ...patch };
        }),
      };
    }));
  }, []);

  const openRow = useCallback((row) => {
    setActiveRow(row);
    setFormDraft(dvBuildEmptyForm(row));
    setFormStep(0);
  }, []);

  const closeForm = useCallback(() => {
    setActiveRow(null);
    setFormDraft(null);
    setFormStep(0);
  }, []);

  const syncActiveRow = useCallback(() => {
    if (!activeRow) return;
    const next = dvFlattenOrders(orders).find((r) => r.id === activeRow.id);
    if (next) setActiveRow(next);
  }, [activeRow, orders]);

  useEffect(() => { syncActiveRow(); }, [orders, syncActiveRow]);

  const handlePlatePick = useCallback((plateNo) => {
    const picked = DV_RESERVE_PLATES.find((p) => p.plateNo === plateNo);
    setFormDraft((f) => ({
      ...f,
      plateNo,
      brand: picked?.brand || f.brand,
      model: picked?.model || f.model,
      vin: picked?.vin || f.vin,
    }));
  }, []);

  const handleSave = useCallback(() => {
    if (!activeRow || !formDraft) return;
    patchRow(activeRow.id, {
      ...formDraft,
      deliveryMileage: formDraft.deliveryMileage === '' ? null : Number(formDraft.deliveryMileage),
      deliveryH2: formDraft.deliveryH2 === '' ? null : Number(formDraft.deliveryH2),
      deliveryElec: formDraft.deliveryElec === '' ? null : Number(formDraft.deliveryElec),
      deliveryTime: formDraft.deliveryTime ? formDraft.deliveryTime.replace('T', ' ') : '',
      deliveryStatus: '已保存',
    });
    message.success('交车单已保存（原型）');
  }, [activeRow, formDraft, patchRow]);

  const handleSubmit = useCallback(() => {
    if (!activeRow || !formDraft) return;
    if (!formDraft.plateNo) {
      message.warning('请先选择交车车牌');
      setFormStep(0);
      return;
    }
    if (!formDraft.deliveryMileage || !formDraft.deliveryH2 || !formDraft.deliveryElec) {
      message.warning('请填写交车里程、氢量与电量');
      setFormStep(2);
      return;
    }
    patchRow(activeRow.id, {
      ...formDraft,
      deliveryMileage: Number(formDraft.deliveryMileage),
      deliveryH2: Number(formDraft.deliveryH2),
      deliveryElec: Number(formDraft.deliveryElec),
      deliveryTime: formDraft.deliveryTime ? formDraft.deliveryTime.replace('T', ' ') : '2026-06-04 10:00',
      deliveryPerson: MOCK_USER,
      deliveryStatus: '待客户签章',
    });
    message.success('已提交，等待客户签章（原型）');
    closeForm();
  }, [activeRow, formDraft, patchRow, closeForm]);

  useEffect(() => {
    if (!onRegisterBack) return undefined;
    onRegisterBack(() => {
      if (activeRow) { closeForm(); return true; }
      return false;
    });
    return () => onRegisterBack(null);
  }, [activeRow, closeForm, onRegisterBack]);

  const renderFormField = (label, value, editor) => (
    <div className="xll-mod-form-row">
      <span className="xll-mod-form-label">{label}</span>
      {readOnly || !editor ? <span className={`xll-mod-form-value${readOnly ? ' xll-dv-view-val' : ''}`}>{value || '—'}</span> : editor}
    </div>
  );

  const renderStepContent = () => {
    if (!activeRow || !formDraft) return null;
    const r = activeRow;
    const f = formDraft;
    if (formStep === 0) {
      const st = dvStatusTag(r.deliveryStatus);
      return (
        <>
          <div className="tc-hero tc-hero--delivery">
            <div className="tc-hero-amount" style={{ fontSize: 22 }}>{r.customerName || '—'}</div>
            <div className="tc-hero-meta"><span>{r.projectName || '—'}</span></div>
            <div className="tc-hero-foot tc-hero-foot--compact">
              <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">交车区域</span>{r.deliveryRegion || '—'}</div>
              <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">计划交车</span>{dvFormatExpectedDate(r.expectedDate)}</div>
            </div>
            <div className="tc-hero-period">
              <span className="tc-hero-period-tag">{r.bizType || '租赁'}</span>
              {r.replaceOldPlate ? <span>替换旧车 {r.replaceOldPlate}</span> : null}
            </div>
          </div>
          <div className="tc-section">
            <div className="tc-section-head">
              <span className="tc-section-title">交车信息</span>
              <span className={`xll-dv-status ${st.cls}`}>{st.text}</span>
            </div>
            <div className="tc-section-hint">车牌下拉仅展示「已备车」且停车场在运维权限范围内的车辆。</div>
            <div className="tc-section-form">
              {renderFormField('业务类型', r.bizType, null)}
              {renderFormField('任务来源', r.taskSource, null)}
              {renderFormField('业务部门', r.businessDept, null)}
              {renderFormField('业务负责人', r.businessOwner, null)}
              {renderFormField('创建时间', r.createTime, null)}
              {renderFormField('车牌号', dvDisplayPlate(f.plateNo), readOnly ? null : (
                <select className="xll-mod-form-input" value={f.plateNo} onChange={(e) => handlePlatePick(e.target.value)} aria-label="选择车牌">
                  <option value="">请选择车牌</option>
                  {plateOptions.map((p) => (
                    <option key={p.plateNo} value={p.plateNo}>{p.plateNo} · {p.parkingLot}</option>
                  ))}
                </select>
              ))}
              {renderFormField('品牌型号', `${f.brand || r.brand} · ${f.model || r.model}`, null)}
              {renderFormField('VIN', f.vin || r.vin, readOnly ? null : (
                <input className="xll-mod-form-input" value={f.vin} onChange={(e) => setFormDraft((d) => ({ ...d, vin: e.target.value }))} placeholder="车架号" />
              ))}
            </div>
          </div>
        </>
      );
    }
    if (formStep === 1) {
      const yesNoOpts = ['', '有', '无'];
      const trainOpts = ['', '已完成', '未完成', '无需培训'];
      return (
        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">车辆信息</span></div>
          <div className="tc-section-hint">请核对广告、尾板、备胎及驾驶培训情况；照片上传说明见下一步。</div>
          <div className="tc-section-form">
          {renderFormField('车身广告', f.hasAd || '—', readOnly ? null : (
            <select className="xll-mod-form-input" value={f.hasAd} onChange={(e) => setFormDraft((d) => ({ ...d, hasAd: e.target.value }))}>
              {yesNoOpts.map((o) => <option key={o || 'empty'} value={o}>{o || '请选择'}</option>)}
            </select>
          ))}
          {renderFormField('尾板', f.hasTailgate || '—', readOnly ? null : (
            <select className="xll-mod-form-input" value={f.hasTailgate} onChange={(e) => setFormDraft((d) => ({ ...d, hasTailgate: e.target.value }))}>
              {yesNoOpts.map((o) => <option key={`t-${o || 'e'}`} value={o}>{o || '请选择'}</option>)}
            </select>
          ))}
          {renderFormField('备胎', f.spareTire || '—', readOnly ? null : (
            <select className="xll-mod-form-input" value={f.spareTire} onChange={(e) => setFormDraft((d) => ({ ...d, spareTire: e.target.value }))}>
              {yesNoOpts.map((o) => <option key={`s-${o || 'e'}`} value={o}>{o || '请选择'}</option>)}
            </select>
          ))}
          {renderFormField('驾驶培训', f.driverTraining || '—', readOnly ? null : (
            <select className="xll-mod-form-input" value={f.driverTraining} onChange={(e) => setFormDraft((d) => ({ ...d, driverTraining: e.target.value }))}>
              {trainOpts.map((o) => <option key={`d-${o || 'e'}`} value={o}>{o || '请选择'}</option>)}
            </select>
          ))}
          </div>
        </div>
      );
    }
    if (formStep === 2) {
      return (
        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">交车数据</span></div>
          <div className="tc-section-form">
          {renderFormField('交车时间', f.deliveryTime ? f.deliveryTime.replace('T', ' ') : (r.deliveryTime || '—'), readOnly ? null : (
            <input className="xll-mod-form-input" type="datetime-local" value={f.deliveryTime} onChange={(e) => setFormDraft((d) => ({ ...d, deliveryTime: e.target.value }))} />
          ))}
          {renderFormField('交车里程(km)', dvFormatMileage(f.deliveryMileage), readOnly ? null : (
            <input className="xll-mod-form-input" type="number" value={f.deliveryMileage} onChange={(e) => setFormDraft((d) => ({ ...d, deliveryMileage: e.target.value }))} placeholder="0" />
          ))}
          {renderFormField('氢量', dvFormatH2(f.deliveryH2, f.deliveryH2Unit), readOnly ? null : (
            <span style={{ display: 'flex', gap: 6, flex: 1, justifyContent: 'flex-end' }}>
              <input className="xll-mod-form-input" type="number" value={f.deliveryH2} onChange={(e) => setFormDraft((d) => ({ ...d, deliveryH2: e.target.value }))} placeholder="0" style={{ maxWidth: 80 }} />
              <select className="xll-mod-form-input" value={f.deliveryH2Unit} onChange={(e) => setFormDraft((d) => ({ ...d, deliveryH2Unit: e.target.value }))} style={{ maxWidth: 72 }}>
                <option value="%">%</option>
                <option value="MPa">MPa</option>
              </select>
            </span>
          ))}
          {renderFormField('电量(%)', f.deliveryElec ? `${f.deliveryElec}%` : '—', readOnly ? null : (
            <input className="xll-mod-form-input" type="number" value={f.deliveryElec} onChange={(e) => setFormDraft((d) => ({ ...d, deliveryElec: e.target.value }))} placeholder="0" />
          ))}
          {readOnly && r.deliveryPerson ? renderFormField('交车人', r.deliveryPerson, null) : null}
          </div>
        </div>
      );
    }
    if (formStep === 3) {
      return (
        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">交车照片</span></div>
          <div className="tc-section-hint">请按模块上传交车照片；支持拍照或相册，单张不超过 10MB（原型模拟）。</div>
          {DV_PHOTO_SECTIONS.map((sec) => (
            <div key={sec.key} className="xll-dv-photo-block">
              <div className="xll-dv-photo-title">{sec.label}</div>
              <div className="xll-dv-photo-grid">
                {[0, 1, 2].map((i) => (
                  <div
                    key={i}
                    className="xll-dv-photo-slot"
                    role="button"
                    tabIndex={0}
                    onClick={() => !readOnly && message.info(`上传${sec.label}（原型）`)}
                    onKeyDown={(e) => e.key === 'Enter' && !readOnly && message.info(`上传${sec.label}（原型）`)}
                  >
                    {readOnly && sec.key === 'body' && i === 0 ? '已上传' : '+ 添加'}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      );
    }
    const st = dvStatusTag(r.deliveryStatus);
    return (
      <>
        <div className="tc-hero tc-hero--delivery">
          <div className="tc-hero-label">交车确认</div>
          <div className="tc-hero-amount" style={{ fontSize: 20 }}>{dvDisplayPlate(f.plateNo)}</div>
          <div className="tc-hero-meta"><span>{r.customerName || '—'}</span></div>
          <div className="tc-hero-foot tc-hero-foot--compact">
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">项目</span>{r.projectName || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">交车区域</span>{r.deliveryRegion || '—'}</div>
            <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">状态</span><span className={`xll-dv-status ${st.cls}`} style={{ marginLeft: 0 }}>{st.text}</span></div>
          </div>
        </div>
        <div className="tc-section">
          <div className="tc-section-head"><span className="tc-section-title">交车摘要</span></div>
          <div className="tc-section-form">
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">里程/氢/电</span><span className="xll-mod-form-value">{dvFormatMileage(f.deliveryMileage)} · {dvFormatH2(f.deliveryH2, f.deliveryH2Unit)} · {f.deliveryElec ? `${f.deliveryElec}%` : '—'}</span></div>
            <div className="xll-mod-form-row"><span className="xll-mod-form-label">交车时间</span><span className="xll-mod-form-value">{dvDisplayActualTime(f.deliveryTime || r.deliveryTime)}</span></div>
            {r.deliveryPerson ? <div className="xll-mod-form-row"><span className="xll-mod-form-label">交车人</span><span className="xll-mod-form-value">{r.deliveryPerson}</span></div> : null}
          </div>
        </div>
        {dvIsHistoryStatus(r.deliveryStatus) && (
          <div className="tc-section">
            <div className="tc-section-head"><span className="tc-section-title">E签宝签章文件</span></div>
            <div className="tc-section-form">
              <div className="xll-mod-upload" role="button" tabIndex={0} onClick={() => message.success('下载签章 PDF（原型）')} onKeyDown={(e) => e.key === 'Enter' && message.success('下载签章 PDF（原型）')}>
                交车确认单_已签章.pdf<br /><span style={{ fontSize: 12 }}>点击预览或下载</span>
              </div>
              {r.vehicleReturned != null && (
                <div className="xll-mod-form-row"><span className="xll-mod-form-label">是否归还</span><span className="xll-mod-form-value">{r.vehicleReturned ? '已归还' : '未归还'}</span></div>
              )}
            </div>
          </div>
        )}
        <div style={{ height: 16 }} />
      </>
    );
  };

  const activeTabLabel = DV_LIST_TABS.find((t) => t.key === listFilter)?.label || '';

  if (activeRow) {
    const isLast = formStep >= DV_FORM_STEPS.length - 1;
    const isFirst = formStep <= 0;
    return (
      <div className="xll-mod-root xll-dv-module">
        <div className="xll-mod-detail-wrap">
          <div className="xll-dv-steps-wrap">
            <div className="xll-dv-steps" role="tablist" aria-label="交车办理步骤">
              {DV_FORM_STEPS.map((s, i) => (
                <button
                  key={s.key}
                  type="button"
                  role="tab"
                  aria-selected={formStep === i}
                  className={`xll-dv-step${formStep === i ? ' active' : ''}${i < formStep ? ' done' : ''}`}
                  onClick={() => setFormStep(i)}
                >
                  {i + 1}.{s.label}
                </button>
              ))}
            </div>
          </div>
          <div className="tc-scroll" style={{ paddingBottom: readOnly && isLast ? 24 : undefined }}>
            {renderStepContent()}
          </div>
          {!readOnly && (
            <div className="xll-mod-action-bar">
              {!isFirst && (
                <button type="button" className="xll-mod-btn-ghost" onClick={() => setFormStep((s) => Math.max(0, s - 1))}>上一步</button>
              )}
              {!isLast ? (
                <button type="button" className="xll-mod-btn-primary" style={isFirst ? { flex: 2 } : undefined} onClick={() => setFormStep((s) => Math.min(DV_FORM_STEPS.length - 1, s + 1))}>下一步</button>
              ) : (
                <>
                  <button type="button" className="xll-mod-btn-ghost" onClick={handleSave}>保存</button>
                  <button type="button" className="xll-mod-btn-primary" onClick={handleSubmit}>提交签章</button>
                </>
              )}
            </div>
          )}
          {readOnly && !isLast && (
            <div className="xll-mod-action-bar">
              {!isFirst && <button type="button" className="xll-mod-btn-ghost" onClick={() => setFormStep((s) => s - 1)}>上一步</button>}
              <button type="button" className="xll-mod-btn-primary" onClick={() => setFormStep((s) => Math.min(DV_FORM_STEPS.length - 1, s + 1))}>下一步</button>
            </div>
          )}
          {readOnly && isLast && !isFirst && (
            <div className="xll-mod-action-bar">
              <button type="button" className="xll-mod-btn-ghost" onClick={() => setFormStep((s) => s - 1)}>上一步</button>
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="xll-mod-root xll-dv-module">
      <div className="xll-mod-tabs" role="tablist" aria-label="交车列表分类">
        {DV_LIST_TABS.map((tab) => (
          <button
            key={tab.key}
            type="button"
            role="tab"
            aria-selected={listFilter === tab.key}
            className={`xll-mod-tab${listFilter === tab.key ? ' active' : ''}`}
            onClick={() => { setListFilter(tab.key); if (tab.key === 'completed') setStatusFilter(''); }}
          >
            {tab.short}
            <span className="xll-mod-tab-count">
              {tab.key === 'inProgress' ? kpi.inProgress : tab.key === 'completed' ? kpi.completed : kpi.all} 辆
            </span>
          </button>
        ))}
      </div>
      <div className="xll-mod-toolbar">
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div className="xll-mod-search" style={{ flex: 1 }}>
            <IconSearch />
            <input type="search" placeholder="请输入车牌号" value={searchKey} onChange={(e) => setSearchKey(e.target.value)} aria-label="搜索车牌号" />
          </div>
          <button
            type="button"
            className={`xll-vm-filter-btn${activeMoreFilterCount ? ' active' : ''}`}
            onClick={() => { setMoreFilterDraft(moreFilter); setFilterDrawerOpen(true); }}
            aria-label="更多筛选"
          >
            <IconFilter />
          </button>
        </div>
        {(listFilter === 'all' || listFilter === 'inProgress') && (
          <div className="xll-mod-chips" role="group" aria-label="交车状态筛选">
            {DV_STATUS_FILTER_OPTIONS.map((st) => (
              <button
                key={st || 'all-status'}
                type="button"
                className={`xll-mod-chip${statusFilter === st ? ' active' : ''}`}
                onClick={() => setStatusFilter(statusFilter === st ? '' : st)}
              >
                {st || '全部状态'}
              </button>
            ))}
          </div>
        )}
        {activeMoreFilterCount > 0 && (
          <div className="xll-mod-chips" style={{ marginTop: (listFilter === 'all' || listFilter === 'inProgress') ? 0 : 10 }}>
            {moreFilter.customerName.trim() && (
              <button type="button" className="xll-mod-chip active" onClick={() => setMoreFilter((f) => ({ ...f, customerName: '' }))}>
                客户：{moreFilter.customerName} ×
              </button>
            )}
            {moreFilter.projectName.trim() && (
              <button type="button" className="xll-mod-chip active" onClick={() => setMoreFilter((f) => ({ ...f, projectName: '' }))}>
                项目：{moreFilter.projectName} ×
              </button>
            )}
            {(moreFilter.dateStart || moreFilter.dateEnd) && (
              <button type="button" className="xll-mod-chip active" onClick={() => setMoreFilter((f) => ({ ...f, dateStart: '', dateEnd: '' }))}>
                交车日期：{moreFilter.dateStart || '…'} 至 {moreFilter.dateEnd || '…'} ×
              </button>
            )}
          </div>
        )}
      </div>
      <div className="xll-mod-list-head"><span>{activeTabLabel}</span><span>共 {filteredList.length} 辆</span></div>
      <div className="xll-mod-list">
        {filteredList.length === 0 ? (
          <div className="xll-mod-empty">
            暂无{activeTabLabel}交车任务
            <br />
            {searchKey || statusFilter || activeMoreFilterCount ? '试试清空搜索或切换筛选' : '新的交车任务到达后将在此展示'}
          </div>
        ) : (
          filteredList.map((row) => {
            const st = dvStatusTag(row.deliveryStatus);
            const pendingPlate = !row.plateNo || !String(row.plateNo).trim();
            const inProgress = dvIsInProgressStatus(row.deliveryStatus);
            const isSignPending = row.deliveryStatus === '待客户签章';
            const actionLabel = row.deliveryStatus === '未开始' ? '去办理' : isSignPending ? '查看' : '继续办理';
            return (
              <div
                key={row.id}
                className="xll-mod-card"
                style={{ '--mod-accent': XLL_GREEN, '--mod-soft': XLL_GREEN_SOFT }}
                role="button"
                tabIndex={0}
                onClick={() => openRow(row)}
                onKeyDown={(e) => e.key === 'Enter' && openRow(row)}
              >
                <div className="xll-mod-card-head">
                  <span className="xll-dv-plate-row">
                    <span className={`xll-mod-ar-plate${pendingPlate ? ' xll-dv-plate-pending' : ''}`}>{dvDisplayPlate(row.plateNo)}</span>
                    {dvIsReplaceDeliveryTask(row) ? <span className="xll-dv-replace-tag">替换车交车</span> : null}
                  </span>
                  <span className={`xll-mod-card-status ${dvCardStatusClass(row.deliveryStatus)}`}>{st.text}</span>
                </div>
                <div className="xll-mod-card-title" style={{ fontSize: 14, fontWeight: 600 }}>{dvVehicleDesc(row)}</div>
                <div className="xll-mod-card-sub" style={{ fontSize: 13, marginBottom: 2 }}>{row.customerName || '—'}</div>
                <div className="xll-mod-card-sub" style={{ fontSize: 12, color: COLOR_MUTED, marginBottom: 8 }}>{row.projectName || '—'}</div>
                <div className="xll-mod-card-period">
                  <span>计划交车 {dvFormatExpectedDate(row.expectedDate)}</span>
                </div>
                <div className="xll-mod-meta">
                  <div><span className="xll-mod-meta-label">交车区域 </span><span className="xll-mod-meta-val">{row.deliveryRegion || '—'}</span></div>
                  <div><span className="xll-mod-meta-label">交车地点 </span><span className="xll-mod-meta-val">{row.deliveryAddress || '—'}</span></div>
                </div>
                {inProgress ? (
                  <div className="xll-mod-card-foot" style={{ justifyContent: isSignPending ? 'space-between' : 'flex-end' }}>
                    {isSignPending ? (
                      <span style={{ fontSize: 12, color: COLOR_MUTED, lineHeight: 1.45 }}>
                        实际交车 <span style={{ color: '#2563EB', fontWeight: 600 }}>{dvDisplayActualTime(row.deliveryTime)}</span>
                      </span>
                    ) : null}
                    <button type="button" className="xll-mod-card-btn" onClick={(e) => { e.stopPropagation(); openRow(row); }}>
                      {actionLabel}
                    </button>
                  </div>
                ) : null}
              </div>
            );
          })
        )}
      </div>
      {Drawer ? (
        <Drawer title="更多筛选" placement="bottom" height={480} open={filterDrawerOpen} onClose={() => setFilterDrawerOpen(false)} styles={{ body: { padding: '12px 16px 24px' } }}>
          <div className="xll-dv-filter-field">
            <label className="xll-dv-filter-label" htmlFor="dv-filter-customer">客户名称</label>
            <input
              id="dv-filter-customer"
              className="xll-dv-filter-input"
              type="search"
              placeholder="请输入客户名称"
              value={moreFilterDraft.customerName}
              onChange={(e) => setMoreFilterDraft((f) => ({ ...f, customerName: e.target.value }))}
            />
          </div>
          <div className="xll-dv-filter-field">
            <label className="xll-dv-filter-label" htmlFor="dv-filter-project">项目名称</label>
            <input
              id="dv-filter-project"
              className="xll-dv-filter-input"
              type="search"
              placeholder="请输入项目名称"
              value={moreFilterDraft.projectName}
              onChange={(e) => setMoreFilterDraft((f) => ({ ...f, projectName: e.target.value }))}
            />
          </div>
          <div className="xll-dv-filter-field">
            <span className="xll-dv-filter-label">交车日期</span>
            <div className="xll-dv-filter-date-row">
              <input
                className="xll-dv-filter-input"
                type="date"
                aria-label="交车开始日期"
                value={moreFilterDraft.dateStart}
                onChange={(e) => setMoreFilterDraft((f) => ({ ...f, dateStart: e.target.value }))}
              />
              <span style={{ fontSize: 13, color: COLOR_MUTED, flexShrink: 0 }}>至</span>
              <input
                className="xll-dv-filter-input"
                type="date"
                aria-label="交车结束日期"
                value={moreFilterDraft.dateEnd}
                onChange={(e) => setMoreFilterDraft((f) => ({ ...f, dateEnd: e.target.value }))}
              />
            </div>
            <div className="xll-dv-filter-hint">到达「待客户签章」及之后状态，按实际交车时间筛选；未交车任务不参与日期筛选。</div>
          </div>
          <div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
            <button
              type="button"
              className="xll-mod-btn-ghost"
              style={{ flex: 1, minHeight: 44, borderRadius: 12 }}
              onClick={() => setMoreFilterDraft(DV_EMPTY_MORE_FILTER)}
            >
              重置
            </button>
            <button
              type="button"
              className="xll-mod-btn-primary"
              style={{ flex: 1, minHeight: 44, borderRadius: 12 }}
              onClick={() => {
                if (moreFilterDraft.dateStart && moreFilterDraft.dateEnd && moreFilterDraft.dateStart > moreFilterDraft.dateEnd) {
                  message.warning('开始日期不能晚于结束日期');
                  return;
                }
                setMoreFilter(moreFilterDraft);
                setFilterDrawerOpen(false);
              }}
            >
              确定
            </button>
          </div>
        </Drawer>
      ) : null}
    </div>
  );
};

/* ── 替换车（参照 web端/替换车管理-新增.jsx） ── */
const VR_ACCENT = '#F43F5E';
const VR_SOFT = 'rgba(244, 63, 94, 0.12)';

const VR_ACTIVE_CONTRACTS = [
  { contractId: 'c1', projectName: '嘉兴氢能示范项目', projectType: '租赁', contractCode: 'HT-ZL-2025-001', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市' },
  { contractId: 'c2', projectName: '上海物流租赁项目', projectType: '租赁', contractCode: 'HT-ZL-2025-002', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市' },
  { contractId: 'c3', projectName: '杭州城配自营项目', projectType: '自营', contractCode: 'HT-ZY-2025-003', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省-杭州市' },
];

const VR_DELIVERED_VEHICLES = [
  { plateNo: '浙A12345', brand: '东风', model: 'DFH1180', contractId: 'c1' },
  { plateNo: '浙A55555', brand: '重汽', model: 'ZZ1160', contractId: 'c1' },
  { plateNo: '沪B11111', brand: '江淮', model: 'HFC1180', contractId: 'c2' },
  { plateNo: '浙C33333', brand: '东风', model: 'DFH1190', contractId: 'c3' },
];

const VR_PREPARED_BY_REGION = {
  '浙江省-嘉兴市': [
    { plateNo: '浙A67890', brand: '福田', model: 'BJ1180' },
    { plateNo: '浙A66666', brand: '江淮', model: 'HFC1190' },
    { plateNo: '浙F88888', brand: '东风', model: 'DFH1180' },
  ],
  '上海市-上海市': [
    { plateNo: '沪B22222', brand: '重汽', model: 'ZZ1180' },
    { plateNo: '沪B33333', brand: '福田', model: 'BJ1190' },
  ],
  '浙江省-杭州市': [
    { plateNo: '浙C44444', brand: '东风', model: 'DFH1180' },
  ],
};

const VR_CONTRACT_MAP = VR_ACTIVE_CONTRACTS.reduce((m, c) => { m[c.contractId] = c; return m; }, {});

const VR_MOCK_APPLICATIONS = [
  {
    id: 'vr-o1', bizNo: 'TH-2026-0315', replaceDate: '2026-03-15', approvalStatus: '审批中', currentApprover: '张明辉',
    projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市',
    pairs: [{ originalPlate: '浙A12345', replacePlate: '浙A67890', replaceType: '永久替换' }],
    creator: '王东东', createTime: '2026-03-14 10:00',
  },
  {
    id: 'vr-o2', bizNo: 'TH-2026-0310', replaceDate: '2026-03-10', approvalStatus: '未提交', currentApprover: '—',
    projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryRegion: '上海市-上海市',
    pairs: [{ originalPlate: '沪B11111', replacePlate: '沪B22222', replaceType: '临时替换' }],
    creator: '李四', createTime: '2026-03-09 15:30',
  },
  {
    id: 'vr-h1', bizNo: 'TH-2026-0218', replaceDate: '2026-02-18', approvalStatus: '审批完成', currentApprover: '—',
    projectName: '嘉兴氢能示范项目', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省-嘉兴市',
    pairs: [
      { originalPlate: '浙A10001', replacePlate: '浙A10002', replaceType: '永久替换' },
      { originalPlate: '浙A55555', replacePlate: '浙A66666', replaceType: '临时替换' },
    ],
    creator: '王东东', createTime: '2026-02-17 09:20',
  },
];

const VR_LIST_TABS = [
  { key: 'ongoing', label: '进行中', short: '进行中' },
  { key: 'history', label: '历史记录', short: '历史' },
];

const VR_STATUS_CHIPS = ['', '未提交', '待审批', '审批中', '审批驳回'];

const vrIsOngoing = (status) => ['待审批', '审批中', '审批驳回', '未提交', '撤回'].includes(status);
const vrIsHistory = (status) => status === '审批完成';

const vrBizStatusClass = (status) => {
  if (status === '审批完成') return 'ok';
  if (status === '审批驳回' || status === '撤回') return 'reject';
  return 'pending';
};

const vrBizStatusLabel = (row) => {
  const status = row.approvalStatus;
  if ((status === '审批中' || status === '待审批') && row.currentApprover && row.currentApprover !== '—') {
    return `${status}：${row.currentApprover}`;
  }
  return status || '—';
};

const vrRowToTask = (row) => {
  const contract = VR_ACTIVE_CONTRACTS.find((c) => c.projectName === row.projectName) || {};
  return {
  flowType: '替换车申请',
  bizNo: row.bizNo,
  customerName: row.customerName,
  projectName: row.projectName,
  projectType: row.projectType || contract.projectType,
  contractCode: row.contractCode || contract.contractCode,
  deliveryRegion: row.deliveryRegion || contract.deliveryRegion,
  pairs: row.pairs,
  vehicleCount: (row.pairs || []).length,
  initiator: row.creator,
  initiateTime: row.createTime,
  status: row.approvalStatus,
  currentAssignee: row.currentApprover,
  approvers: row.currentApprover && row.currentApprover !== '—' ? [row.currentApprover] : [],
  approvalSteps: row.approvalSteps,
};
};

let vrPairIdSeed = 1;
const vrCreateEmptyPair = () => {
  vrPairIdSeed += 1;
  return {
    id: `pair_${vrPairIdSeed}`,
    replaceType: '',
    replaceReason: '',
    replaceFee: '',
    replaceReasonDesc: '',
    originalPlate: '',
    originalBrand: '',
    originalModel: '',
    contractId: '',
    replacePlate: '',
    replaceBrand: '',
    replaceModel: '',
  };
};

const ReplaceModule = ({ onRegisterBack }) => {
  const [applications, setApplications] = useState(VR_MOCK_APPLICATIONS);
  const [listFilter, setListFilter] = useState('ongoing');
  const [statusFilter, setStatusFilter] = useState('');
  const [searchKey, setSearchKey] = useState('');
  const [addMode, setAddMode] = useState(false);
  const [detailRow, setDetailRow] = useState(null);
  const [pairs, setPairs] = useState([]);
  const [edited, setEdited] = useState(false);

  const selectedOriginalPlates = useMemo(() => pairs.map((p) => p.originalPlate).filter(Boolean), [pairs]);

  const projectInfo = useMemo(() => {
    const anchor = pairs.find((p) => p.originalPlate && p.contractId);
    if (!anchor) return null;
    return VR_CONTRACT_MAP[anchor.contractId] || null;
  }, [pairs]);

  const multiOldPlateOptions = useMemo(() => {
    const lockedContractId = projectInfo?.contractId;
    return VR_DELIVERED_VEHICLES
      .filter((v) => !lockedContractId || v.contractId === lockedContractId)
      .map((v) => v.plateNo);
  }, [projectInfo]);

  const getDeliveredVehicle = useCallback((plateNo) => VR_DELIVERED_VEHICLES.find((v) => v.plateNo === plateNo) || null, []);

  const getUsedPlates = useCallback((pairsList, field, exceptPairId) => {
    const set = {};
    pairsList.forEach((p) => {
      if (p.id === exceptPairId) return;
      if (p[field]) set[p[field]] = true;
    });
    return set;
  }, []);

  const buildPairForPlate = useCallback((plateNo, existing) => {
    const vehicle = getDeliveredVehicle(plateNo);
    if (!vehicle) return null;
    const row = existing ? { ...existing } : vrCreateEmptyPair();
    row.originalPlate = plateNo;
    row.originalBrand = vehicle.brand;
    row.originalModel = vehicle.model;
    row.contractId = vehicle.contractId;
    if (!existing) {
      row.replacePlate = '';
      row.replaceBrand = '';
      row.replaceModel = '';
    }
    return row;
  }, [getDeliveredVehicle]);

  const onMultiOriginalPlateChange = useCallback((plateList) => {
    const list = Array.isArray(plateList) ? plateList : [];
    if (list.length === 0) {
      setEdited(true);
      setPairs([]);
      return;
    }
    let anchorContractId = null;
    const validPlates = [];
    let rejected = false;
    list.forEach((plate) => {
      const vehicle = getDeliveredVehicle(plate);
      if (!vehicle || !VR_CONTRACT_MAP[vehicle.contractId]) return;
      if (!anchorContractId) anchorContractId = vehicle.contractId;
      if (vehicle.contractId !== anchorContractId) {
        rejected = true;
        return;
      }
      validPlates.push(plate);
    });
    if (rejected) message.warning('多台替换须为同一客户、同一项目，已忽略不同项目的车辆');
    setEdited(true);
    setPairs((prev) => {
      const prevByPlate = {};
      prev.forEach((p) => { if (p.originalPlate) prevByPlate[p.originalPlate] = p; });
      return validPlates.map((plate) => buildPairForPlate(plate, prevByPlate[plate])).filter(Boolean);
    });
  }, [getDeliveredVehicle, buildPairForPlate]);

  const toggleOriginalPlate = useCallback((plate) => {
    const next = selectedOriginalPlates.includes(plate)
      ? selectedOriginalPlates.filter((p) => p !== plate)
      : [...selectedOriginalPlates, plate];
    onMultiOriginalPlateChange(next);
  }, [selectedOriginalPlates, onMultiOriginalPlateChange]);

  const updatePair = useCallback((pairId, patch) => {
    setEdited(true);
    setPairs((prev) => prev.map((p) => (p.id === pairId ? { ...p, ...patch } : p)));
  }, []);

  const getNewOptionsForPair = useCallback((pair) => {
    if (!projectInfo?.deliveryRegion) return [];
    const used = getUsedPlates(pairs, 'replacePlate', pair.id);
    return (VR_PREPARED_BY_REGION[projectInfo.deliveryRegion] || [])
      .filter((v) => !used[v.plateNo])
      .map((v) => v.plateNo);
  }, [pairs, projectInfo, getUsedPlates]);

  const onReplacePlateChange = useCallback((pairId, plateNo) => {
    if (!plateNo) {
      updatePair(pairId, { replacePlate: '', replaceBrand: '', replaceModel: '' });
      return;
    }
    const pair = pairs.find((p) => p.id === pairId);
    if (!pair?.originalPlate) {
      message.info('请先选择被替换车辆');
      return;
    }
    const vehicle = (VR_PREPARED_BY_REGION[projectInfo?.deliveryRegion] || []).find((v) => v.plateNo === plateNo);
    if (!vehicle) return;
    const used = getUsedPlates(pairs, 'replacePlate', pairId);
    if (used[plateNo]) {
      message.warning('该新车已在其他替换项中选择');
      return;
    }
    updatePair(pairId, { replacePlate: plateNo, replaceBrand: vehicle.brand, replaceModel: vehicle.model });
  }, [updatePair, pairs, projectInfo, getUsedPlates]);

  const openAdd = useCallback(() => {
    setPairs([]);
    setEdited(false);
    setAddMode(true);
    setDetailRow(null);
  }, []);

  const closeAdd = useCallback((force) => {
    if (!force && edited) {
      if (Modal?.confirm) {
        Modal.confirm({
          title: '取消将会丢失所有已填写内容，是否确认？',
          okText: '确认',
          cancelText: '返回',
          centered: true,
          onOk: () => { setAddMode(false); setPairs([]); setEdited(false); },
        });
        return;
      }
    }
    setAddMode(false);
    setPairs([]);
    setEdited(false);
  }, [edited]);

  const handleSave = useCallback(() => {
    message.success('已保存，该条数据仅您可查看并编辑（原型）');
    setEdited(false);
  }, []);

  const handleSubmit = useCallback(() => {
    if (!pairs.length || !projectInfo?.contractId) {
      message.warning('请选择被替换车辆并完善替换信息');
      return;
    }
    const incomplete = pairs.find((p) => {
      if (!p.originalPlate || !p.replacePlate || !p.replaceType || !p.replaceReason) return true;
      if (p.replaceReason === '客户原因' && !(p.replaceFee || '').toString().trim()) return true;
      return false;
    });
    if (incomplete) {
      message.warning('请完善每条替换的新车、替换类型、替换原因及客户原因下的替换费用');
      return;
    }
    const newApp = {
      id: `vr-new-${Date.now()}`,
      bizNo: `TH-2026-${String(applications.length + 1).padStart(4, '0')}`,
      replaceDate: new Date().toISOString().slice(0, 10),
      approvalStatus: '待审批',
      currentApprover: '业务部主管',
      projectName: projectInfo.projectName,
      customerName: projectInfo.customerName,
      deliveryRegion: projectInfo.deliveryRegion,
      pairs: pairs.map((p) => ({
        originalPlate: p.originalPlate,
        replacePlate: p.replacePlate,
        replaceType: p.replaceType,
        replaceReason: p.replaceReason,
        replaceFee: p.replaceFee,
        replaceReasonDesc: p.replaceReasonDesc,
        originalBrand: p.originalBrand,
        originalModel: p.originalModel,
        replaceBrand: p.replaceBrand,
        replaceModel: p.replaceModel,
      })),
      creator: MOCK_USER,
      createTime: new Date().toISOString().slice(0, 16).replace('T', ' '),
    };
    setApplications((prev) => [newApp, ...prev]);
    message.success(`已提交 ${pairs.length} 条替换车申请（原型）`);
    setAddMode(false);
    setPairs([]);
    setEdited(false);
    setListFilter('ongoing');
  }, [pairs, projectInfo, applications.length]);

  const kpi = useMemo(() => ({
    ongoing: applications.filter((a) => vrIsOngoing(a.approvalStatus)).length,
    history: applications.filter((a) => vrIsHistory(a.approvalStatus)).length,
  }), [applications]);

  const filteredList = useMemo(() => {
    const q = searchKey.trim().toUpperCase();
    let list = applications;
    if (listFilter === 'ongoing') list = list.filter((a) => vrIsOngoing(a.approvalStatus));
    if (listFilter === 'history') list = list.filter((a) => vrIsHistory(a.approvalStatus));
    if (statusFilter) list = list.filter((a) => a.approvalStatus === statusFilter);
    if (q) {
      list = list.filter((a) =>
        (a.bizNo || '').toUpperCase().includes(q)
        || (a.projectName || '').toUpperCase().includes(q)
        || (a.customerName || '').toUpperCase().includes(q)
        || (a.pairs || []).some((p) => (p.originalPlate || '').toUpperCase().includes(q) || (p.replacePlate || '').toUpperCase().includes(q))
      );
    }
    return list;
  }, [applications, listFilter, statusFilter, searchKey]);

  useEffect(() => {
    if (!onRegisterBack) return undefined;
    onRegisterBack(() => {
      if (addMode) { closeAdd(); return true; }
      if (detailRow) { setDetailRow(null); return true; }
      return false;
    });
    return () => onRegisterBack(null);
  }, [addMode, detailRow, closeAdd, onRegisterBack]);

  const renderFormRow = (label, value, editor) => (
    <div className="xll-mod-form-row">
      <span className="xll-mod-form-label">{label}</span>
      {editor || <span className="xll-mod-form-value">{value || '—'}</span>}
    </div>
  );

  const renderPairForm = (pair, index) => {
    const newOptions = getNewOptionsForPair(pair);
    return (
      <div className="tc-section" key={pair.id}>
        <div className="tc-section-head">
          <span className="tc-section-title">车辆替换 · #{index + 1}</span>
          <span className="tc-section-badge tc-section-badge--rose">{pair.replaceType || '待填写'}</span>
        </div>
        <div className="vr-replace-swap">
          <div className="vr-replace-side vr-replace-side--old">
            <span className="vr-replace-side-tag">被替换</span>
            <div className="tc-vehicle-plate">{pair.originalPlate || '—'}</div>
            <div className="tc-vehicle-model">{pair.originalBrand || '—'} · {pair.originalModel || '—'}</div>
          </div>
          <div className="vr-replace-mid" aria-hidden="true"><span className="vr-replace-mid-icon">→</span></div>
          <div className="vr-replace-side vr-replace-side--new">
            <span className="vr-replace-side-tag">替换为</span>
            <div className="tc-vehicle-plate">{pair.replacePlate || '待选择'}</div>
            <div className="tc-vehicle-model">{pair.replaceBrand ? `${pair.replaceBrand} · ${pair.replaceModel}` : '选择新车后自动显示'}</div>
          </div>
        </div>
        <div className="tc-section-form">
          {renderFormRow('替换类型', null, (
            <select className="xll-mod-form-input" value={pair.replaceType} onChange={(e) => updatePair(pair.id, { replaceType: e.target.value })} aria-label="替换类型">
              <option value="">请选择</option>
              <option value="永久替换">永久替换</option>
              <option value="临时替换">临时替换</option>
            </select>
          ))}
          {renderFormRow('替换原因', null, (
            <select
              className="xll-mod-form-input"
              value={pair.replaceReason}
              onChange={(e) => updatePair(pair.id, { replaceReason: e.target.value, replaceFee: e.target.value === '客户原因' ? pair.replaceFee : '' })}
              aria-label="替换原因"
            >
              <option value="">请选择</option>
              <option value="客户原因">客户原因</option>
              <option value="车辆原因">车辆原因</option>
            </select>
          ))}
          {pair.replaceReason === '客户原因' && renderFormRow('替换费用', null, (
            <input
              className="xll-mod-form-input"
              value={pair.replaceFee}
              placeholder="请输入"
              onChange={(e) => {
                let val = e.target.value.replace(/[^\d.]/g, '');
                const parts = val.split('.');
                if (parts.length > 2) val = `${parts[0]}.${parts.slice(1).join('')}`;
                updatePair(pair.id, { replaceFee: val });
              }}
              aria-label="替换费用"
            />
          ))}
          <div className="xll-mod-form-row" style={{ flexDirection: 'column', alignItems: 'stretch', borderBottom: 'none' }}>
            <span className="xll-mod-form-label" style={{ marginBottom: 8 }}>替换原因说明</span>
            <textarea
              className="xll-vr-form-textarea"
              value={pair.replaceReasonDesc}
              maxLength={500}
              placeholder="请说明替换原因"
              onChange={(e) => updatePair(pair.id, { replaceReasonDesc: e.target.value })}
            />
          </div>
          {renderFormRow('新车', null, (
            <select
              className="xll-mod-form-input"
              value={pair.replacePlate}
              disabled={!pair.originalPlate}
              onChange={(e) => onReplacePlateChange(pair.id, e.target.value)}
              aria-label="新车"
            >
              <option value="">{projectInfo?.deliveryRegion ? `交车区域：${projectInfo.deliveryRegion}` : '请先选择被替换车辆'}</option>
              {newOptions.map((plate) => <option key={plate} value={plate}>{plate}</option>)}
            </select>
          ))}
        </div>
      </div>
    );
  };

  const activeTabLabel = VR_LIST_TABS.find((t) => t.key === listFilter)?.label || '';

  if (addMode) {
    return (
      <div className="xll-mod-root xll-vr-module">
        <div className="xll-mod-detail-wrap">
          <div className="tc-scroll">
            <div className="tc-hero tc-hero--replace">
              <div className="tc-hero-label">新增替换车</div>
              <div className="tc-hero-amount">{pairs.length ? `${pairs.length} 台` : '—'}</div>
              <div className="tc-hero-meta">
                <span>{projectInfo ? projectInfo.customerName : '请选择被替换车辆'}</span>
              </div>
              {projectInfo && (
                <>
                  <div className="tc-hero-foot tc-hero-foot--compact">
                    <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">合同编码</span>{projectInfo.contractCode || '—'}</div>
                    <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">项目名称</span>{projectInfo.projectName || '—'}</div>
                    <div className="tc-hero-foot-row"><span className="tc-hero-foot-label">交车区域</span>{projectInfo.deliveryRegion || '—'}</div>
                  </div>
                  <div className="tc-hero-period">
                    <span className="tc-hero-period-tag">{projectInfo.projectType || '租赁'}</span>
                  </div>
                </>
              )}
            </div>
            <div className="tc-section">
              <div className="tc-section-head"><span className="tc-section-title">被替换车辆</span></div>
              <div className="tc-section-hint">车牌支持多选，每选中一辆生成一条替换明细；须为同一客户、同一项目。</div>
              <div className="tc-section-chips">
                {multiOldPlateOptions.map((plate) => (
                  <button
                    key={plate}
                    type="button"
                    className={`xll-mod-chip${selectedOriginalPlates.includes(plate) ? ' active' : ''}`}
                    onClick={() => toggleOriginalPlate(plate)}
                  >
                    {plate}
                  </button>
                ))}
              </div>
            </div>
            {pairs.length > 0 ? pairs.map(renderPairForm) : (
              <div className="xll-mod-empty" style={{ padding: '32px 24px' }}>请在上方选择被替换车辆车牌号，将自动生成替换明细</div>
            )}
            <div style={{ height: 16 }} />
          </div>
          <div className="xll-mod-action-bar">
            <button type="button" className="xll-mod-btn-ghost" onClick={() => closeAdd()}>取消</button>
            <button type="button" className="xll-mod-btn-ghost" onClick={handleSave}>保存</button>
            <button type="button" className="xll-mod-btn-rose" onClick={handleSubmit}>提交审核</button>
          </div>
        </div>
      </div>
    );
  }

  if (detailRow) {
    return (
      <div className="xll-mod-root xll-vr-module">
        <div className="xll-mod-detail-wrap">
          <ReplaceVehicleApprovePage task={vrRowToTask(detailRow)} mode="view" onBack={() => setDetailRow(null)} />
        </div>
      </div>
    );
  }

  return (
    <div className="xll-mod-root xll-vr-module">
      <div className="xll-mod-tabs" role="tablist" aria-label="替换车列表分类">
        {VR_LIST_TABS.map((tab) => (
          <button
            key={tab.key}
            type="button"
            role="tab"
            aria-selected={listFilter === tab.key}
            className={`xll-mod-tab${listFilter === tab.key ? ' active' : ''}`}
            onClick={() => { setListFilter(tab.key); if (tab.key === 'history') setStatusFilter(''); }}
          >
            {tab.short}
            <span className="xll-mod-tab-count">{tab.key === 'ongoing' ? kpi.ongoing : kpi.history} 条</span>
          </button>
        ))}
      </div>
      <div className="xll-mod-toolbar">
        <div className="xll-mod-search">
          <IconSearch />
          <input type="search" placeholder="搜索单号、项目、车牌" value={searchKey} onChange={(e) => setSearchKey(e.target.value)} aria-label="搜索替换车" />
        </div>
        <div className="xll-mod-chips" role="group" aria-label="审批状态筛选">
          <button type="button" className={`xll-mod-chip${!statusFilter ? ' active' : ''}`} onClick={() => setStatusFilter('')}>全部</button>
          {listFilter === 'ongoing' && VR_STATUS_CHIPS.filter(Boolean).map((st) => (
            <button key={st} type="button" className={`xll-mod-chip${statusFilter === st ? ' active' : ''}`} onClick={() => setStatusFilter(statusFilter === st ? '' : st)}>{st}</button>
          ))}
        </div>
      </div>
      <div className="xll-mod-list-head">
        <span>{activeTabLabel}</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span>共 {filteredList.length} 条</span>
          <button type="button" className="xll-vr-add-btn" onClick={openAdd}>+ 新增</button>
        </span>
      </div>
      <div className="xll-mod-list">
        {filteredList.length === 0 ? (
          <div className="xll-mod-empty">
            暂无{activeTabLabel}申请
            <br />
            {searchKey || statusFilter ? '试试清空搜索或切换筛选' : '点击下方按钮发起替换车申请'}
            {!searchKey && !statusFilter && (
              <div style={{ marginTop: 12 }}>
                <button type="button" className="xll-vr-add-btn" onClick={openAdd}>+ 新增替换车</button>
              </div>
            )}
          </div>
        ) : (
          filteredList.map((row) => {
            const stCls = vrBizStatusClass(row.approvalStatus);
            const statusLabel = vrBizStatusLabel(row);
            const inProgress = vrIsOngoing(row.approvalStatus);
            const actionLabel = row.approvalStatus === '未提交' ? '继续编辑' : '查看';
            return (
              <div
                key={row.id}
                className="xll-mod-card"
                style={{ '--mod-accent': VR_ACCENT, '--mod-soft': VR_SOFT }}
                role="button"
                tabIndex={0}
                onClick={() => setDetailRow(row)}
                onKeyDown={(e) => e.key === 'Enter' && setDetailRow(row)}
              >
                <div className="xll-mod-card-head">
                  <span className="xll-mod-card-type">替换车申请</span>
                  <span className={`xll-mod-card-status ${stCls}${statusLabel !== row.approvalStatus ? ' with-approvers' : ''}`}>{statusLabel}</span>
                </div>
                <div className="xll-mod-card-title">{row.customerName || '—'}</div>
                <div className="xll-mod-card-sub">{row.projectName || '—'}</div>
                {(row.pairs || []).length > 0 && (
                  <div className="xll-mod-card-vehicles">
                    {(row.pairs || []).map((p) => (
                      <div key={p.id || `${p.originalPlate}-${p.replacePlate}`} className="xll-mod-card-vehicle-line">{p.originalPlate} → {p.replacePlate}</div>
                    ))}
                  </div>
                )}
                <div className="xll-mod-meta">
                  <div><span className="xll-mod-meta-label">发起人 </span><span className="xll-mod-meta-val">{row.creator}</span></div>
                  <div><span className="xll-mod-meta-label">替换车辆 </span><span className="xll-mod-meta-val" style={{ color: VR_ACCENT, fontWeight: 700 }}>{(row.pairs || []).length} 台</span></div>
                </div>
                <div className="xll-mod-card-foot">
                  <span style={{ fontSize: 12, color: COLOR_MUTED }}>发起时间 {row.createTime}</span>
                  {inProgress && (
                    <button type="button" className="xll-mod-card-btn" onClick={(e) => { e.stopPropagation(); row.approvalStatus === '未提交' ? openAdd() : setDetailRow(row); }}>
                      {actionLabel}
                    </button>
                  )}
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};

/* ── 车辆管理（参照 web端/车辆管理.jsx） ── */
const VM_OPERATE_STATUSES = ['租赁', '自营', '可运营', '待运营', '退出运营'];
const VM_VEHICLE_STATUSES = ['待验车', '未备车', '已备车', '待交车', '已交车', '待还车', '销售中', '替换中', '调拨中', '异动中'];
const VM_DETAIL_TABS = [
  { key: 'detail', label: '车辆详情' },
  { key: 'license', label: '证照信息' },
  { key: 'insurance', label: '保险信息' },
  { key: 'events', label: '车辆事件' },
];

const VM_CERT_NAV = [
  { key: 'driverLicense', label: '行驶证' },
  { key: 'transportLicense', label: '道路运输证' },
  { key: 'registrationCert', label: '登记证' },
  { key: 'specialEquipCert', label: '特种设备登记证' },
  { key: 'specialEquipDecal', label: '特种设备标识' },
  { key: 'hydrogenCard', label: '加氢卡' },
  { key: 'safetyValve', label: '安全阀' },
  { key: 'pressureGauge', label: '压力表' },
];

const VM_INSURANCE_TYPES = ['交强险', '商业险', '超赔险', '货物险', '乘意险'];

const VM_LICENSE_DATA = {
  '沪A03561F': {
    driverLicense: { photos: ['https://picsum.photos/seed/license1/600/400', 'https://picsum.photos/seed/license2/600/400'], regDate: '2024-06-05', issueDate: '2024-06-05', scrapDate: '2039-06-04', expireDate: '2026-06-30', updateUser: '李明辉', shNextEvaluation: '2026-12-05' },
    transportLicense: { photos: ['https://picsum.photos/seed/transport/600/400'], licenseNo: '交字310115102345号', issueDate: '2024-07-12', expireDate: '2026-07-31', inspectValidUntil: '2026-07-20', updateUser: '陈高伟' },
    registrationCert: { photos: ['https://picsum.photos/seed/regcert1/600/400'] },
    specialEquipCert: { photos: ['https://picsum.photos/seed/spec1/600/400'] },
    specialEquipDecal: { photos: ['https://picsum.photos/seed/spec2/600/400'], nextInspectDate: '2026-07-20' },
    hydrogenCard: { cardNo: 'H2-9988-7766-5544', cardType: '中石化加氢卡', balance: 12850.5, issueDate: '2025-01-15 14:30', issueUser: '能源管理部-张晓' },
    safetyValve: { photos: ['https://picsum.photos/seed/valve/600/400'], inspectDate: '2025-10-10', nextInspectDate: '2026-10-09' },
    pressureGauge: { photos: ['https://picsum.photos/seed/gauge/600/400'], inspectDate: '2025-12-15', nextInspectDate: '2026-06-14' },
  },
  '粤B58888F': {
    driverLicense: { photos: [], regDate: '', issueDate: '', scrapDate: '', expireDate: '' },
    transportLicense: { photos: ['https://picsum.photos/seed/trans_ocr/600/400'], licenseNo: '粤字440301102947号', issueDate: '2024-07-20', expireDate: '2026-07-20', inspectValidUntil: '2026-08-15', updateUser: '黄志杰' },
    registrationCert: { photos: [] },
    specialEquipCert: { photos: [] },
    specialEquipDecal: { photos: [], nextInspectDate: '' },
    hydrogenCard: { cardNo: 'H2-5566-4433-2211', cardType: '中石化加氢卡', balance: 5200, issueDate: '2025-03-10 10:15', issueUser: '能源管理部-张晓' },
    safetyValve: { photos: [], inspectDate: '', nextInspectDate: '' },
    pressureGauge: { photos: [], inspectDate: '', nextInspectDate: '' },
  },
  '苏E33333': {
    driverLicense: { photos: ['https://picsum.photos/seed/su_lic/600/400'], regDate: '2024-05-16', issueDate: '2024-05-16', scrapDate: '2039-05-15', expireDate: '2026-05-15', updateUser: '王东东' },
    transportLicense: { photos: ['https://picsum.photos/seed/su_trans/600/400'], licenseNo: '苏字320501104829号', issueDate: '2024-08-10', expireDate: '2026-08-10', inspectValidUntil: '2026-08-10', updateUser: '王东东' },
    registrationCert: { photos: [] },
    specialEquipCert: { photos: [] },
    specialEquipDecal: { photos: [], nextInspectDate: '' },
    hydrogenCard: { cardNo: '', cardType: '中石化加氢卡', balance: 0, issueDate: '', issueUser: '' },
    safetyValve: { photos: [], inspectDate: '', nextInspectDate: '' },
    pressureGauge: { photos: [], inspectDate: '', nextInspectDate: '' },
  },
  '浙F06900F': {
    driverLicense: { photos: ['https://picsum.photos/seed/zjf-lic/600/400'], regDate: '2025-07-01', issueDate: '2025-07-01', scrapDate: '2038-12-31', expireDate: '2027-07-31', updateUser: '金可鹏' },
    transportLicense: { photos: ['https://picsum.photos/seed/zjf-trans/600/400'], licenseNo: '浙字330482001234号', issueDate: '2025-07-15', expireDate: '2026-07-14', inspectValidUntil: '2026-07-20', updateUser: '金可鹏' },
    registrationCert: { photos: ['https://picsum.photos/seed/zjf-reg/600/400'] },
    specialEquipCert: { photos: [] },
    specialEquipDecal: { photos: ['https://picsum.photos/seed/zjf-decal/600/400'], nextInspectDate: '2026-07-20' },
    hydrogenCard: { cardNo: 'H2-3304-0690-0088', cardType: '中石化加氢卡', balance: 8650.5, issueDate: '2025-03-10 10:15', issueUser: '能源管理部-张晓' },
    safetyValve: { photos: ['https://picsum.photos/seed/zjf-valve/600/400'], inspectDate: '2025-05-10', nextInspectDate: '2026-05-09' },
    pressureGauge: { photos: ['https://picsum.photos/seed/zjf-gauge/600/400'], inspectDate: '2025-12-15', nextInspectDate: '2026-06-14' },
  },
};

const VM_EMPTY_LICENSE = {
  driverLicense: { photos: [], regDate: '', issueDate: '', scrapDate: '', expireDate: '' },
  transportLicense: { photos: [], licenseNo: '', issueDate: '', expireDate: '', inspectValidUntil: '' },
  registrationCert: { photos: [] },
  specialEquipCert: { photos: [] },
  specialEquipDecal: { photos: [], nextInspectDate: '' },
  hydrogenCard: { cardNo: '', cardType: '', balance: 0, issueDate: '', issueUser: '' },
  safetyValve: { photos: [], inspectDate: '', nextInspectDate: '' },
  pressureGauge: { photos: [], inspectDate: '', nextInspectDate: '' },
};

const vmGetLicenseBundle = (plateNo) => VM_LICENSE_DATA[plateNo] || VM_EMPTY_LICENSE;

const vmGetInsurancePolicies = (v) => {
  const base = v.plateNo.slice(-4);
  const premiums = { 交强险: '950.00', 商业险: '12800.50', 超赔险: '3200.00', 货物险: '1800.00', 乘意险: '560.00' };
  const ranges = {
    交强险: ['2025-01-01', '2025-12-31'],
    商业险: ['2025-01-01', '2025-12-31'],
    超赔险: ['2025-07-01', '2026-06-30'],
    货物险: ['2025-03-15', '2026-03-14'],
    乘意险: ['2025-09-01', '2026-08-31'],
  };
  return VM_INSURANCE_TYPES.map((type, idx) => ({
    type,
    company: '中国人民财产保险股份有限公司',
    policyNo: `PD${base}2025${String(idx + 1).padStart(3, '0')}`,
    startDate: ranges[type][0],
    endDate: ranges[type][1],
    premium: premiums[type],
    hasPdf: true,
  }));
};

const vmInsuranceStatus = (endDate) => {
  if (!endDate) return { label: '未投保', cls: 'empty' };
  const end = new Date(endDate);
  const now = new Date('2026-06-01');
  const days = Math.ceil((end - now) / (86400000));
  if (days < 0) return { label: '已过期', cls: 'warn' };
  if (days <= 30) return { label: '即将到期', cls: 'warn' };
  return { label: '保障中', cls: '' };
};

const VM_EVENTS_BY_PLATE = {
  '粤B58888F': [
    { type: '入库', time: '2023-06-15 10:00', summary: '采购入库完成', operator: '仓储-刘工', extra: '入库单号 RK-2023-0615' },
    { type: '备车', time: '2023-07-01 14:30', summary: '整备完成，状态变更为已备车', operator: '运维-王东东' },
    { type: '交车', time: '2024-01-10 09:30', summary: '交付嘉兴某某物流有限公司', operator: '张三', extra: '交车里程 12000 KM' },
    { type: '保养', time: '2024-08-20 11:00', summary: '二保完成 · 嘉兴机动车检测站', operator: '李四' },
    { type: '年审', time: '2025-07-18 15:20', summary: '年审办理完成，检验有效期至 2026-07', operator: '张明辉' },
    { type: '故障', time: '2026-03-05 08:45', summary: '氢系统压力异常 · 已提报维修', operator: '司机-赵某' },
  ],
  '沪A03561F': [
    { type: '入库', time: '2022-08-20 09:00', summary: '采购入库', operator: '系统' },
    { type: '交车', time: '2024-01-05 10:00', summary: '交付上海迅杰氢能物流运输有限公司', operator: '李晓彤', extra: '合同 HT-2024-002' },
    { type: '还车', time: '2024-01-20 16:00', summary: '客户临时还车', operator: '李晓彤', extra: '还车里程 25600 KM' },
    { type: '维修', time: '2025-02-12 13:30', summary: '更换电堆冷却液', operator: '维修站-周工' },
    { type: '年审', time: '2025-09-10 09:15', summary: '年审完成', operator: '陈高伟' },
  ],
};

const vmGetVehicleEvents = (v) => VM_EVENTS_BY_PLATE[v.plateNo] || [
  { type: '入库', time: v.purchaseDate ? `${v.purchaseDate} 09:00` : '—', summary: '车辆采购入库', operator: '系统' },
  { type: '交车', time: v.lastDeliveryTime || '—', summary: vmHasCustomer(v.customer) ? `交付 ${vmFormatStatus(v.customer)}` : '暂无交车记录', operator: vmFormatStatus(v.manager), extra: v.lastDeliveryMile ? `交车里程 ${v.lastDeliveryMile} KM` : '' },
  { type: '还车', time: v.lastReturnTime || '—', summary: '最近一次还车', operator: '—', extra: v.lastReturnMile ? `还车里程 ${v.lastReturnMile} KM` : '' },
];

const VmDetailKv = ({ label, value, full }) => (
  <div className={`xll-vm-detail-kv${full ? ' full' : ''}`}>
    <div className="xll-vm-detail-kv-label">{label}</div>
    <div className="xll-vm-detail-kv-val">{value || '—'}</div>
  </div>
);

const VM_MOCK_VEHICLES = [
  { id: '1', region: '广东省/深圳市', vin: 'LGHXCAE28M6789012', plateNo: '粤B58888F', vehicleNo: '22FHD0001', vehicleType: '厢式货车', brand: '福田', model: '奥铃4.5吨冷藏车', color: '白色', parking: '福田停车场', customer: '嘉兴某某物流有限公司', department: '华南区', manager: '张三', operateStatus: '租赁', vehicleStatus: '已交车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '浙江羚牛氢能科技有限公司', operateCompany: '羚牛运营（嘉兴）', vehicleSource: '自有', leaseCompany: '嘉兴某某物流有限公司', onlineStatus: '在线', year: '2023', mileage: '12580.50', purchaseDate: '2023-06-15', regDate: '2023-07-01', inspectExpire: '2026-07', lastDeliveryTime: '2024-01-10', lastDeliveryMile: '12000.00', lastReturnTime: '2024-02-01', lastReturnMile: '12580.50', scrapDate: '2038-12-31', contractNo: 'HT-ZL-2025-088', location: '广东省深圳市南山区科技园南路', gpsTime: '2026-06-01 14:30', fuelType: '氢' },
  { id: '2', region: '上海市/上海市', vin: 'LMRKH9AC0R1004086', plateNo: '沪A03561F', vehicleNo: '22FHD0002', vehicleType: '牵引车头', brand: '宇通', model: '49吨牵引车头', color: '白色', parking: '浦东停车场', customer: '上海迅杰氢能物流运输有限公司', department: '华东区', manager: '李晓彤', operateStatus: '租赁', vehicleStatus: '已交车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '浙江羚牛氢能科技有限公司', operateCompany: '羚牛运营（上海）', vehicleSource: '自有', leaseCompany: '上海迅杰氢能物流运输有限公司', onlineStatus: '在线', year: '2022', mileage: '25600.00', purchaseDate: '2022-08-20', regDate: '2022-09-01', inspectExpire: '2026-09', lastDeliveryTime: '2024-01-05', lastDeliveryMile: '25500.00', lastReturnTime: '2024-01-20', lastReturnMile: '25600.00', scrapDate: '2037-09-30', contractNo: 'HT-2024-002', location: '上海市浦东新区张江高科路500号', gpsTime: '2026-06-01 09:45', fuelType: '氢' },
  { id: '3', region: '江苏省/苏州市', vin: 'LSXCH9AE8M1094857', plateNo: '苏E33333', vehicleNo: 'V003', vehicleType: '牵引车', brand: '陕汽', model: '德龙X3000混动牵引车', color: '灰色', parking: '-', customer: '无', department: '无', manager: '-', operateStatus: '可运营', vehicleStatus: '未备车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '浙江羚牛氢能科技有限公司', operateCompany: '羚牛运营（嘉兴）', vehicleSource: '外租', leaseCompany: '-', onlineStatus: '离线', year: '2022', mileage: '8320.00', purchaseDate: '2023-09-01', regDate: '2023-09-20', inspectExpire: '2026-05', lastDeliveryTime: '2024-02-05', lastDeliveryMile: '8100.00', lastReturnTime: '2024-02-10', lastReturnMile: '8320.00', scrapDate: '2039-09-30', contractNo: '-', location: '江苏省苏州市工业园区', gpsTime: '2026-05-28 10:15', fuelType: '氢' },
  { id: '4', region: '浙江省/嘉兴市', vin: 'LA9HE60A0NBAF4031', plateNo: '浙F06900F', vehicleNo: '22FHD0007', vehicleType: '18吨双飞翼货车', brand: '苏龙', model: '海格牌KLQ5180XYKFCEV', color: '白色', parking: '嘉兴港区停车场', customer: '上海迅杰物流有限公司', department: '业务三部', manager: '金可鹏', operateStatus: '租赁', vehicleStatus: '已交车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '浙江羚牛氢能科技有限公司', operateCompany: '羚牛运营（嘉兴）', vehicleSource: '自有', leaseCompany: '上海迅杰物流有限公司', onlineStatus: '在线', year: '2025', mileage: '5600.00', purchaseDate: '2025-03-08', regDate: '2025-04-01', inspectExpire: '2027-09', lastDeliveryTime: '2026-02-02', lastDeliveryMile: '5200.00', lastReturnTime: '2026-02-11', lastReturnMile: '5600.00', scrapDate: '2038-04-30', contractNo: 'LNZLHTSH2023071301', location: '浙江省嘉兴市平湖市港区', gpsTime: '2026-06-01 11:20', fuelType: '氢' },
  { id: '5', region: '广东省/广州市', vin: 'LSJA24U70PS001234', plateNo: '粤A88K88', vehicleNo: 'V005', vehicleType: '厢式货车', brand: '比亚迪', model: 'T5纯电轻卡', color: '灰色', parking: '黄埔停车场', customer: '客户A', department: '华南区', manager: '王五', operateStatus: '租赁', vehicleStatus: '已交车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '某某租赁公司', operateCompany: '羚牛运营（广东）', vehicleSource: '挂靠', leaseCompany: '第三方融资租赁有限公司', onlineStatus: '在线', year: '2023', mileage: '45200.80', purchaseDate: '2021-05-20', regDate: '2021-06-15', inspectExpire: '2026-06', lastDeliveryTime: '2024-02-01', lastDeliveryMile: '44800.00', lastReturnTime: '2024-02-08', lastReturnMile: '45200.80', scrapDate: '2036-06-30', contractNo: 'HT-2024-003', location: '广东省广州市黄埔区开泰大道200号', gpsTime: '2026-06-01 09:45', fuelType: '电' },
  { id: '6', region: '广东省/深圳市', vin: '5YJ3E1EA1NF123456', plateNo: '粤B12345', vehicleNo: '-', vehicleType: '小型轿车', brand: '特斯拉', model: 'Model 3', color: '红色', parking: '福田停车场', customer: '客户B', department: '华南区', manager: '李四', operateStatus: '租赁', vehicleStatus: '已交车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '某某租赁公司', operateCompany: '羚牛运营（广东）', vehicleSource: '挂靠', leaseCompany: '某某科技有限公司', onlineStatus: '在线', year: '2023', mileage: '5600.00', purchaseDate: '2023-03-08', regDate: '2023-04-01', inspectExpire: '2025-04', lastDeliveryTime: '2024-02-02', lastDeliveryMile: '5200.00', lastReturnTime: '2024-02-11', lastReturnMile: '5600.00', scrapDate: '2038-04-30', contractNo: 'HT-2024-004', location: '广东省深圳市福田区福华路188号', gpsTime: '2026-06-01 11:20', fuelType: '电' },
  { id: '7', region: '广东省/广州市', vin: 'LGWEF4A59NS234567', plateNo: '粤A99A99', vehicleNo: 'V007', vehicleType: '小型轿车', brand: '比亚迪', model: '汉EV', color: '黑色', parking: '天河停车场', customer: '客户A', department: '华南区', manager: '张三', operateStatus: '可运营', vehicleStatus: '待还车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '某某租赁公司', operateCompany: '羚牛运营（嘉兴）', vehicleSource: '自有', leaseCompany: '第三方融资租赁有限公司', onlineStatus: '离线', year: '2022', mileage: '22100.30', purchaseDate: '2022-07-15', regDate: '2022-08-01', inspectExpire: '2026-08', lastDeliveryTime: '2024-01-20', lastDeliveryMile: '21800.00', lastReturnTime: '2024-02-05', lastReturnMile: '22100.30', scrapDate: '2037-08-31', contractNo: '-', location: '广东省广州市天河区体育西路200号', gpsTime: '2026-05-31 18:30', fuelType: '电' },
  { id: '8', region: '山东省/临沂市', vin: 'LZZ5CLSB8NC778899', plateNo: '鲁Q88901', vehicleNo: 'V008', vehicleType: '牵引车', brand: '重汽', model: '豪沃T7H牵引车', color: '蓝色', parking: '-', customer: '无', department: '无', manager: '-', operateStatus: '租赁', vehicleStatus: '调拨中', outStatus: '无', licenseStatus: '异常', insuranceStatus: '正常', ownership: '某某租赁公司', operateCompany: '羚牛运营（嘉兴）', vehicleSource: '自有', leaseCompany: '-', onlineStatus: '离线', year: '2021', mileage: '67800.25', purchaseDate: '2020-06-10', regDate: '2020-07-01', inspectExpire: '2026-04', lastDeliveryTime: '2024-01-25', lastDeliveryMile: '67500.00', lastReturnTime: '2024-02-09', lastReturnMile: '67800.25', scrapDate: '2035-07-31', contractNo: 'HT-2024-011', location: '山东省临沂市兰山区', gpsTime: '2026-05-30 08:20', fuelType: '氢' },
  { id: '9', region: '福建省/厦门市', vin: 'LFWNHXSD8P1122334', plateNo: '闽D55662', vehicleNo: 'V009', vehicleType: '厢式货车', brand: '金龙', model: '凯歌纯电动厢货', color: '白色', parking: '厦门停车场', customer: '客户C', department: '华东区', manager: '赵六', operateStatus: '自营', vehicleStatus: '已备车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '某某科技有限公司', operateCompany: '羚牛运营（上海）', vehicleSource: '外租', leaseCompany: '某某租赁公司', onlineStatus: '在线', year: '2022', mileage: '19800.00', purchaseDate: '2022-12-01', regDate: '2023-01-05', inspectExpire: '2026-04', lastDeliveryTime: '2024-02-07', lastDeliveryMile: '19500.00', lastReturnTime: '2024-02-12', lastReturnMile: '19800.00', scrapDate: '2038-01-31', contractNo: 'HT-2024-008', location: '福建省厦门市思明区', gpsTime: '2026-06-01 15:45', fuelType: '电' },
  { id: '10', region: '安徽省/合肥市', vin: 'LZZ5CLSB8NA123456', plateNo: '皖B66221', vehicleNo: 'V010', vehicleType: '厢式货车', brand: '江淮', model: '格尔发A5', color: '白色', parking: '-', customer: '无', department: '无', manager: '-', operateStatus: '可运营', vehicleStatus: '未备车', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '某某租赁公司', operateCompany: '羚牛运营（广东）', vehicleSource: '挂靠', leaseCompany: '-', onlineStatus: '离线', year: '2020', mileage: '52100.00', purchaseDate: '2020-09-01', regDate: '2020-10-01', inspectExpire: '2026-06', lastDeliveryTime: '2024-01-12', lastDeliveryMile: '51800.00', lastReturnTime: '2024-01-30', lastReturnMile: '52100.00', scrapDate: '2035-10-31', contractNo: '-', location: '安徽省合肥市蜀山区', gpsTime: '2026-05-29 11:00', fuelType: '氢' },
  { id: '11', region: '广东省/广州市', vin: 'LSJA24U70PS555666', plateNo: '粤A11B22', vehicleNo: '-', vehicleType: '小型轿车', brand: '蔚来', model: 'ET5', color: '蓝色', parking: '番禺停车场', customer: '客户A', department: '华南区', manager: '王五', operateStatus: '租赁', vehicleStatus: '替换中', outStatus: '无', licenseStatus: '正常', insuranceStatus: '正常', ownership: '某某租赁公司', operateCompany: '羚牛运营（上海）', vehicleSource: '外租', leaseCompany: '第三方融资租赁有限公司', onlineStatus: '在线', year: '2023', mileage: '7200.50', purchaseDate: '2023-07-20', regDate: '2023-08-05', inspectExpire: '2025-08', lastDeliveryTime: '2024-02-03', lastDeliveryMile: '7000.00', lastReturnTime: '2024-02-11', lastReturnMile: '7200.50', scrapDate: '2038-08-31', contractNo: 'HT-2024-007', location: '广东省广州市番禺区市桥街100号', gpsTime: '2026-06-01 12:00', fuelType: '电' },
  { id: '12', region: '北京市/北京市', vin: 'LSJA24U70PS999000', plateNo: '京H88888', vehicleNo: '-', vehicleType: '小型轿车', brand: '蔚来', model: 'ET5', color: '白色', parking: '昌平停车场', customer: '客户D', department: '华北区', manager: '孙七', operateStatus: '退出运营', vehicleStatus: '无', outStatus: '报废出库', licenseStatus: '无', insuranceStatus: '正常', ownership: '某某科技有限公司', operateCompany: '羚牛运营（上海）', vehicleSource: '外租', leaseCompany: '-', onlineStatus: '离线', year: '2022', mileage: '15600.00', purchaseDate: '2022-06-20', regDate: '2022-07-10', inspectExpire: '2024-07', lastDeliveryTime: '2024-01-10', lastDeliveryMile: '15300.00', lastReturnTime: '2024-01-28', lastReturnMile: '15600.00', scrapDate: '2037-07-31', contractNo: '-', location: '北京市昌平区回龙观西大街100号', gpsTime: '2026-05-28 12:30', fuelType: '电' },
];

const vmFormatStatus = (val) => (val === '无' || val === '-' ? '—' : (val || '—'));

const vmHasCustomer = (name) => vmFormatStatus(name) !== '—';

const VM_LONG_TEXT_LABELS = new Set(['客户名称', '登记所有权', '运营公司', '租赁公司', '当前位置', '型号', '车辆类型']);

const vmOperateBadgeClass = (status) => {
  if (status === '租赁') return 'xll-vm-badge';
  if (status === '自营') return 'xll-vm-badge warn';
  if (status === '退出运营') return 'xll-vm-badge danger';
  return 'xll-vm-badge neutral';
};

const VmCustomerBar = ({ name, variant = 'list', onExpand }) => {
  const display = vmFormatStatus(name);
  if (!vmHasCustomer(name)) return null;
  const isLong = display.length > 14;
  const handleExpand = (e) => {
    if (!isLong || !onExpand) return;
    e.stopPropagation();
    onExpand(display);
  };
  return (
    <div
      className={`xll-vm-customer-bar xll-vm-customer-bar--${variant}${isLong && onExpand ? ' is-long' : ''}`}
      onClick={handleExpand}
      onKeyDown={(e) => e.key === 'Enter' && handleExpand(e)}
      role={isLong && onExpand ? 'button' : undefined}
      tabIndex={isLong && onExpand ? 0 : undefined}
    >
      <span className="xll-vm-customer-icon" aria-hidden="true">客</span>
      <div className="xll-vm-customer-body">
        <span className="xll-vm-customer-label">客户名称</span>
        <span className="xll-vm-customer-text" title={display}>{display}</span>
        {isLong && onExpand && variant === 'list' ? <span className="xll-vm-customer-hint">点击查看全称</span> : null}
      </div>
    </div>
  );
};

const VmInfoRow = ({ label, value, onClick, longText }) => (
  <div className={`xll-mod-form-row${longText ? ' xll-mod-form-row--stack' : ''}`}>
    <span className="xll-mod-form-label">{label}</span>
    {onClick ? (
      <button type="button" className="xll-mod-form-value" style={{ border: 'none', background: 'transparent', color: XLL_GREEN, textAlign: longText ? 'left' : 'right', cursor: 'pointer', padding: 0 }} onClick={onClick}>{value}</button>
    ) : (
      <span className="xll-mod-form-value">{value}</span>
    )}
  </div>
);

const VehicleManagementModule = ({ onRegisterBack }) => {
  const vehicles = VM_MOCK_VEHICLES;
  const [searchKey, setSearchKey] = useState('');
  const [operateFilter, setOperateFilter] = useState('');
  const [vehicleStatusFilter, setVehicleStatusFilter] = useState('');
  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
  const [detailVehicle, setDetailVehicle] = useState(null);
  const [detailTab, setDetailTab] = useState('detail');
  const [licenseNav, setLicenseNav] = useState('driverLicense');
  const [customerNamePreview, setCustomerNamePreview] = useState(null);

  const filteredList = useMemo(() => {
    const q = searchKey.trim().toLowerCase();
    return vehicles.filter((v) => {
      if (operateFilter && v.operateStatus !== operateFilter) return false;
      if (vehicleStatusFilter && v.vehicleStatus !== vehicleStatusFilter) return false;
      if (!q) return true;
      return (
        (v.plateNo && v.plateNo.toLowerCase().includes(q))
        || (v.vin && v.vin.toLowerCase().includes(q))
        || (v.brand && v.brand.toLowerCase().includes(q))
        || (v.model && v.model.toLowerCase().includes(q))
        || (v.customer && v.customer.toLowerCase().includes(q))
        || (v.region && v.region.toLowerCase().includes(q))
      );
    });
  }, [vehicles, searchKey, operateFilter, vehicleStatusFilter]);

  const activeFilterCount = (operateFilter ? 1 : 0) + (vehicleStatusFilter ? 1 : 0);

  const openDetail = useCallback((v) => {
    setDetailTab('detail');
    setLicenseNav('driverLicense');
    setDetailVehicle(v);
  }, []);

  useEffect(() => {
    if (!onRegisterBack) return undefined;
    onRegisterBack(() => {
      if (customerNamePreview) { setCustomerNamePreview(null); return true; }
      if (detailVehicle) { setDetailVehicle(null); return true; }
      return false;
    });
    return () => onRegisterBack(null);
  }, [detailVehicle, customerNamePreview, onRegisterBack]);

  const renderDetailTab = (v) => (
    <div className="xll-mod-section" style={{ margin: '12px 14px 0' }}>
      <div className="xll-mod-section-title">运营信息</div>
      <div className="xll-vm-detail-grid">
        <VmDetailKv label="运营城市" value={v.region ? v.region.replace(/\//g, ' · ') : '—'} />
        <VmDetailKv label="运营状态" value={v.operateStatus} />
        <VmDetailKv label="车辆状态" value={vmFormatStatus(v.vehicleStatus)} />
        <VmDetailKv label="出库状态" value={vmFormatStatus(v.outStatus)} />
        <VmDetailKv label="证照状态" value={vmFormatStatus(v.licenseStatus)} />
        <VmDetailKv label="保险状态" value={vmFormatStatus(v.insuranceStatus)} />
        <VmDetailKv label="在线状态" value={v.onlineStatus} />
        <VmDetailKv label="客户名称" value={vmFormatStatus(v.customer)} full />
        <VmDetailKv label="业务部门" value={vmFormatStatus(v.department)} />
        <VmDetailKv label="业务负责人" value={vmFormatStatus(v.manager)} />
        <VmDetailKv label="合同编号" value={v.contractNo && v.contractNo !== '-' ? v.contractNo : '—'} full />
      </div>
      <div className="xll-mod-section-title" style={{ marginTop: 16 }}>车辆档案</div>
      <div className="xll-vm-detail-grid">
        <VmDetailKv label="车辆识别代号" value={v.vin} full />
        <VmDetailKv label="车牌号" value={v.plateNo} />
        <VmDetailKv label="车辆编号" value={vmFormatStatus(v.vehicleNo)} />
        <VmDetailKv label="品牌" value={v.brand} />
        <VmDetailKv label="型号" value={v.model} full />
        <VmDetailKv label="车辆类型" value={v.vehicleType} />
        <VmDetailKv label="车身颜色" value={v.color} />
        <VmDetailKv label="燃料种类" value={v.fuelType || '—'} />
        <VmDetailKv label="出厂年份" value={v.year} />
        <VmDetailKv label="行驶公里数" value={v.mileage ? `${v.mileage} KM` : '—'} />
      </div>
      <div className="xll-mod-section-title" style={{ marginTop: 16 }}>权属与停放</div>
      <div className="xll-vm-detail-grid">
        <VmDetailKv label="登记所有权" value={v.ownership || '—'} full />
        <VmDetailKv label="运营公司" value={v.operateCompany} full />
        <VmDetailKv label="车辆来源" value={v.vehicleSource} />
        <VmDetailKv label="租赁公司" value={vmFormatStatus(v.leaseCompany)} full />
        <VmDetailKv label="归属停车场" value={vmFormatStatus(v.parking)} />
        <VmDetailKv label="采购入库时间" value={v.purchaseDate} />
        <VmDetailKv label="行驶证注册" value={v.regDate} />
        <VmDetailKv label="检验有效期" value={v.inspectExpire} />
        <VmDetailKv label="强制报废日期" value={v.scrapDate} />
      </div>
      <div className="xll-mod-section-title" style={{ marginTop: 16 }}>交还车与定位</div>
      <div className="xll-vm-detail-grid">
        <VmDetailKv label="上次交车时间" value={v.lastDeliveryTime || '—'} />
        <VmDetailKv label="上次交车里程" value={v.lastDeliveryMile ? `${v.lastDeliveryMile} KM` : '—'} />
        <VmDetailKv label="上次还车时间" value={v.lastReturnTime || '—'} />
        <VmDetailKv label="上次还车里程" value={v.lastReturnMile ? `${v.lastReturnMile} KM` : '—'} />
        <VmDetailKv label="GPS上传时间" value={v.gpsTime || '—'} full />
        <VmDetailKv label="当前位置" value={v.location || '—'} full />
      </div>
    </div>
  );

  const renderCertFields = (navKey, data) => {
    const d = data[navKey] || {};
    const photos = d.photos || [];
    const rows = [];
    if (navKey === 'driverLicense') {
      rows.push(['注册日期', d.regDate], ['发证日期', d.issueDate], ['强制报废期', d.scrapDate], ['检验有效期', d.expireDate], ['上海下次等评', d.shNextEvaluation], ['更新人', d.updateUser]);
    } else if (navKey === 'transportLicense') {
      rows.push(['证件编号', d.licenseNo], ['发证日期', d.issueDate], ['证件有效期', d.expireDate], ['审验有效期', d.inspectValidUntil], ['更新人', d.updateUser]);
    } else if (navKey === 'hydrogenCard') {
      rows.push(['卡号', d.cardNo], ['卡类型', d.cardType], ['余额（￥）', d.balance != null && d.balance !== '' ? formatMoneySymbol(d.balance) : ''], ['发卡时间', d.issueDate], ['发卡人', d.issueUser]);
    } else if (navKey === 'safetyValve' || navKey === 'pressureGauge') {
      rows.push(['检验日期', d.inspectDate], ['下次检验日期', d.nextInspectDate]);
    } else if (navKey === 'specialEquipDecal') {
      rows.push(['下次检验日期', d.nextInspectDate], ['更新人', d.updateUser]);
    }
    return (
      <>
        {navKey !== 'hydrogenCard' && (
          photos.length > 0 ? (
            <div className="xll-vm-photo-grid">
              {photos.map((url, i) => (
                <div className="xll-vm-photo" key={i}><img src={url} alt="" /></div>
              ))}
            </div>
          ) : (
            <div className="xll-vm-photo-empty">暂无证照影像</div>
          )
        )}
        {rows.map(([label, val]) => (
          <VmInfoRow key={label} label={label} value={val || '—'} longText={label.includes('编号') || label.includes('卡号')} />
        ))}
      </>
    );
  };

  const renderLicenseTab = (v) => {
    const bundle = vmGetLicenseBundle(v.plateNo);
    const navLabel = VM_CERT_NAV.find((n) => n.key === licenseNav)?.label || '';
    return (
      <div className="xll-mod-section" style={{ margin: '12px 14px 0' }}>
        <div className="xll-mod-section-title">证照档案 · {v.plateNo}</div>
        <div className="xll-vm-cert-nav" role="tablist">
          {VM_CERT_NAV.map((item) => (
            <button key={item.key} type="button" role="tab" aria-selected={licenseNav === item.key} className={`xll-vm-cert-nav-btn${licenseNav === item.key ? ' active' : ''}`} onClick={() => setLicenseNav(item.key)}>{item.label}</button>
          ))}
        </div>
        <div className="xll-mod-section-title" style={{ fontSize: 13, marginBottom: 10 }}>{navLabel}</div>
        {renderCertFields(licenseNav, bundle)}
      </div>
    );
  };

  const renderInsuranceTab = (v) => {
    const policies = vmGetInsurancePolicies(v);
    return (
      <div style={{ margin: '12px 14px 0' }}>
        {policies.map((p) => {
          const st = vmInsuranceStatus(p.endDate);
          return (
            <div className="xll-vm-ins-card" key={p.type}>
              <div className="xll-vm-ins-head">
                <span className="xll-vm-ins-type">{p.type}</span>
                <span className={`xll-vm-ins-status ${st.cls}`}>{st.label}</span>
              </div>
              {p.startDate ? (
                <>
                  <div className="xll-vm-ins-row"><span>保险期间</span><span>{p.startDate} 至 {p.endDate}</span></div>
                  <div className="xll-vm-ins-row"><span>承保公司</span><span style={{ textAlign: 'right', maxWidth: '58%' }}>{p.company}</span></div>
                  <div className="xll-vm-ins-row"><span>保单号</span><span>{p.policyNo}</span></div>
                  <div className="xll-vm-ins-row"><span>保费</span><span>{p.premium ? formatMoneySymbol(p.premium) : '—'}</span></div>
                  {p.hasPdf && (
                    <button type="button" className="xll-vm-ins-pdf" onClick={() => message.success(`${p.type} PDF 保单下载已开始（原型）`)}>下载 PDF 保单</button>
                  )}
                </>
              ) : (
                <div className="xll-vm-ins-row"><span>暂无有效保单</span></div>
              )}
            </div>
          );
        })}
      </div>
    );
  };

  const renderEventsTab = (v) => {
    const events = vmGetVehicleEvents(v);
    return (
      <div className="xll-mod-section" style={{ margin: '12px 14px 0' }}>
        <div className="xll-mod-section-title">全生命周期事件</div>
        <div className="xll-vm-event-list">
          {events.map((ev, i) => (
            <div className="xll-vm-event-item" key={`${ev.type}-${i}`}>
              <span className="xll-vm-event-dot" aria-hidden="true" />
              <div className="xll-vm-event-type">{ev.type}</div>
              <div className="xll-vm-event-meta">{ev.time} · {ev.operator}</div>
              <div className="xll-vm-event-summary">{ev.summary}</div>
              {ev.extra ? <div className="xll-vm-event-meta" style={{ marginTop: 4 }}>{ev.extra}</div> : null}
            </div>
          ))}
        </div>
      </div>
    );
  };

  const renderNamePreviewModal = () => (Modal ? (
    <Modal
      title="客户名称"
      open={!!customerNamePreview}
      centered
      footer={null}
      onCancel={() => setCustomerNamePreview(null)}
    >
      <div className="xll-vm-name-modal-text">{customerNamePreview}</div>
      <button
        type="button"
        className="xll-mod-btn-primary"
        style={{ width: '100%', minHeight: 44, borderRadius: 12, marginTop: 16 }}
        onClick={() => { message.success('已复制（原型）'); setCustomerNamePreview(null); }}
      >
        复制名称
      </button>
    </Modal>
  ) : null);

  if (detailVehicle) {
    const v = detailVehicle;
    return (
      <div className="xll-mod-root">
        <div className="xll-mod-scroll" style={{ paddingBottom: 24 }}>
          <div className="xll-vm-detail-hero">
            <div className="xll-vm-plate-row">
              <span className="xll-vm-detail-plate">{v.plateNo}</span>
              <span className={vmOperateBadgeClass(v.operateStatus)}>{v.operateStatus}</span>
              <span className={`xll-vm-online${v.onlineStatus === '在线' ? '' : ''}`}>
                <span className={`xll-vm-dot ${v.onlineStatus === '在线' ? 'on' : 'off'}`} />
                {v.onlineStatus}
              </span>
            </div>
            <div className="xll-vm-detail-sub">{v.brand} · {v.model}<br />{v.vin}</div>
            <div className="xll-vm-detail-tags">
              <span className="xll-vm-badge neutral">{vmFormatStatus(v.vehicleStatus)}</span>
              {v.licenseStatus === '异常' && <span className="xll-vm-badge danger">证照异常</span>}
              {v.insuranceStatus === '异常' && <span className="xll-vm-badge danger">保险异常</span>}
            </div>
          </div>
          <div className="xll-vm-subtabs" role="tablist">
            {VM_DETAIL_TABS.map((tab) => (
              <button key={tab.key} type="button" role="tab" aria-selected={detailTab === tab.key} className={`xll-vm-subtab${detailTab === tab.key ? ' active' : ''}`} onClick={() => setDetailTab(tab.key)}>{tab.label}</button>
            ))}
          </div>
          {detailTab === 'detail' && renderDetailTab(v)}
          {detailTab === 'license' && renderLicenseTab(v)}
          {detailTab === 'insurance' && renderInsuranceTab(v)}
          {detailTab === 'events' && renderEventsTab(v)}
        </div>
        {renderNamePreviewModal()}
      </div>
    );
  }

  return (
    <div className="xll-mod-root">
      <div className="xll-mod-toolbar">
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div className="xll-mod-search" style={{ flex: 1 }}>
            <IconSearch />
            <input type="search" placeholder="搜索车牌、VIN、品牌、客户" value={searchKey} onChange={(e) => setSearchKey(e.target.value)} aria-label="搜索车辆" />
          </div>
          <button type="button" className={`xll-vm-filter-btn${activeFilterCount ? ' active' : ''}`} onClick={() => setFilterDrawerOpen(true)} aria-label="筛选">
            <IconFilter />
          </button>
        </div>
        {(operateFilter || vehicleStatusFilter) && (
          <div className="xll-mod-chips" style={{ marginTop: 10 }}>
            {operateFilter && (
              <button type="button" className="xll-mod-chip active" onClick={() => setOperateFilter('')}>运营：{operateFilter} ×</button>
            )}
            {vehicleStatusFilter && (
              <button type="button" className="xll-mod-chip active" onClick={() => setVehicleStatusFilter('')}>状态：{vehicleStatusFilter} ×</button>
            )}
          </div>
        )}
      </div>
      <div className="xll-mod-list-head"><span>全部车辆</span><span>共 {filteredList.length} 辆</span></div>
      <div className="xll-mod-list">
        {filteredList.length === 0 ? (
          <div className="xll-mod-empty">暂无匹配车辆<br />试试清空搜索或筛选条件</div>
        ) : (
          filteredList.map((v) => (
            <div
              key={v.id}
              className="xll-mod-card"
              style={{ '--mod-accent': XLL_GREEN, '--mod-soft': XLL_GREEN_SOFT }}
              role="button"
              tabIndex={0}
              onClick={() => openDetail(v)}
              onKeyDown={(e) => e.key === 'Enter' && openDetail(v)}
            >
              <div className="xll-mod-card-head">
                <span className="xll-mod-ar-plate">{v.plateNo}</span>
                <span className={`xll-vm-online${v.onlineStatus === '在线' ? '' : ''}`}>
                  <span className={`xll-vm-dot ${v.onlineStatus === '在线' ? 'on' : 'off'}`} />
                  {v.onlineStatus}
                </span>
              </div>
              <div className="xll-mod-card-sub">{v.brand} · {v.model}</div>
              <VmCustomerBar name={v.customer} variant="list" onExpand={setCustomerNamePreview} />
              <div className="xll-mod-meta">
                <div className="xll-vm-meta-cell"><span className="xll-mod-meta-label">运营城市</span><span className="xll-mod-meta-val">{v.region ? v.region.replace(/\//g, ' · ') : '—'}</span></div>
                <div className="xll-vm-meta-cell"><span className="xll-mod-meta-label">运营状态</span><span className="xll-mod-meta-val">{v.operateStatus}</span></div>
                <div className="xll-vm-meta-cell"><span className="xll-mod-meta-label">车辆状态</span><span className="xll-mod-meta-val">{vmFormatStatus(v.vehicleStatus)}</span></div>
                <div className="xll-vm-meta-cell"><span className="xll-mod-meta-label">保险状态</span><span className="xll-mod-meta-val" style={{ color: v.insuranceStatus === '异常' ? COLOR_DANGER : COLOR_TEXT_SEC }}>{v.insuranceStatus}</span></div>
                <div className="xll-vm-meta-cell"><span className="xll-mod-meta-label">证照状态</span><span className="xll-mod-meta-val" style={{ color: v.licenseStatus === '异常' ? COLOR_DANGER : COLOR_TEXT_SEC }}>{vmFormatStatus(v.licenseStatus)}</span></div>
                <div className="xll-vm-meta-cell"><span className="xll-mod-meta-label">车辆来源</span><span className="xll-mod-meta-val">{v.vehicleSource || '—'}</span></div>
              </div>
              <div className="xll-mod-card-foot">
                <div className="xll-vm-card-vin-wrap">
                  <span className="xll-vm-card-vin-label">车辆识别代码</span>
                  <span className="xll-vm-card-vin" title={v.vin}>{v.vin}</span>
                </div>
                <button type="button" className="xll-mod-card-btn" onClick={(e) => { e.stopPropagation(); openDetail(v); }}>查看</button>
              </div>
            </div>
          ))
        )}
      </div>
      {Drawer ? (
        <Drawer title="筛选车辆" placement="bottom" height={420} open={filterDrawerOpen} onClose={() => setFilterDrawerOpen(false)} styles={{ body: { padding: '12px 16px 24px' } }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: COLOR_TEXT, marginBottom: 8 }}>运营状态</div>
          <div className="xll-mod-drawer-types" style={{ marginBottom: 16 }}>
            <button type="button" className={`xll-mod-drawer-type-btn${!operateFilter ? ' active' : ''}`} onClick={() => setOperateFilter('')}>全部</button>
            {VM_OPERATE_STATUSES.map((s) => (
              <button key={s} type="button" className={`xll-mod-drawer-type-btn${operateFilter === s ? ' active' : ''}`} onClick={() => setOperateFilter(s)}>{s}</button>
            ))}
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: COLOR_TEXT, marginBottom: 8 }}>车辆状态</div>
          <div className="xll-mod-drawer-types">
            <button type="button" className={`xll-mod-drawer-type-btn${!vehicleStatusFilter ? ' active' : ''}`} onClick={() => setVehicleStatusFilter('')}>全部</button>
            {VM_VEHICLE_STATUSES.map((s) => (
              <button key={s} type="button" className={`xll-mod-drawer-type-btn${vehicleStatusFilter === s ? ' active' : ''}`} onClick={() => setVehicleStatusFilter(s)}>{s}</button>
            ))}
          </div>
          <div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
            <button type="button" className="xll-mod-btn-ghost" style={{ flex: 1, minHeight: 44, borderRadius: 12 }} onClick={() => { setOperateFilter(''); setVehicleStatusFilter(''); }}>重置</button>
            <button type="button" className="xll-mod-btn-primary" style={{ flex: 1, minHeight: 44, borderRadius: 12 }} onClick={() => { setFilterDrawerOpen(false); message.success('筛选已应用'); }}>确定</button>
          </div>
        </Drawer>
      ) : null}
      {renderNamePreviewModal()}
    </div>
  );
};

const IconBack = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
    <polyline points="15 18 9 12 15 6" />
  </svg>
);
const IconSearch = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
  </svg>
);
const IconFilter = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
  </svg>
);
const IconGlobe = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
  </svg>
);
const IconTruck = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <rect x="1" y="3" width="15" height="13" rx="1" /><path d="M16 8h4l3 3v5h-7V8z" /><circle cx="5.5" cy="18.5" r="2.5" /><circle cx="18.5" cy="18.5" r="2.5" />
  </svg>
);
const IconStation = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <path d="M12 2v4" /><path d="M12 18v4" /><path d="M4.93 4.93l2.83 2.83" /><path d="M16.24 16.24l2.83 2.83" /><path d="M2 12h4" /><path d="M18 12h4" /><path d="M4.93 19.07l2.83-2.83" /><path d="M16.24 7.76l2.83-2.83" /><circle cx="12" cy="12" r="4" />
  </svg>
);
const IconStatusSignal = () => (
  <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor" aria-hidden="true">
    <rect x="0" y="7" width="3" height="5" rx="0.5" /><rect x="5" y="5" width="3" height="7" rx="0.5" /><rect x="10" y="2" width="3" height="10" rx="0.5" /><rect x="15" y="0" width="3" height="12" rx="0.5" />
  </svg>
);
const IconStatusWifi = () => (
  <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
    <path d="M8 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" stroke="none" />
    <path d="M4.5 7.2a4.8 4.8 0 0 1 7 0" strokeLinecap="round" /><path d="M1.5 4.2a8.5 8.5 0 0 1 13 0" strokeLinecap="round" />
  </svg>
);
const IconStatusBattery = () => (
  <svg width="26" height="12" viewBox="0 0 26 12" fill="none" aria-hidden="true">
    <rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="currentColor" strokeOpacity="0.45" />
    <rect x="2.5" y="2.5" width="16" height="7" rx="1.5" fill="currentColor" />
    <path d="M23 4.5v3c.8-.45 1.3-1.15 1.3-1.5S23.8 4.95 23 4.5Z" fill="currentColor" fillOpacity="0.45" />
  </svg>
);
const IconTabTodo = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill={active ? XLL_GREEN : 'none'} stroke={active ? XLL_GREEN : COLOR_MUTED} strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
  </svg>
);
const IconTabBusiness = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={active ? XLL_GREEN : COLOR_MUTED} strokeWidth="2" aria-hidden="true">
    <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
  </svg>
);
const IconTabMap = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={active ? XLL_GREEN : COLOR_MUTED} strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" /><line x1="8" y1="2" x2="8" y2="18" /><line x1="16" y1="6" x2="16" y2="22" />
  </svg>
);
const IconTabMine = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={active ? XLL_GREEN : COLOR_MUTED} strokeWidth="2" strokeLinecap="round" aria-hidden="true">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
  </svg>
);
const IconWarn = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true">
    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
  </svg>
);

const TASK_ICONS = {
  delivery: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
      <path d="M5 17h14v-5H5v5z" /><path d="M5 12V7h10l3 5" /><circle cx="7.5" cy="17" r="1.5" /><circle cx="16.5" cy="17" r="1.5" />
    </svg>
  ),
  return: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
      <polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
    </svg>
  ),
  inspection: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" />
    </svg>
  ),
  transfer: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
      <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  move: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
      <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
    </svg>
  ),
};

const BIZ_ICONS = {
  vehicle: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><rect x="1" y="3" width="15" height="13" rx="1" /><path d="M16 8h4l3 3v5h-7V8z" /><circle cx="5.5" cy="18.5" r="2.5" /><circle cx="18.5" cy="18.5" r="2.5" /></svg>),
  prepare: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg>),
  delivery: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M5 17h14v-5H5v5z" /><path d="M5 12V7h10l3 5" /><circle cx="7.5" cy="17" r="1.5" /><circle cx="16.5" cy="17" r="1.5" /></svg>),
  return: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /></svg>),
  replace: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><polyline points="17 1 21 5 17 9" /><path d="M3 11V9a4 4 0 0 1 4-4h14" /><polyline points="7 23 3 19 7 15" /><path d="M21 13v2a4 4 0 0 1-4 4H3" /></svg>),
  move: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>),
  transfer: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>),
  inspection: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /></svg>),
  fault: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>),
  training: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></svg>),
  audit: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" /></svg>),
  'stat-vehicle': () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" /></svg>),
  'stat-h2-fee': () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="12" y1="1" x2="12" y2="23" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></svg>),
  'stat-h2-qty': () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" /></svg>),
  'stat-electric': () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>),
  'mileage-query': () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>),
  'mileage-assess': () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg>),
};

const TAB_ICON_MAP = {
  todo: IconTabTodo,
  business: IconTabBusiness,
  map: IconTabMap,
  mine: IconTabMine,
};

const PRD_DOCS = {
  login: {
    title: '登录页 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">小羚羚小程序</span>
        <div className="xll-prd-meta">版本 V1.0 · 模块：账号登录 · 适用：全体企业微信/小程序用户</div>
        <div className="xll-prd-h2">一、目标</div>
        <p className="xll-prd-p">提供企业微信授权或账号密码登录入口，登录成功后进入「工作台」默认 Tab，并拉取待办数量与消息未读数。</p>
        <div className="xll-prd-highlight">登录按钮点击后应展示 Loading 状态，防止重复提交；成功后 Toast 提示并跳转工作台。</div>
        <div className="xll-prd-h2">二、页面元素</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">品牌 Logo + 产品名「小羚羚」。</li>
          <li className="xll-prd-li">主按钮「企业微信一键登录」（原型模拟）。</li>
          <li className="xll-prd-li">右上角「需求说明」随时可查看本文档。</li>
        </ul>
        <div className="xll-prd-h2">三、交互</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">登录成功 → 进入主框架，默认展示工作台待办列表。</li>
          <li className="xll-prd-li">登录态本地缓存，下次打开免登（原型省略）。</li>
        </ul>
      </div>
    ),
  },
  todo: {
    title: '待办 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">工作台 / 待办</span>
        <div className="xll-prd-meta">版本 V1.0 · 参照设计图1 · 聚合运维待办任务</div>
        <div className="xll-prd-h2">一、目标</div>
        <p className="xll-prd-p">一线人员登录后首屏聚合<strong>交车、还车、年审、调拨、异动</strong>等待处理任务，按卡片展示关键字段，支持「去处理」进入办理页。</p>
        <div className="xll-prd-h2">二、列表卡片</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">左侧色条 + 类型图标区分任务类别。</li>
          <li className="xll-prd-li">右上角黄色数字角标：同类型待办条数（可选）。</li>
          <li className="xll-prd-li">年审到期显示红色警告标签（不仅靠颜色）。</li>
          <li className="xll-prd-li">右侧绿色「去处理」按钮，触控区域 ≥44px。</li>
        </ul>
        <div className="xll-prd-h2">三、导航</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">左上返回：子模块内先退子页，再退回工作台。</li>
          <li className="xll-prd-li">底部 Tab：图标 + 文字标签，当前页高亮。</li>
        </ul>
      </div>
    ),
  },
  'todo-detail': {
    title: '待办办理 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">待办子页</span>
        <div className="xll-prd-h2">一、通用规则</div>
        <p className="xll-prd-p">从待办卡片「去处理」进入，顶部 Hero 展示任务类型与标题，正文只读展示任务详情，底部「确认办理」提交。</p>
        <div className="xll-prd-h2">二、分类型差异</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>交车</strong>：进入内嵌交车管理（列表 + 分步办理表单）。</li>
          <li className="xll-prd-li"><strong>还车</strong>：还车验车、费用预检入口。</li>
          <li className="xll-prd-li"><strong>年审</strong>：进入内嵌年审管理（待处理 / 办理 / 历史记录）。</li>
          <li className="xll-prd-li"><strong>调拨/异动</strong>：审批前核对路线、车辆与申请人信息。</li>
        </ul>
      </div>
    ),
  },
  business: {
    title: '业务 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">业务入口</span>
        <div className="xll-prd-meta">版本 V1.0 · 参照设计图2-3 · 功能宫格导航</div>
        <div className="xll-prd-h2">一、信息架构</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>运维管理</strong>：车辆管理、备车、交/还/替换车、异动、调拨、年审、故障、司机安全培训。</li>
          <li className="xll-prd-li"><strong>审批管理</strong>：审批中心（对接 ONE-OS 审批中心）。</li>
          <li className="xll-prd-li"><strong>数据可视化</strong>：车辆/氢费/氢量/电量统计、里程查询与考核。</li>
        </ul>
        <div className="xll-prd-h2">二、角标规则</div>
        <p className="xll-prd-p">绿色圆形角标表示待处理数量；99+ 时显示 99。无待办则不展示角标。</p>
        <div className="xll-prd-h2">三、交互</div>
        <p className="xll-prd-p">点击「审批中心」「年审」「交车」「车辆管理」在小羚羚壳内嵌打开完整模块（绿色主题统一）；其余宫格 Toast 提示（原型）。</p>
      </div>
    ),
  },
  delivery: {
    title: '交车 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">运维管理 / 交车</span>
        <div className="xll-prd-meta">版本 V1.0 · 参照 web 交车管理 + Axhub「交车（完成）」原型 · 默认区域权限：浙江省-嘉兴市</div>
        <div className="xll-prd-h2">一、列表页</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">KPI：全部 / 进行中 / 已完成，点击切换筛选。</li>
          <li className="xll-prd-li">搜索：车牌、项目、客户名称。</li>
          <li className="xll-prd-li">卡片：车牌（未选车显示「车辆待选」）、交车状态 Tag（未开始 / 已保存 / 待客户签章 / 客户已签章）、项目、客户、交车区域。</li>
          <li className="xll-prd-li">进行中 Tab 下提供状态筛选 Chip：全部状态、未开始、已保存、待客户签章。</li>
          <li className="xll-prd-li">进行中任务展示「去办理 / 继续办理」按钮。</li>
        </ul>
        <div className="xll-prd-h2">二、分步表单（5 步）</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>交车信息</strong>：Hero 展示客户名称、项目名称与交车区域；同页含合同任务字段及车牌/VIN 选择。</li>
          <li className="xll-prd-li"><strong>车辆信息</strong>：广告、尾板、备胎、驾驶培训。</li>
          <li className="xll-prd-li"><strong>交车数据</strong>：交车时间、里程、氢量（%/MPa）、电量。</li>
          <li className="xll-prd-li"><strong>交车照片</strong>：车身/底盘/轮胎/瑕疵/其他，分模块上传。</li>
          <li className="xll-prd-li"><strong>确认提交</strong>：摘要核对；保存草稿或提交签章（待客户签章）。</li>
        </ul>
        <div className="xll-prd-h2">三、查看态</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">客户已签章 / 待客户签章：只读浏览各步骤，不可编辑。</li>
          <li className="xll-prd-li">已完成可下载 E签宝签章 PDF；展示是否归还。</li>
        </ul>
        <div className="xll-prd-h2">四、导航</div>
        <p className="xll-prd-p">表单内左上返回先退出办理页；再次返回退出交车模块。步骤条可点击跳转。</p>
      </div>
    ),
  },
  map: {
    title: '地图 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">地图</span>
        <div className="xll-prd-meta">版本 V1.0 · 参照设计图4 · 腾讯地图</div>
        <div className="xll-prd-h2">一、Tab 切换</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>氢能车</strong>：展示在租氢能车辆实时位置（卡车 Marker）。</li>
          <li className="xll-prd-li"><strong>加氢站</strong>：展示合作加氢站 POI。</li>
        </ul>
        <div className="xll-prd-h2">二、工具栏</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">车牌号搜索：带搜索图标，聚焦时高亮边框。</li>
          <li className="xll-prd-li">筛选：按区域、运营状态过滤。</li>
          <li className="xll-prd-li">「全图」：恢复全国视野。</li>
        </ul>
      </div>
    ),
  },
  mine: {
    title: '我的 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">我的</span>
        <div className="xll-prd-meta">版本 V1.0 · 参照设计图5 · 个人中心</div>
        <div className="xll-prd-h2">一、展示字段</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">顶部 Hero 展示头像、姓名与岗位。</li>
          <li className="xll-prd-li">姓名、账号、手机号（脱敏展示）。</li>
        </ul>
        <div className="xll-prd-h2">二、退出登录</div>
        <p className="xll-prd-p">点击「退出登录」需二次确认弹窗，确认后清除 Token 返回登录页。</p>
      </div>
    ),
  },
  audit: {
    title: '审批中心 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">审批管理 / 审批中心</span>
        <div className="xll-prd-meta">版本 V1.0 · 对接 ONE-OS 审批中心 · 适用：有审批权限的业务/财务/管理人员</div>
        <div className="xll-prd-h2">一、目标</div>
        <p className="xll-prd-p">在小程序内聚合「我发起的 / 我的待办 / 我的已办 / 抄送我的」四类审批任务，支持按流程类型筛选与搜索，点击进入对应流程的办理或查看页。</p>
        <div className="xll-prd-h2">二、列表 Tab</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>我发起的</strong>：当前用户作为发起人的流程。</li>
          <li className="xll-prd-li"><strong>我的待办</strong>：待当前用户审批，卡片展示当前节点与处理人。</li>
          <li className="xll-prd-li"><strong>我的已办</strong>：当前用户已处理过的历史记录。</li>
          <li className="xll-prd-li"><strong>抄送我的</strong>：仅知会、无需操作的任务。</li>
        </ul>
        <div className="xll-prd-h2">三、列表卡片字段</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">流程类型色条 + 类型名称（合同审批、提车应收款、租赁账单、还车应结款、车辆调拨、替换车申请等）。</li>
          <li className="xll-prd-li">单据号、摘要、发起人、到达/完成时间。</li>
          <li className="xll-prd-li">客户类流程额外展示客户名称、项目名称；还车展示应退/应补金额。</li>
          <li className="xll-prd-li">状态 Tag：审批中 / 已通过 / 已驳回 / 已终止。</li>
        </ul>
        <div className="xll-prd-h2">四、筛选与搜索</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">快捷 Chip：全部、合同审批、提车应收款、租赁账单、车辆调拨；「更多类型」抽屉展示全部流程类型。</li>
          <li className="xll-prd-li">搜索范围：单据号、摘要、流程类型、发起人、客户名、项目名、车牌号。</li>
        </ul>
        <div className="xll-prd-h2">五、跳转规则</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">已接入详情页：提车应收款、还车应结款、租赁账单、车辆调拨（申请/运维）、替换车申请。</li>
          <li className="xll-prd-li">待办 Tab 进入办理态（底部展示通过/驳回/终止/评论）；其余 Tab 为只读查看态。</li>
          <li className="xll-prd-li">左上返回：详情页先退回列表，再退回业务入口。</li>
        </ul>
      </div>
    ),
  },
  'audit-pickup': {
    title: '提车应收款审批 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">审批中心 / 提车应收款</span>
        <div className="xll-prd-meta">版本 V1.0 · 数据源自提车应收款业务单 · 审批节点：业管 → 财务</div>
        <div className="xll-prd-h2">一、页面目标</div>
        <p className="xll-prd-p">审批人核对本次提车实收金额是否与合同约定一致，确认车辆明细、氢费预付款（如有）及开票信息后方可通过。</p>
        <div className="xll-prd-h2">二、Hero 区</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">主金额：<strong>实收款总额</strong>（大字号，橙色主题）。</li>
          <li className="xll-prd-li">副信息：客户名称、合同编码、项目名称、提车台数。</li>
          <li className="xll-prd-li">对比行：应收款总额、较应收减免差额。</li>
          <li className="xll-prd-li">「实收明细」底部抽屉：分项展示月租金、保证金、服务费、减免及氢费预收（如有）。</li>
        </ul>
        <div className="xll-prd-h2">三、正文区块</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>车辆明细</strong>：逐车展示品牌型号、车牌、应收/实收租金、保证金、服务费及减免凭证。</li>
          <li className="xll-prd-li"><strong>氢费预付款</strong>（首期有）：应收、实收、减免金额与备注。</li>
          <li className="xll-prd-li"><strong>开票信息</strong>：开票方式、开票备注。</li>
          <li className="xll-prd-li"><strong>审批情况</strong>：时间轴展示各部门审批状态、审批人、时间。</li>
        </ul>
        <div className="xll-prd-h2">四、底部操作（待办态）</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">评论：填写意见，不改变流程状态。</li>
          <li className="xll-prd-li">终止 / 驳回：需填写原因，流程结束并通知发起人。</li>
          <li className="xll-prd-li">通过：确认后流转下一节点；末节点通过后单据完结。</li>
        </ul>
      </div>
    ),
  },
  'audit-return': {
    title: '还车应结款审批 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">审批中心 / 还车应结款</span>
        <div className="xll-prd-meta">版本 V1.0 · 数据源自还车结算单 · 多部门分组提交后汇总审批</div>
        <div className="xll-prd-h2">一、页面目标</div>
        <p className="xll-prd-p">还车完成后，客户服务组、能源采购组、运维部、安全部分别填报费用，审批人核对分组明细与汇总金额，判定保证金抵扣后应退或应补。</p>
        <div className="xll-prd-highlight">当保证金 ≥ 待结算总额时，Hero 展示「应退还总额」；否则展示「应补缴总额」。</div>
        <div className="xll-prd-h2">二、Hero 区（紫色主题）</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">主金额：应退还总额 / 应补缴总额。</li>
          <li className="xll-prd-li">车辆信息：车牌、合同编码、项目名称、三项保险状态（易损/轮胎/养护）。</li>
          <li className="xll-prd-li">租期：交车时间、还车时间。</li>
          <li className="xll-prd-li">摘要：保证金、待结算总额、车辆实际租金；「结算明细」抽屉展示分项汇总。</li>
        </ul>
        <div className="xll-prd-h2">三、分组结算卡片</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>客户服务组</strong>：固定费项表格（违章违约金、保险上浮、ETC 费用、停车费等），底部应结算总额。</li>
          <li className="xll-prd-li"><strong>能源采购组</strong>：氢量差补缴、交/还车氢量、退还单价、预付款退费。</li>
          <li className="xll-prd-li"><strong>运维部</strong>：清洗、保养、维修、车损、工具/证件/广告丢失、送接车服务、轮胎磨损等费项。</li>
          <li className="xll-prd-li"><strong>安全部</strong>：违章次数、已缴/未缴金额统计。</li>
        </ul>
        <div className="xll-prd-h2">四、审批与操作</div>
        <p className="xll-prd-p">审批时间轴 + 底部评论/终止/驳回/通过，规则同提车应收款。查看态隐藏操作栏，仅浏览。</p>
      </div>
    ),
  },
  'audit-lease-bill': {
    title: '租赁账单审批 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">审批中心 / 租赁账单</span>
        <div className="xll-prd-meta">版本 V1.0 · 数据源自月度租赁账单 · 审批节点：业务服务组 → 业管主管 → 财务</div>
        <div className="xll-prd-h2">一、页面目标</div>
        <p className="xll-prd-p">审批人核对本期账单实收金额、逐车租金与服务费减免是否合理，首期账单需额外核对氢费预付款。</p>
        <div className="xll-prd-h2">二、Hero 区（蓝色主题）</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">主金额：实收款总额。</li>
          <li className="xll-prd-li">客户、合同编码、项目名称。</li>
          <li className="xll-prd-li">账单周期起止日期、期数 Tag（第 N 期）。</li>
          <li className="xll-prd-li">应收款总额、开票总额；「应收明细」「实收明细」两个底部抽屉。</li>
        </ul>
        <div className="xll-prd-h2">三、正文区块</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>车辆列表</strong>：逐车展示应收/实收租金、减免金额与凭证、服务费明细。</li>
          <li className="xll-prd-li"><strong>氢费预付款</strong>（仅第 1 期展示）：应收、实收、减免及备注。</li>
          <li className="xll-prd-li"><strong>审批情况</strong>：各部门节点时间轴。</li>
        </ul>
        <div className="xll-prd-h2">四、金额计算口径（开发）</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">应收总额 = 月租金 + 保证金（首期）+ 服务费 + 氢费预收（首期）。</li>
          <li className="xll-prd-li">实收总额 = 实收租金 + 保证金 + 实收服务费 − 租金减免 − 服务费减免 + 氢费实收 − 氢费减免。</li>
          <li className="xll-prd-li">开票总额不含保证金。</li>
        </ul>
      </div>
    ),
  },
  'audit-transfer-create': {
    title: '车辆调拨审批（申请方） · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">审批中心 / 车辆调拨 · 申请方</span>
        <div className="xll-prd-meta">版本 V1.0 · transferStage=create · 区域间车辆调配申请</div>
        <div className="xll-prd-h2">一、页面目标</div>
        <p className="xll-prd-p">发起区域申请将车辆调拨至目标区域，审批人核对路线、运输方式、车辆清单及出发时车况数据。</p>
        <div className="xll-prd-h2">二、Hero 区（绿色主题）</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">调拨车辆台数、出发区域 → 接收区域路线展示。</li>
          <li className="xll-prd-li">调拨日期；Tag 标识「调拨申请」。</li>
        </ul>
        <div className="xll-prd-h2">三、正文区块</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li"><strong>调拨情况</strong>：日期、出发/接收区域、调拨原因。</li>
          <li className="xll-prd-li"><strong>运输信息</strong>：运输方式（司机运输/板车运输等）、承运人、预计到达。</li>
          <li className="xll-prd-li"><strong>车辆清单</strong>：逐车车牌、品牌型号、出发里程/氢量/电量。</li>
          <li className="xll-prd-li"><strong>审批情况</strong>：节点时间轴。</li>
        </ul>
        <div className="xll-prd-h2">四、与运维方审批的差异</div>
        <p className="xll-prd-p">申请方侧重「为何调拨、调哪些车」；运维方（ops）侧重接收区域验收与到达车况，Hero Tag 为「运维调拨方」。</p>
      </div>
    ),
  },
  'audit-transfer-ops': {
    title: '车辆调拨审批（运维方） · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">审批中心 / 车辆调拨 · 运维方</span>
        <div className="xll-prd-meta">版本 V1.0 · transferStage=ops · 接收区域运维确认调拨到达</div>
        <div className="xll-prd-h2">一、页面目标</div>
        <p className="xll-prd-p">接收区域运维负责人在车辆到达后审批确认，核对运输过程信息与车辆到达时里程、氢量、电量是否与申请一致。</p>
        <div className="xll-prd-h2">二、页面结构</div>
        <p className="xll-prd-p">布局与申请方审批页一致，Hero Tag 改为「运维调拨方」。车辆卡片除出发数据外，需展示到达里程/氢量/电量（如有）。</p>
        <div className="xll-prd-h2">三、审批要点</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">确认车辆已全部到达接收区域。</li>
          <li className="xll-prd-li">核对车况数据异常是否已在备注中说明。</li>
          <li className="xll-prd-li">通过后更新车辆归属区域，流程完结。</li>
        </ul>
      </div>
    ),
  },
  'audit-replace': {
    title: '替换车申请审批 · 产品需求说明',
    body: (
      <div className="xll-prd-doc">
        <span className="xll-prd-tag">审批中心 / 替换车申请</span>
        <div className="xll-prd-meta">版本 V1.0 · 数据源自替换车业务单 · 审批节点：业务主管 → 事业部主管 → 运维主管</div>
        <div className="xll-prd-h2">一、页面目标</div>
        <p className="xll-prd-p">客户用车期间需更换车辆时，审批人核对替换类型、原/替换车辆信息及替换原因，客户原因替换需确认费用。</p>
        <div className="xll-prd-h2">二、Hero 区（玫红主题）</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">替换车辆台数、客户名称。</li>
          <li className="xll-prd-li">合同编码、项目名称、交车区域、项目类型 Tag。</li>
        </ul>
        <div className="xll-prd-h2">三、替换对卡片</div>
        <ul className="xll-prd-ul">
          <li className="xll-prd-li">左右对照：被替换车（原车牌/品牌型号）→ 替换为（新车牌/品牌型号）。</li>
          <li className="xll-prd-li">替换类型 Tag：永久替换 / 临时替换。</li>
          <li className="xll-prd-li">替换原因、原因说明；原因为「客户原因」时展示替换费用。</li>
        </ul>
        <div className="xll-prd-h2">四、审批与操作</div>
        <p className="xll-prd-p">支持多组替换对逐条展示；底部操作栏规则与其他审批页一致。通过后由运维安排交/还车衔接。</p>
      </div>
    ),
  },
};

const IphoneStatusBar = () => (
  <div className="xll-status">
    <span className="xll-status-time">9:41</span>
    <div className="xll-status-icons">
      <IconStatusSignal />
      <IconStatusWifi />
      <IconStatusBattery />
    </div>
  </div>
);

const MpCapsule = () => (
  <div className="xll-capsule" role="group" aria-label="小程序菜单">
    <button type="button" className="xll-capsule-btn" aria-label="更多" onClick={() => message.info('更多菜单（原型）')}>···</button>
    <span className="xll-capsule-divider" aria-hidden="true" />
    <button type="button" className="xll-capsule-btn" aria-label="关闭" onClick={() => message.warning('退出小程序（原型）')}>×</button>
  </div>
);

const PrdModal = ({ prdKey, onClose }) => {
  const doc = PRD_DOCS[prdKey];
  if (!doc || !prdKey) return null;
  return (
    <div className="tc-mini-sheet" role="dialog" aria-modal="true" aria-label={doc.title}>
      <button type="button" className="tc-mini-sheet-mask" onClick={onClose} aria-label="关闭" />
      <div className="tc-mini-sheet-panel">
        <div className="tc-mini-sheet-handle" aria-hidden="true" />
        <div className="tc-mini-sheet-head">
          <span className="tc-mini-sheet-title">{doc.title}</span>
          <button type="button" className="tc-mini-sheet-close" onClick={onClose} aria-label="关闭">×</button>
        </div>
        <div className="tc-mini-sheet-body">{doc.body}</div>
        <div className="tc-mini-sheet-foot">
          <button type="button" className="tc-mini-sheet-ok" onClick={onClose}>知道了</button>
        </div>
      </div>
    </div>
  );
};

const LoginPage = ({ onLogin, onOpenPrd }) => {
  const [loading, setLoading] = useState(false);
  const handleLogin = () => {
    if (loading) return;
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      onLogin();
    }, 800);
  };
  return (
    <div className="xll-login-wrap">
      <div className="xll-login-logo" aria-hidden="true">羚</div>
      <div className="xll-login-name">小羚羚</div>
      <div className="xll-login-desc">氢能车辆运营移动端<br />企业微信授权后即可使用</div>
      <button type="button" className="xll-login-btn" onClick={handleLogin} disabled={loading} aria-busy={loading}>
        {loading ? '登录中…' : '企业微信一键登录'}
      </button>
      <button type="button" className="xll-prd-link" style={{ marginTop: 24 }} onClick={() => onOpenPrd('login')}>需求说明</button>
    </div>
  );
};

const TaskCard = ({ task, index, onProcess }) => {
  const theme = TASK_THEME[task.type] || TASK_THEME.delivery;
  const TaskIcon = TASK_ICONS[task.type] || TASK_ICONS.delivery;
  return (
    <div
      className="xll-task-card"
      style={{ '--xll-accent': theme.accent, '--xll-soft': theme.soft, animationDelay: `${index * 40}ms` }}
    >
      {task.badge ? <span className="xll-task-badge" aria-label={`${task.badge}条待办`}>{task.badge}</span> : null}
      <div className="xll-task-head">
        <div className="xll-task-title-row">
          <span className="xll-task-icon"><TaskIcon /></span>
          <div className="xll-task-title-wrap">
            <span className="xll-task-type-tag">{theme.label}</span>
            <div className="xll-task-title">{task.title}</div>
          </div>
        </div>
        <button type="button" className="xll-task-action" onClick={() => onProcess(task)} aria-label={`处理${task.title}`}>去处理</button>
      </div>
      <div className="xll-task-body">
        {task.fields.map((f) => (
          <div className="xll-kv" key={f.label}>
            <span className="xll-kv-label">{f.label}</span>
            <span className={`xll-kv-value${f.warn ? ' warn' : ''}`}>
              {f.warn ? f.value.replace('（已到期）', '') : f.value}
              {f.warn && <span className="xll-warn-tag"><IconWarn />已到期</span>}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

const TodoPage = ({ onProcess }) => (
  <>
    <div className="xll-list-head">
      <span>待办任务</span>
      <span className="xll-list-count">共 {TODO_TASKS.length} 条</span>
    </div>
    {TODO_TASKS.map((task, i) => (
      <TaskCard key={task.id} task={task} index={i} onProcess={onProcess} />
    ))}
  </>
);

const BusinessPage = ({ onEntry }) => (
  <>
    {BUSINESS_SECTIONS.map((sec) => (
      <div className="xll-biz-section" key={sec.title}>
        <div className="xll-biz-section-title">{sec.title}</div>
        <div className="xll-biz-grid">
          {sec.items.map((item) => {
            const BizIcon = BIZ_ICONS[item.key] || BIZ_ICONS.vehicle;
            return (
              <button key={item.key} type="button" className="xll-biz-item" onClick={() => onEntry(item)} aria-label={item.label}>
                {item.badge > 0 && <span className="xll-biz-badge" aria-hidden="true">{item.badge > 99 ? 99 : item.badge}</span>}
                <span className="xll-biz-icon"><BizIcon /></span>
                <span className="xll-biz-label">{item.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    ))}
  </>
);

const MapPage = () => {
  const [mapTab, setMapTab] = useState('vehicle');
  const [search, setSearch] = useState('');
  return (
    <div className="xll-map-page">
      <div className="xll-map-tabs" role="tablist" aria-label="地图类型">
        <button type="button" role="tab" aria-selected={mapTab === 'vehicle'} className={`xll-map-tab${mapTab === 'vehicle' ? ' active' : ''}`} onClick={() => setMapTab('vehicle')}>氢能车</button>
        <button type="button" role="tab" aria-selected={mapTab === 'station'} className={`xll-map-tab${mapTab === 'station' ? ' active' : ''}`} onClick={() => setMapTab('station')}>加氢站</button>
      </div>
      <div className="xll-map-toolbar">
        <div className="xll-map-search-wrap">
          <IconSearch />
          <input className="xll-map-search" placeholder="请输入车牌号查询" value={search} onChange={(e) => setSearch(e.target.value)} aria-label="车牌号搜索" />
        </div>
        <button type="button" className="xll-map-filter" aria-label="筛选" onClick={() => message.info('打开地图筛选（原型）')}><IconFilter /></button>
      </div>
      <div className="xll-map-area" role="img" aria-label={mapTab === 'vehicle' ? '氢能车实时位置地图' : '加氢站分布地图'}>
        <button type="button" className="xll-map-full" onClick={() => message.info('恢复全图视野（原型）')} aria-label="恢复全图视野">
          <IconGlobe />
          全图
        </button>
        {mapTab === 'vehicle' ? (
          <>
            <span className="xll-map-marker" style={{ top: '28%', left: '22%' }} title="粤B58888F"><IconTruck /></span>
            <span className="xll-map-marker" style={{ top: '35%', left: '48%' }} title="粤AGP5368"><IconTruck /></span>
            <span className="xll-map-marker" style={{ top: '52%', left: '65%' }} title="浙F06900F"><IconTruck /></span>
          </>
        ) : (
          <>
            <span className="xll-map-marker xll-map-marker--station" style={{ top: '40%', left: '55%' }} title="平湖加氢站"><IconStation /></span>
            <span className="xll-map-marker xll-map-marker--station" style={{ top: '30%', left: '30%' }} title="嘉兴港区加氢站"><IconStation /></span>
          </>
        )}
        <div className="xll-map-placeholder">
          <span>{mapTab === 'vehicle' ? '氢能车实时位置（腾讯地图）' : '加氢站 POI（腾讯地图）'}</span>
          {search && <span>搜索：{search}</span>}
        </div>
        <span className="xll-map-brand">腾讯地图</span>
      </div>
    </div>
  );
};

const MinePage = ({ onLogout }) => (
  <>
    <div className="xll-mine-hero">
      <div className="xll-mine-avatar" aria-hidden="true">张</div>
      <div className="xll-mine-hero-info">
        <div className="xll-mine-hero-name">张明辉</div>
        <div className="xll-mine-hero-role">运维主管 · ONE-OS</div>
      </div>
    </div>
    <div className="xll-mine-card">
      <div className="xll-mine-row"><span className="xll-mine-label">姓名</span><span className="xll-mine-value">张明辉</span></div>
      <div className="xll-mine-row"><span className="xll-mine-label">账号</span><span className="xll-mine-value">zhangmh@one-os.com</span></div>
      <div className="xll-mine-row"><span className="xll-mine-label">手机号</span><span className="xll-mine-value">138****6688</span></div>
    </div>
    <button type="button" className="xll-logout" onClick={onLogout}>退出登录</button>
  </>
);

const TodoDetailPage = ({ task, onBack, onDone }) => {
  const theme = TASK_THEME[task.type] || TASK_THEME.delivery;
  return (
    <div className="xll-sub-page">
      <div className="xll-sub-hero" style={{ '--xll-accent': theme.accent }}>
        <span className="xll-sub-hero-tag">{theme.label}任务</span>
        <div className="xll-sub-hero-title">{task.title}</div>
      </div>
      <div className="xll-sub-card">
        <div className="xll-sub-section-title">任务详情</div>
        {task.fields.map((f) => (
          <div className="xll-kv" key={f.label} style={{ marginBottom: 10 }}>
            <span className="xll-kv-label">{f.label}</span>
            <span className={`xll-kv-value${f.warn ? ' warn' : ''}`}>
              {f.warn ? f.value.replace('（已到期）', '') : f.value}
              {f.warn && <span className="xll-warn-tag"><IconWarn />已到期</span>}
            </span>
          </div>
        ))}
        <p style={{ fontSize: 13, color: COLOR_MUTED, marginTop: 12, lineHeight: 1.55 }}>
          请核对以上信息并完成现场办理。提交后将同步至 ONE-OS 后台对应模块。
        </p>
        <div className="xll-sub-foot">
          <button type="button" className="xll-sub-btn xll-sub-btn-ghost" onClick={onBack}>返回</button>
          <button type="button" className="xll-sub-btn xll-sub-btn-primary" onClick={onDone}>确认办理</button>
        </div>
      </div>
    </div>
  );
};

const Component = function XiaoLingLingMiniApp() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [mainTab, setMainTab] = useState('todo');
  const [todoDetail, setTodoDetail] = useState(null);
  const [bizModule, setBizModule] = useState(null);
  const [prdKey, setPrdKey] = useState(null);
  const [auditPrdKey, setAuditPrdKey] = useState(null);

  const handleAuditPrdKeyChange = useCallback((key) => {
    setAuditPrdKey(key || null);
  }, []);

  const navTitle = useMemo(() => {
    if (!loggedIn) return '登录';
    if (bizModule === 'audit') return '审批中心';
    if (bizModule === 'inspection') return '年审';
    if (bizModule === 'vehicle') return '车辆管理';
    if (bizModule === 'delivery') return '交车';
    if (bizModule === 'replace') return '替换车';
    if (todoDetail) return '任务办理';
    const tab = MAIN_TABS.find((t) => t.key === mainTab);
    return tab?.navLabel || '小羚羚';
  }, [loggedIn, mainTab, todoDetail, bizModule]);

  const currentPrdKey = useMemo(() => {
    if (!loggedIn) return 'login';
    if (bizModule === 'delivery') return 'delivery';
    if (bizModule === 'replace') return 'replace';
    if (bizModule === 'audit') return auditPrdKey || 'audit';
    if (bizModule === 'inspection' || bizModule === 'vehicle') return 'business';
    if (todoDetail) return 'todo-detail';
    if (mainTab === 'todo') return 'todo';
    if (mainTab === 'business') return 'business';
    if (mainTab === 'map') return 'map';
    if (mainTab === 'mine') return 'mine';
    return 'todo';
  }, [loggedIn, mainTab, todoDetail, bizModule, auditPrdKey]);

  const handleOpenPrd = useCallback((key) => setPrdKey(key || currentPrdKey), [currentPrdKey]);

  const moduleBackRef = useRef(null);
  const registerModuleBack = useCallback((handler) => {
    moduleBackRef.current = handler;
  }, []);

  const handleNavBack = useCallback(() => {
    if (bizModule && typeof moduleBackRef.current === 'function' && moduleBackRef.current()) return;
    if (bizModule) {
      setBizModule(null);
      return;
    }
    if (todoDetail) setTodoDetail(null);
  }, [bizModule, todoDetail]);

  const handleProcessTask = useCallback((task) => {
    if (task.type === 'inspection') {
      setBizModule('inspection');
      return;
    }
    if (task.type === 'delivery') {
      setBizModule('delivery');
      return;
    }
    setTodoDetail(task);
  }, []);

  const handleBusinessEntry = useCallback((item) => {
    if (item.key === 'audit') {
      setBizModule('audit');
      return;
    }
    if (item.key === 'inspection') {
      setBizModule('inspection');
      return;
    }
    if (item.key === 'vehicle') {
      setBizModule('vehicle');
      return;
    }
    if (item.key === 'delivery') {
      setBizModule('delivery');
      return;
    }
    if (item.key === 'replace') {
      setBizModule('replace');
      return;
    }
    message.info(`进入「${item.label}」模块（原型）`);
  }, []);

  const handleLogout = useCallback(() => {
    if (Modal && Modal.confirm) {
      Modal.confirm({
        title: '确认退出登录？',
        content: '退出后需重新授权登录',
        okText: '退出',
        cancelText: '取消',
        okButtonProps: { danger: true },
        centered: true,
        onOk: () => {
          setLoggedIn(false);
          setMainTab('todo');
          setTodoDetail(null);
          setBizModule(null);
          message.info('已退出登录');
        },
      });
      return;
    }
    setLoggedIn(false);
    setMainTab('todo');
    setBizModule(null);
    message.info('已退出登录');
  }, []);

  const showTabBar = loggedIn && !todoDetail && !bizModule;
  const showBack = !!todoDetail || !!bizModule;

  const bodyClass = useMemo(() => {
    const parts = ['xll-body'];
    if (!loggedIn) parts.push('xll-body--login');
    else if (bizModule) parts.push('xll-body--module');
    else if (mainTab === 'map' && !todoDetail) parts.push('xll-body--map');
    return parts.join(' ');
  }, [loggedIn, mainTab, todoDetail, bizModule]);

  return (
    <div className="xll-root">
      <style>{PAGE_STYLE}</style>
      <div className="xll-phone">
        <div className="xll-chrome">
          <IphoneStatusBar />
          <div className="xll-navbar">
            <div className="xll-nav-left">
              {showBack ? (
                <button type="button" className="xll-back" onClick={handleNavBack} aria-label="返回"><IconBack /></button>
              ) : null}
            </div>
            <span className="xll-nav-title">{navTitle}</span>
            <div className="xll-nav-right">
              <button type="button" className="xll-prd-link" onClick={() => handleOpenPrd(currentPrdKey)}>需求说明</button>
              <MpCapsule />
            </div>
          </div>
        </div>

        <div className={bodyClass}>
          {!loggedIn ? (
            <LoginPage onLogin={() => { setLoggedIn(true); message.success('登录成功'); }} onOpenPrd={handleOpenPrd} />
          ) : bizModule ? (
            bizModule === 'audit' ? (
              <ApprovalCenterModule onRegisterBack={registerModuleBack} onPrdKeyChange={handleAuditPrdKeyChange} />
            ) : bizModule === 'inspection' ? (
              <AnnualReviewModule onRegisterBack={registerModuleBack} />
            ) : bizModule === 'vehicle' ? (
              <VehicleManagementModule onRegisterBack={registerModuleBack} />
            ) : bizModule === 'delivery' ? (
              <DeliveryModule onRegisterBack={registerModuleBack} />
            ) : bizModule === 'replace' ? (
              <ReplaceModule onRegisterBack={registerModuleBack} />
            ) : null
          ) : todoDetail ? (
            <TodoDetailPage
              task={todoDetail}
              onBack={() => setTodoDetail(null)}
              onDone={() => { message.success('办理完成（原型）'); setTodoDetail(null); }}
            />
          ) : mainTab === 'todo' ? (
            <TodoPage onProcess={handleProcessTask} />
          ) : mainTab === 'business' ? (
            <BusinessPage onEntry={handleBusinessEntry} />
          ) : mainTab === 'map' ? (
            <MapPage />
          ) : (
            <MinePage onLogout={handleLogout} />
          )}
        </div>

        {showTabBar && (
          <div className="xll-tabbar" role="tablist" aria-label="主导航">
            {MAIN_TABS.map((tab) => {
              const TabIcon = TAB_ICON_MAP[tab.key];
              const active = mainTab === tab.key;
              return (
                <button
                  key={tab.key}
                  type="button"
                  role="tab"
                  aria-selected={active}
                  aria-label={tab.label}
                  className={`xll-tabbar-btn${active ? ' active' : ''}`}
                  onClick={() => setMainTab(tab.key)}
                >
                  <span className="xll-tabbar-icon"><TabIcon active={active} /></span>
                  {tab.label}
                </button>
              );
            })}
          </div>
        )}

        <PrdModal prdKey={prdKey} onClose={() => setPrdKey(null)} />
      </div>
    </div>
  );
};

if (typeof window !== 'undefined') window.Component = Component;
export default Component;
