// 【重要】必须使用 const Component 作为组件变量名
// ONE-OS 小程序 - 提车应收款审批办理（参照 web 端提车应收款-查看，适配移动端）

const { useState, useMemo, useCallback, useRef, useEffect } = React;
const moment = window.moment || window.dayjs;

const COLOR_PRIMARY = '#16D1A1';
const COLOR_PRIMARY_DEEP = '#00BFA5';
const COLOR_PRIMARY_SOFT = 'rgba(22, 209, 161, 0.12)';
const COLOR_ACCENT = '#F97316';
const COLOR_ACCENT_DEEP = '#EA580C';
const COLOR_ACCENT_SOFT = 'rgba(249, 115, 22, 0.12)';
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_SUCCESS = '#00B42A';
const COLOR_DANGER = '#F53F3F';
const COLOR_WARN = '#FF7D00';
const FONT_FAMILY =
  '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, sans-serif';

const resolveAntdBundle = () => {
  const raw = window.antd;
  if (!raw) return {};
  if (raw.default && typeof raw.default === 'object') return { ...raw, ...raw.default };
  return raw;
};

const antd = resolveAntdBundle();
const message = antd.message || { info: () => {}, success: () => {}, warning: () => {} };
const Drawer = antd.Drawer;
const Modal = antd.Modal;

const formatMoney = (val, withSymbol = true) => {
  const n = parseFloat(val);
  if (Number.isNaN(n)) return val || '—';
  const s = n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  return withSymbol ? `¥${s}` : s;
};

const formatYuan = (val) => {
  const n = parseFloat(val);
  if (Number.isNaN(n)) return '—';
  return `${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} 元`;
};

/** 根据审批任务构建详情 mock（与 web 端字段对齐） */
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%，开票项目：*现代服务*车辆租赁费；备注：嘉兴氢能示范项目-提车首付款',
    task: task || { bizNo: 'TC-2026-0312', status: '审批中' },
  };
};

const calcTotals = (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;
  const receivableTotal = (
    receivableRent + receivableDeposit + receivableService + hydrogenReceivable
  ).toFixed(2);
  const actualTotal = (
    actualRent + receivableDeposit + actualService - discountTotal + hydrogenActual
  ).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),
    receivableTotal,
    actualTotal,
  };
};

const PAGE_STYLE = `
.tc-mini-root {
  min-height: 100dvh;
  background: linear-gradient(165deg, #e8ebef 0%, ${COLOR_PAGE} 40%);
  display: flex;
  justify-content: center;
  padding: 16px 12px 32px;
  box-sizing: border-box;
  font-family: ${FONT_FAMILY};
  -webkit-font-smoothing: antialiased;
}
.tc-phone {
  width: 100%;
  max-width: 390px;
  min-height: 844px;
  background: ${COLOR_PAGE};
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tc-chrome { flex-shrink: 0; background: ${COLOR_BG}; }
.tc-status-bar {
  height: 44px;
  padding: 14px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.tc-status-time { font-size: 15px; font-weight: 600; color: ${COLOR_TEXT}; }
.tc-mp-navbar {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 8px 0 4px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  position: relative;
  background: ${COLOR_BG};
}
.tc-mp-back {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: ${COLOR_TEXT};
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tc-mp-back:active { background: rgba(0,0,0,.05); }
.tc-mp-navbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 700;
  color: ${COLOR_TEXT};
  max-width: 56%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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, ${COLOR_ACCENT} 0%, ${COLOR_ACCENT_DEEP} 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.35);
}
.tc-hero-label { font-size: 13px; opacity: 0.92; margin-bottom: 6px; }
.tc-hero-amount {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.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: 0.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-detail-btn:active { background: rgba(255,255,255,.24); }
.tc-hero-meta {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.88;
}
.tc-section {
  margin: 12px 14px 0;
  background: ${COLOR_BG};
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.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: ${COLOR_ACCENT};
  background: ${COLOR_ACCENT_SOFT};
  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};
  font-variant-numeric: tabular-nums;
}
.tc-vehicle-model { font-size: 12px; color: ${COLOR_MUTED}; margin-top: 2px; }
.tc-vehicle-idx {
  font-size: 11px;
  font-weight: 700;
  color: ${COLOR_ACCENT};
  background: ${COLOR_ACCENT_SOFT};
  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: ${COLOR_ACCENT};
  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: ${COLOR_PRIMARY_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-row:last-child { border-bottom: none; }
.tc-service-name { color: ${COLOR_TEXT}; font-weight: 500; }
.tc-service-amt { color: ${COLOR_ACCENT}; 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:last-child { padding-bottom: 0; }
.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: ${COLOR_ACCENT_SOFT}; color: ${COLOR_ACCENT}; border: 2px solid ${COLOR_ACCENT}; box-sizing: border-box; }
.tc-step-body { flex: 1; min-width: 0; }
.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;
  touch-action: manipulation;
  border: none;
}
.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, 0.3); }
.tc-btn-reject {
  background: ${COLOR_PAGE};
  color: ${COLOR_DANGER};
  border: 1px solid rgba(245, 63, 63, 0.25);
}
.tc-btn-approve {
  background: linear-gradient(135deg, ${COLOR_PRIMARY} 0%, ${COLOR_PRIMARY_DEEP} 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 191, 165, 0.3);
}
.tc-btn:active { opacity: 0.92; transform: scale(0.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: ${COLOR_PRIMARY}; }
.tc-notify-item.disabled { opacity: 0.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: ${COLOR_PRIMARY_SOFT}; color: ${COLOR_PRIMARY_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(22, 209, 161, 0.55); box-shadow: 0 0 0 3px rgba(22, 209, 161, 0.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: ${COLOR_PRIMARY}; background: ${COLOR_PRIMARY_SOFT}; color: ${COLOR_PRIMARY_DEEP}; font-weight: 600; }
.tc-drawer-rows { display: flex; flex-direction: column; gap: 0; }
.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:last-child { border-bottom: none; }
.tc-drawer-row-label { color: ${COLOR_TEXT_SEC}; }
.tc-drawer-row-val { font-weight: 700; color: ${COLOR_TEXT}; font-variant-numeric: tabular-nums; }
.tc-drawer-row-val.highlight { color: ${COLOR_ACCENT}; font-size: 16px; }
.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: ${COLOR_ACCENT}; font-size: 18px; font-variant-numeric: tabular-nums; }
`;

const IconBack = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="15 18 9 12 15 6" />
  </svg>
);

const InfoRow = ({ 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 VehicleCard = ({ 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">{formatMoney(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.rentRemark ? (
        <div style={{ fontSize: 12, color: COLOR_MUTED, marginTop: 8 }}>租金备注：{vehicle.rentRemark}</div>
      ) : null}
      {(vehicle.serviceItems || []).length > 0 && (
        <>
          <button type="button" className="tc-service-toggle" onClick={() => setServiceOpen((o) => !o)}>
            {serviceOpen ? '收起' : '查看'}服务费明细（{(vehicle.serviceItems || []).length} 项）
          </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">{formatMoney(s.actual)}</span>
                  <span className="tc-service-sub">
                    应收 {formatYuan(s.receivable)} · 减免 {formatYuan(s.discount)}{s.remark ? ` · ${s.remark}` : ''}
                  </span>
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
};

const AmountBreakdownDrawer = ({ open, onClose, title, rows, totalLabel, totalValue, highlightTotal }) => (
  Drawer ? (
    <Drawer title={title} placement="bottom" height="auto" open={open} onClose={onClose} styles={{ body: { padding: '8px 20px 24px' } }}>
      <div className="tc-drawer-rows">
        {rows.map((r) => (
          <div className="tc-drawer-row" key={r.label}>
            <span className="tc-drawer-row-label">{r.label}</span>
            <span className={`tc-drawer-row-val${r.highlight ? ' highlight' : ''}`}>{r.value}</span>
          </div>
        ))}
        <div className="tc-drawer-total">
          <span>{totalLabel}</span>
          <span>{totalValue}</span>
        </div>
      </div>
    </Drawer>
  ) : null
);

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" 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 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 PickupReceivableApproveView = ({ task, mode = 'approve', onBack }) => {
  const detail = useMemo(() => buildPickupDetail(task), [task]);
  const { projectInfo, vehicles, hasHydrogenPrepay, hydrogen, approvalSteps, invoiceMethod, invoiceRemark } = detail;
  const totals = useMemo(
    () => calcTotals(vehicles, hasHydrogenPrepay, hydrogen),
    [vehicles, hasHydrogenPrepay, hydrogen]
  );
  const [actualDrawerOpen, setActualDrawerOpen] = useState(false);
  const [receivableDrawerOpen, setReceivableDrawerOpen] = useState(false);
  const [decisionOpen, setDecisionOpen] = useState(false);
  const [decisionType, setDecisionType] = useState('approve');
  const [commentOpen, setCommentOpen] = useState(false);
  const showActions = mode === 'approve' || mode === 'view';
  const displayActualTotal = task?.actualAmount || totals.actualTotal;

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

  const receivableBreakdownRows = useMemo(() => {
    const rows = [
      { label: '总计应收车辆月租金', value: formatYuan(totals.receivableRent) },
      { label: '总计应收车辆保证金', value: formatYuan(totals.receivableDeposit) },
      { label: '总计应收服务费', value: formatYuan(totals.receivableService) },
    ];
    if (hasHydrogenPrepay) {
      rows.push({ label: '氢费预充值应收金额', value: formatYuan(hydrogen.receivable) });
    }
    return rows;
  }, [totals, hasHydrogenPrepay, hydrogen.receivable]);

  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('评论已添加（原型）');
  };

  const diff = (parseFloat(totals.receivableTotal) - parseFloat(displayActualTotal)).toFixed(2);

  return (
    <>
      <div className="tc-scroll">
        <div className="tc-hero">
          <div className="tc-hero-label">实收款总额</div>
          <div className="tc-hero-amount">{formatMoney(displayActualTotal)}</div>
          <div className="tc-hero-meta">
            <span>{projectInfo.customerName}</span>
            <span>{vehicles.length} 台车</span>
          </div>
          <div className="tc-hero-sub">
            <div className="tc-hero-compare">
              应收款总额 {formatMoney(totals.receivableTotal)}
              <br />
              较应收减免 {formatMoney(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>
          </div>
          <div className="tc-kv-grid">
            <InfoRow label="提车收款单编码" value={projectInfo.collectCode} full />
            <InfoRow label="合同编码" value={projectInfo.contractCode} />
            <InfoRow label="合同类型" value={projectInfo.contractType} />
            <InfoRow label="项目名称" value={projectInfo.projectName} full />
            <InfoRow label="客户企业名称" value={projectInfo.customerName} full />
            <InfoRow label="付款方式" value={projectInfo.paymentMethod} />
            <InfoRow label="付款周期" value={projectInfo.paymentCycle} />
            <InfoRow label="合同生效" value={projectInfo.contractStart} />
            <InfoRow label="合同结束" value={projectInfo.contractEnd} />
            <InfoRow label="业务部门" value={projectInfo.businessDept} />
            <InfoRow label="业务负责人" value={projectInfo.businessPerson} />
          </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) => (
            <VehicleCard 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">
              <InfoRow label="应收金额" value={formatYuan(hydrogen.receivable)} />
              <InfoRow label="实收金额" value={formatYuan(hydrogen.actual)} />
              <InfoRow label="减免金额" value={formatYuan(hydrogen.discount)} />
              <InfoRow 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">
            <InfoRow label="开票方式" value={invoiceMethod} />
            <InfoRow 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 className="tc-step-body">
                  <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}
      />

      <AmountBreakdownDrawer
        open={actualDrawerOpen}
        onClose={() => setActualDrawerOpen(false)}
        title="实收款明细"
        rows={actualBreakdownRows}
        totalLabel="实收款总额"
        totalValue={formatMoney(displayActualTotal)}
        highlightTotal
      />
      <AmountBreakdownDrawer
        open={receivableDrawerOpen}
        onClose={() => setReceivableDrawerOpen(false)}
        title="应收款明细"
        rows={receivableBreakdownRows}
        totalLabel="应收款总额"
        totalValue={formatMoney(totals.receivableTotal)}
      />
    </>
  );
};

const MiniProgramChrome = ({ title, showBack, onBack }) => {
  const time = moment ? moment().format('HH:mm') : '9:41';
  return (
    <div className="tc-chrome">
      <div className="tc-status-bar">
        <span className="tc-status-time">{time}</span>
      </div>
      <div className="tc-mp-navbar">
        {showBack ? (
          <button type="button" className="tc-mp-back" onClick={onBack} aria-label="返回">
            <IconBack />
          </button>
        ) : (
          <span style={{ width: 40, flexShrink: 0 }} />
        )}
        <span className="tc-mp-navbar-title">{title}</span>
      </div>
    </div>
  );
};

const DEFAULT_TASK = {
  id: 'ap-2',
  flowType: '提车应收款',
  bizNo: 'TC-2026-0312',
  customerName: '上海迅杰物流有限公司',
  projectName: '上海氢能城际物流项目',
  vehicleCount: 3,
  actualAmount: '186800.00',
  status: '审批中',
};

const Component = function PickupReceivableApprovePage() {
  const task = window.__pickupApproveTask || DEFAULT_TASK;
  const mode = window.__pickupApproveMode || 'approve';

  const handleBack = () => {
    if (window.__pickupApproveBack) window.__pickupApproveBack();
    else message.info('返回审批中心（原型）');
  };

  return (
    <div className="tc-mini-root">
      <style>{PAGE_STYLE}</style>
      <div className="tc-phone">
        <MiniProgramChrome title="提车应收款审批" showBack onBack={handleBack} />
        <PickupReceivableApproveView task={task} mode={mode} onBack={handleBack} />
      </div>
    </div>
  );
};

if (typeof window !== 'undefined') {
  window.Component = Component;
  window.PickupReceivableApproveView = PickupReceivableApproveView;
  window.buildPickupDetail = buildPickupDetail;
  window.__tcPickupStyles = PAGE_STYLE;
}

export default Component;