import { StatusTag } from '../vehicle-management/components/StatusTag';
import { TablePagination, DEFAULT_PAGE_SIZE } from '../../common/TablePagination';
import { ClipboardCheck, CircleDollarSign, Eye, Undo2 } from 'lucide-react';
import {
  PICKUP_KPI_CARDS,
  buildCollectCode,
  fmtMoneyYuan,
  normalizeAuditStatus,
  auditStatusTone,
  buildFilterOptions,
  filterMainList,
  countKpiFromList,
  filterByKpiTab,
  initPickupReceivableList,
} from './data/pickup-receivable-list-data.js';
import {
  shouldShowSubBatchRefund,
  canShowHandle,
  saveStoredPickupList,
  enrichPickupRecord,
  isValidPickupMainRecord,
} from './pickup-receivable-bridge.js';

var ONEOS_ANT_TABLE_GLOBAL_FIX = [
  '.ant-table-container .ant-table-header { margin-bottom: 0 !important; }',
  '.ant-table-container .ant-table-body { margin-top: 0 !important; }',
  '.ant-table-container .ant-table-body > table, .ant-table-content table { margin-top: 0 !important; }',
  '.ant-table-tbody > tr.ant-table-measure-row, .ant-table-tbody > tr.ant-table-measure-row > td, .ant-table-tbody > tr.ant-table-measure-row > th { display: none !important; height: 0 !important; max-height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; line-height: 0 !important; font-size: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; }',
  '.vm-list-table .ant-table-thead th,.vm-list-table .ant-table-tbody td{white-space:nowrap;}',
  '.vm-list-table .ant-table-tbody > tr:not(.ant-table-measure-row) > td.vm-stacked-cell-td { white-space: normal !important; }',
];

var VPR_LIST_CHROME_OFFSET = 420;

var VPR_MAIN_TABLE_COL_RATIOS = [13, 7, 9.5, 6, 6, 6, 7.5, 6, 6, 6, 7.5, 6];
var VPR_MAIN_TABLE_COL_RATIO_SUM = VPR_MAIN_TABLE_COL_RATIOS.reduce(function (sum, ratio) {
  return sum + ratio;
}, 0);

function buildVprMainTableColumnWidths(containerWidth) {
  var safeWidth = Math.max(960, Math.floor(containerWidth) || 960);
  var widths = VPR_MAIN_TABLE_COL_RATIOS.map(function (ratio) {
    return Math.max(52, Math.floor(safeWidth * ratio / VPR_MAIN_TABLE_COL_RATIO_SUM));
  });
  var sum = widths.reduce(function (acc, width) {
    return acc + width;
  }, 0);
  var delta = safeWidth - sum;
  if (delta) widths[widths.length - 1] += delta;
  return { widths: widths, scrollX: safeWidth };
}

var KPI_ICONS = {
  all: React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 18,
      height: 18,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('path', { d: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' }),
    React.createElement('path', { d: 'M14 2v4a2 2 0 0 0 2 2h4' }),
  ),
  pending: React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 18,
      height: 18,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('circle', { cx: 12, cy: 12, r: 10 }),
    React.createElement('polyline', { points: '12 6 12 12 16 14' }),
  ),
  inReview: React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 18,
      height: 18,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('path', { d: 'M21 12a9 9 0 1 1-3-6.7' }),
    React.createElement('polyline', { points: '21 3 21 9 15 9' }),
  ),
  approved: React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 18,
      height: 18,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('path', { d: 'M20 6 9 17l-5-5' }),
  ),
  rejected: React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 18,
      height: 18,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('circle', { cx: 12, cy: 12, r: 10 }),
    React.createElement('path', { d: 'm15 9-6 6' }),
    React.createElement('path', { d: 'm9 9 6 6' }),
  ),
  generated: React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 18,
      height: 18,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' }),
    React.createElement('polyline', { points: '14 2 14 8 20 8' }),
    React.createElement('line', { x1: 12, x2: 12, y1: 18, y2: 12 }),
    React.createElement('line', { x1: 9, x2: 15, y1: 15, y2: 15 }),
  ),
};

function SearchIconSvg() {
  return React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 16,
      height: 16,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('circle', { cx: 11, cy: 11, r: 8 }),
    React.createElement('path', { d: 'm21 21-4.3-4.3' }),
  );
}

function ExportIconSvg() {
  return React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 16,
      height: 16,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      'aria-hidden': true,
    },
    React.createElement('path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }),
    React.createElement('polyline', { points: '7 10 12 15 17 10' }),
    React.createElement('line', { x1: 12, x2: 12, y1: 15, y2: 3 }),
  );
}

function kpiHelpIcon() {
  return React.createElement(
    'svg',
    {
      xmlns: 'http://www.w3.org/2000/svg',
      width: 14,
      height: 14,
      viewBox: '0 0 24 24',
      fill: 'none',
      stroke: 'currentColor',
      strokeWidth: 2,
      'aria-hidden': true,
    },
    React.createElement('circle', { cx: 12, cy: 12, r: 10 }),
    React.createElement('path', { d: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' }),
    React.createElement('line', { x1: 12, x2: 12.01, y1: 17, y2: 17 }),
  );
}

function filterOption(input, option) {
  var label = (option && (option.label || option.children)) || '';
  return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}

function displayText(v) {
  if (v === null || v === undefined) return '—';
  var s = String(v).trim();
  return s || '—';
}

const Component = function (props) {
  var useState = React.useState;
  var useMemo = React.useMemo;
  var useEffect = React.useEffect;

  var antd = window.antd;
  var App = antd.App;
  var Table = antd.Table;
  var Button = antd.Button;
  var Modal = antd.Modal;
  var Select = antd.Select;
  var Popover = antd.Popover;
  var message = antd.message;

  var filterExpandedState = useState(false);
  var filterExpanded = filterExpandedState[0];
  var setFilterExpanded = filterExpandedState[1];

  var kpiTabState = useState('all');
  var kpiTab = kpiTabState[0];
  var setKpiTab = kpiTabState[1];

  var pageState = useState(1);
  var page = pageState[0];
  var setPage = pageState[1];

  var pageSizeState = useState(DEFAULT_PAGE_SIZE);
  var pageSize = pageSizeState[0];
  var setPageSize = pageSizeState[1];

  var filtersState = useState({
    contractCode: undefined,
    projectName: undefined,
    customerName: undefined,
    businessDept: undefined,
    businessPerson: undefined,
  });
  var filters = filtersState[0];
  var setFilters = filtersState[1];

  var appliedFiltersState = useState({
    contractCode: undefined,
    projectName: undefined,
    customerName: undefined,
    businessDept: undefined,
    businessPerson: undefined,
  });
  var appliedFilters = appliedFiltersState[0];
  var setAppliedFilters = appliedFiltersState[1];

  var mainListState = useState(function () {
    return initPickupReceivableList();
  });
  var mainList = mainListState[0];
  var setMainList = mainListState[1];

  useEffect(
    function () {
      setMainList(initPickupReceivableList());
    },
    [props && props.refreshToken],
  );

  var tableWrapRef = React.useRef(null);
  var tableLayoutState = React.useState(function () {
    return buildVprMainTableColumnWidths(1200);
  });
  var tableColumnWidths = tableLayoutState[0].widths;
  var tableScrollX = tableLayoutState[0].scrollX;
  var setTableLayout = tableLayoutState[1];

  useEffect(function () {
    var el = tableWrapRef.current;
    if (!el || typeof ResizeObserver === 'undefined') return undefined;
    var syncWidth = function () {
      var nextWidth = el.clientWidth;
      if (!nextWidth) return;
      setTableLayout(buildVprMainTableColumnWidths(nextWidth));
    };
    syncWidth();
    var observer = new ResizeObserver(function () {
      syncWidth();
    });
    observer.observe(el);
    return function () {
      observer.disconnect();
    };
  }, []);

  var contractPopoverKeyState = useState(null);
  var contractPopoverKey = contractPopoverKeyState[0];
  var setContractPopoverKey = contractPopoverKeyState[1];

  var expandedRowKeysState = useState([]);
  var expandedRowKeys = expandedRowKeysState[0];
  var setExpandedRowKeys = expandedRowKeysState[1];

  var deleteConfirmVisibleState = useState(false);
  var deleteConfirmVisible = deleteConfirmVisibleState[0];
  var setDeleteConfirmVisible = deleteConfirmVisibleState[1];

  var deleteConfirmRecordState = useState(null);
  var deleteConfirmRecord = deleteConfirmRecordState[0];
  var setDeleteConfirmRecord = deleteConfirmRecordState[1];

  var deleteConfirmParentState = useState(null);
  var deleteConfirmParent = deleteConfirmParentState[0];
  var setDeleteConfirmParent = deleteConfirmParentState[1];

  var filterOptions = useMemo(function () {
    return buildFilterOptions(mainList);
  }, [mainList]);

  var filteredByQuery = useMemo(function () {
    return filterMainList(mainList, appliedFilters);
  }, [mainList, appliedFilters]);

  var kpiCounts = useMemo(function () {
    return countKpiFromList(filteredByQuery, kpiTab);
  }, [filteredByQuery, kpiTab]);

  var filteredData = useMemo(function () {
    return filterByKpiTab(filteredByQuery, kpiTab);
  }, [filteredByQuery, kpiTab]);

  var totalCount = (filteredData || []).length;
  var totalPages = Math.max(1, Math.ceil(totalCount / pageSize) || 1);
  var safePage = Math.max(1, Math.min(page, totalPages));

  var pagedList = useMemo(function () {
    var start = (safePage - 1) * pageSize;
    return (filteredData || [])
      .filter(isValidPickupMainRecord)
      .slice(start, start + pageSize);
  }, [filteredData, safePage, pageSize]);

  function handleQuery() {
    setAppliedFilters(Object.assign({}, filters));
    setPage(1);
  }

  function resetFilters() {
    var empty = {
      contractCode: undefined,
      projectName: undefined,
      customerName: undefined,
      businessDept: undefined,
      businessPerson: undefined,
    };
    setFilters(empty);
    setAppliedFilters(empty);
    setKpiTab('all');
    setPage(1);
  }

  function goHandle(record) {
    if (props && typeof props.onGoHandle === 'function') props.onGoHandle(record);
    else message.info('跳转至办理页（原型）');
  }

  function goRefund(record) {
    message.success(
      '已发起退款流程（原型）：' + (record.contractCode || '') + ' · 抄送财务复核',
    );
  }

  function goLinkPaymentRecords(batch, parent) {
    message.info(
      '关联收款记录（原型）：' + buildCollectCode(parent.contractCode, batch.seq),
    );
  }

  function getBatchAmountTotals(batch) {
    var receivableTotal = parseFloat(batch.receivableTotal);
    if (!Number.isNaN(receivableTotal) && receivableTotal >= 0) {
      var receivedTotal = parseFloat(
        batch.financeReceived != null ? batch.financeReceived : batch.actualTotal,
      ) || 0;
      return { receivableTotal: receivableTotal, receivedTotal: receivedTotal };
    }
    return (batch.deliveryVehicles || []).reduce(
      function (acc, vehicle) {
        acc.receivableTotal += parseFloat(vehicle.receivableTotal) || 0;
        acc.receivedTotal += parseFloat(vehicle.receivedTotal) || 0;
        return acc;
      },
      { receivableTotal: 0, receivedTotal: 0 },
    );
  }

  function buildVehicleModelKey(vehicle) {
    if (!vehicle) return '';
    return [String(vehicle.brand || '').trim(), String(vehicle.model || '').trim()]
      .filter(Boolean)
      .join(' ');
  }

  function buildPickupSubModelGroupRows(parent) {
    var rows = [];
    (parent.children || []).forEach(function (batch) {
      var vehicles = batch.deliveryVehicles || [];
      if (!vehicles.length) {
        rows.push({
          batch: batch,
          parent: parent,
          modelGroup: null,
          batchSeq: batch.seq,
          isFirstInBatch: true,
          batchRowSpan: 1,
        });
        return;
      }
      var groupOrder = [];
      var groupMap = {};
      vehicles.forEach(function (vehicle, index) {
        var key = buildVehicleModelKey(vehicle) || '__vehicle-' + (vehicle.seq != null ? vehicle.seq : index);
        if (!groupMap[key]) {
          groupMap[key] = {
            key: key,
            brand: vehicle.brand,
            model: vehicle.model,
            vehicles: [],
          };
          groupOrder.push(key);
        }
        groupMap[key].vehicles.push(vehicle);
      });
      groupOrder.forEach(function (key, idx) {
        rows.push({
          batch: batch,
          parent: parent,
          modelGroup: groupMap[key],
          batchSeq: batch.seq,
          isFirstInBatch: idx === 0,
          batchRowSpan: groupOrder.length,
        });
      });
    });
    return rows;
  }

  function renderModelGroupCell(modelGroup) {
    if (!modelGroup) return '—';
    var label = [modelGroup.brand, modelGroup.model].filter(Boolean).join(' ');
    var plates = (modelGroup.vehicles || [])
      .map(function (vehicle) {
        return String(vehicle.plateNo || '').trim();
      })
      .filter(Boolean);
    return React.createElement(
      'div',
      { className: 'vpr-pickup-subtable__model-group' },
      React.createElement(
        'div',
        { className: 'vpr-pickup-subtable__model-group-name', title: label || '—' },
        label || '—',
      ),
      plates.length
        ? React.createElement(
            'div',
            {
              className: 'vpr-pickup-subtable__model-group-plates tabular-nums',
              title: plates.join('、'),
            },
            plates.join('、'),
          )
        : React.createElement(
            'div',
            { className: 'vpr-pickup-subtable__model-group-plates is-empty' },
            '—',
          ),
    );
  }

  function renderPrimaryOpButton(label, Icon, onClick, options) {
    var danger = options && options.danger;
    return React.createElement(
      'button',
      {
        type: 'button',
        className: 'vm-op-action' + (danger ? ' vpr-op-action--danger' : ''),
        'aria-label': label,
        onClick: function (e) {
          e.stopPropagation();
          onClick();
        },
      },
      React.createElement(Icon, {
        className: 'vm-op-action__icon',
        'aria-hidden': true,
        strokeWidth: 1.75,
      }),
      React.createElement('span', { className: 'vm-op-action__label' }, label),
    );
  }

  function renderSubBatchActionCell(batch, parent) {
    return React.createElement(
      'div',
      {
        className: 'vm-row-actions vm-operation-actions vpr-pickup-subtable__actions',
        onClick: function (e) {
          e.stopPropagation();
        },
      },
      renderPrimaryOpButton('查看', Eye, function () {
        goView(batch, parent);
      }),
      renderPrimaryOpButton('关联收款记录', CircleDollarSign, function () {
        goLinkPaymentRecords(batch, parent);
      }),
      shouldShowSubBatchRefund(parent)
        ? renderPrimaryOpButton('退款', Undo2, function () {
          goRefund(parent);
        }, { danger: true })
        : null,
    );
  }

  function persistMainList(nextList) {
    var enriched = (nextList || []).map(enrichPickupRecord);
    saveStoredPickupList(enriched);
    setMainList(enriched);
  }

  function goView(record, parent) {
    if (props && typeof props.onGoView === 'function') props.onGoView(record, parent);
    else message.info('查看提车收款单详情（原型）');
  }

  function goEdit(record, parent) {
    if (props && typeof props.onGoEdit === 'function') props.onGoEdit(record, parent);
    else message.info('跳转至提车收款单编辑（原型）');
  }

  function toggleRowExpand(contractCode) {
    setExpandedRowKeys(function (prev) {
      if (prev.indexOf(contractCode) >= 0) return [];
      return [contractCode];
    });
  }

  function renderRowExpandIcon(record) {
    var expanded = expandedRowKeys.indexOf(record.contractCode) >= 0;
    return React.createElement('span', {
      className:
        'ant-table-row-expand-icon ' +
        (expanded ? 'ant-table-row-expand-icon-expanded' : 'ant-table-row-expand-icon-collapsed'),
      role: 'button',
      tabIndex: 0,
      'aria-label': expanded ? '收起提车应收款单据' : '展开提车应收款单据',
      onClick: function (e) {
        e.stopPropagation();
        toggleRowExpand(record.contractCode);
      },
      onKeyDown: function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          toggleRowExpand(record.contractCode);
        }
      },
    });
  }

  function handleProjectInfoClick(record, e) {
    if (e) e.stopPropagation();
    if (canShowHandle(record)) {
      goHandle(record);
      return;
    }
    message.info('当前合同暂无可办理的提车应收款');
  }

  function renderProjectInfoCell(_, record) {
    var clickable = canShowHandle(record);
    var hasSubRows = Boolean(record && record.children && record.children.length);
    return React.createElement(
      'div',
      { className: 'lc-project-info-merged-cell' },
      hasSubRows ? renderRowExpandIcon(record) : React.createElement('span', { className: 'vpr-row-expand-spacer', 'aria-hidden': true }),
      React.createElement(
        'div',
        {
          className: 'lc-project-info-cell' + (clickable ? ' vpr-project-info-cell--clickable' : ''),
          role: clickable ? 'button' : undefined,
          tabIndex: clickable ? 0 : undefined,
          title: clickable ? '点击进入办理' : displayText(record.customerName),
          onClick: function (e) {
            handleProjectInfoClick(record, e);
          },
          onKeyDown: clickable
            ? function (e) {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                handleProjectInfoClick(record, e);
              }
            }
            : undefined,
        },
        React.createElement(
          'div',
          { className: 'vm-stack' },
          React.createElement(
            'span',
            { className: 'primary', title: displayText(record.customerName) },
            displayText(record.customerName),
          ),
          React.createElement(
            'span',
            { className: 'code', title: displayText(record.contractCode) },
            displayText(record.contractCode),
          ),
          React.createElement(
            'span',
            { className: 'sub', title: displayText(record.projectName) },
            displayText(record.projectName),
          ),
        ),
      ),
    );
  }

  function renderBusinessOwnerCell(_, record) {
    return React.createElement(
      'div',
      { className: 'vm-stack' },
      React.createElement(
        'span',
        { className: 'primary', title: displayText(record.businessDept) },
        displayText(record.businessDept),
      ),
      React.createElement(
        'span',
        { className: 'sub', title: displayText(record.businessPerson) },
        displayText(record.businessPerson),
      ),
    );
  }

  function getPickedUpVehicles(record) {
    var result = [];
    var seen = {};
    (record.children || []).forEach(function (child) {
      var audit = String(child.auditStatus || '');
      if (audit === '已驳回' || audit === '审批驳回') return;
      (child.deliveryVehicles || []).forEach(function (v) {
        var key = [v.brand || '', v.model || '', v.plateNo || ''].join('|');
        if (seen[key]) return;
        seen[key] = true;
        result.push(Object.assign({}, v, {
          actualDelivery: child.pickupDate || child.chargeTime || '-',
          deliveryPerson: child.creator || '-',
        }));
      });
    });
    return result;
  }

  var VEHICLE_PLATE_UNSELECTED_LABEL = '车辆待选';

  function formatVehiclePlateLabel(plateNo) {
    var plate = plateNo && String(plateNo).trim();
    if (!plate || plate === '-') return null;
    return plate;
  }

  function resolveVehicleTypeLabel(vehicle) {
    if (vehicle.vehicleType && String(vehicle.vehicleType).trim() && vehicle.vehicleType !== '-') {
      return vehicle.vehicleType;
    }
    if (vehicle.model && String(vehicle.model).trim() && vehicle.model !== '-') {
      return vehicle.model;
    }
    var brandModel = [vehicle.brand, vehicle.model].filter(function (part) {
      return part && String(part).trim() && part !== '-';
    }).join(' ');
    return brandModel || '车辆';
  }

  function normalizePopoverVehicle(vehicle, index) {
    return Object.assign({}, vehicle, {
      vehicleType: resolveVehicleTypeLabel(vehicle),
      seq: vehicle.seq != null ? vehicle.seq : index + 1,
    });
  }

  function renderVehiclePopoverIcon(type) {
    if (type === 'delivered') {
      return React.createElement(
        'svg',
        {
          xmlns: 'http://www.w3.org/2000/svg',
          width: 18,
          height: 18,
          viewBox: '0 0 24 24',
          fill: 'none',
          stroke: 'currentColor',
          strokeWidth: 2,
          strokeLinecap: 'round',
          strokeLinejoin: 'round',
        },
        React.createElement('path', { d: 'M22 11.08V12a10 10 0 1 1-5.93-9.14' }),
        React.createElement('polyline', { points: '22 4 12 14.01 9 11.01' }),
      );
    }
    return React.createElement(
      'svg',
      {
        xmlns: 'http://www.w3.org/2000/svg',
        width: 18,
        height: 18,
        viewBox: '0 0 24 24',
        fill: 'none',
        stroke: 'currentColor',
        strokeWidth: 2,
        strokeLinecap: 'round',
        strokeLinejoin: 'round',
      },
      React.createElement('path', { d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' }),
      React.createElement('path', { d: 'M15 18H9' }),
      React.createElement('path', { d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' }),
      React.createElement('circle', { cx: '17', cy: '18', r: '2' }),
      React.createElement('circle', { cx: '7', cy: '18', r: '2' }),
    );
  }

  function renderVehiclePopoverCard(vehicle, index, variant) {
    var plate = formatVehiclePlateLabel(vehicle.plateNo);
    var brandModel = [vehicle.brand, vehicle.model].filter(function (part) {
      return part && String(part).trim() && part !== '-';
    }).join(' · ') || '-';

    return React.createElement(
      'article',
      {
        key: 'vehicle-card-' + index,
        className: 'lc-vehicle-popover-card' + (variant === 'delivered' ? ' lc-vehicle-popover-card--delivered' : ''),
      },
      React.createElement(
        'div',
        { className: 'lc-vehicle-popover-card__head' },
        React.createElement(
          'span',
          { className: 'lc-vehicle-popover-card__type', title: vehicle.vehicleType || '' },
          vehicle.vehicleType || '-',
        ),
        plate
          ? React.createElement('span', { className: 'lc-vehicle-popover-card__plate tabular-nums' }, plate)
          : React.createElement(
              'span',
              { className: 'lc-vehicle-popover-card__plate lc-vehicle-popover-card__plate--pending' },
              VEHICLE_PLATE_UNSELECTED_LABEL,
            ),
      ),
      React.createElement(
        'div',
        { className: 'lc-vehicle-popover-card__body' },
        React.createElement(
          'div',
          { className: 'lc-vehicle-popover-card__field' },
          React.createElement('span', { className: 'lc-vehicle-popover-card__label' }, '品牌型号'),
          React.createElement('span', { className: 'lc-vehicle-popover-card__value', title: brandModel }, brandModel),
        ),
        variant === 'delivered'
          ? React.createElement(
              'div',
              { className: 'lc-vehicle-popover-card__delivery' },
              React.createElement(
                'span',
                { className: 'lc-vehicle-popover-card__delivery-item tabular-nums' },
                React.createElement(
                  'svg',
                  {
                    xmlns: 'http://www.w3.org/2000/svg',
                    width: 14,
                    height: 14,
                    viewBox: '0 0 24 24',
                    fill: 'none',
                    stroke: 'currentColor',
                    strokeWidth: 2,
                    strokeLinecap: 'round',
                    strokeLinejoin: 'round',
                    'aria-hidden': true,
                  },
                  React.createElement('rect', { x: '3', y: '4', width: '18', height: '18', rx: '2' }),
                  React.createElement('line', { x1: '16', y1: '2', x2: '16', y2: '6' }),
                  React.createElement('line', { x1: '8', y1: '2', x2: '8', y2: '6' }),
                  React.createElement('line', { x1: '3', y1: '10', x2: '21', y2: '10' }),
                ),
                vehicle.actualDelivery || '-',
              ),
              React.createElement(
                'span',
                { className: 'lc-vehicle-popover-card__delivery-item' },
                React.createElement(
                  'svg',
                  {
                    xmlns: 'http://www.w3.org/2000/svg',
                    width: 14,
                    height: 14,
                    viewBox: '0 0 24 24',
                    fill: 'none',
                    stroke: 'currentColor',
                    strokeWidth: 2,
                    strokeLinecap: 'round',
                    strokeLinejoin: 'round',
                    'aria-hidden': true,
                  },
                  React.createElement('path', { d: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2' }),
                  React.createElement('circle', { cx: '12', cy: '7', r: '4' }),
                ),
                vehicle.deliveryPerson && vehicle.deliveryPerson !== '-' ? vehicle.deliveryPerson : '-',
              ),
            )
          : null,
      ),
    );
  }

  function groupLeaseVehiclesByBrandModel(vehicles) {
    var groups = [];
    var indexByKey = {};
    (vehicles || []).forEach(function (vehicle) {
      var brand = vehicle.brand && String(vehicle.brand).trim() ? vehicle.brand : '-';
      var model = vehicle.model && String(vehicle.model).trim() ? vehicle.model : '-';
      var key = brand + '::' + model;
      if (indexByKey[key] != null) {
        groups[indexByKey[key]].count += 1;
      } else {
        indexByKey[key] = groups.length;
        groups.push({ brand: brand, model: model, count: 1 });
      }
    });
    return groups;
  }

  function renderRentalSummaryPopoverPanel(config) {
    var vehicles = config.vehicles || [];
    var groups = groupLeaseVehiclesByBrandModel(vehicles);
    var totalCount = vehicles.length;
    return React.createElement(
      'div',
      { className: 'lc-vehicle-popover__panel', role: 'region', 'aria-label': config.title },
      React.createElement(
        'div',
        { className: 'lc-vehicle-popover__header' },
        React.createElement(
          'div',
          { className: 'lc-vehicle-popover__header-icon', 'aria-hidden': true },
          renderVehiclePopoverIcon('rental'),
        ),
        React.createElement(
          'div',
          { className: 'lc-vehicle-popover__header-text' },
          React.createElement('div', { className: 'lc-vehicle-popover__header-title' }, config.title),
          React.createElement(
            'div',
            { className: 'lc-vehicle-popover__header-sub' },
            config.subtitle,
            React.createElement('span', { className: 'lc-vehicle-popover__count tabular-nums' }, totalCount + ' 辆'),
          ),
        ),
      ),
      groups.length === 0
        ? React.createElement('div', { className: 'lc-vehicle-popover__empty' }, config.emptyText || '暂无车辆')
        : React.createElement(
          'div',
          { className: 'lc-vehicle-popover__summary-wrap' },
          React.createElement(
            'table',
            { className: 'lc-vehicle-popover__summary-table' },
            React.createElement(
              'thead',
              null,
              React.createElement(
                'tr',
                null,
                React.createElement('th', { scope: 'col' }, '品牌'),
                React.createElement('th', { scope: 'col' }, '型号'),
                React.createElement('th', { scope: 'col', className: 'is-count' }, '车辆数'),
              ),
            ),
            React.createElement(
              'tbody',
              null,
              groups.map(function (group, index) {
                return React.createElement(
                  'tr',
                  { key: 'rental-group-' + index },
                  React.createElement('td', { title: group.brand }, group.brand),
                  React.createElement('td', { title: group.model }, group.model),
                  React.createElement('td', { className: 'is-count tabular-nums' }, group.count),
                );
              }),
            ),
          ),
        ),
    );
  }

  function renderVehiclePopoverPanel(config) {
    var vehicles = (config.vehicles || []).map(normalizePopoverVehicle);
    var count = vehicles.length;
    return React.createElement(
      'div',
      { className: 'lc-vehicle-popover__panel', role: 'region', 'aria-label': config.title },
      React.createElement(
        'div',
        { className: 'lc-vehicle-popover__header' },
        React.createElement(
          'div',
          {
            className: 'lc-vehicle-popover__header-icon' + (config.variant === 'delivered' ? ' is-delivered' : ''),
            'aria-hidden': true,
          },
          renderVehiclePopoverIcon(config.variant),
        ),
        React.createElement(
          'div',
          { className: 'lc-vehicle-popover__header-text' },
          React.createElement('div', { className: 'lc-vehicle-popover__header-title' }, config.title),
          React.createElement(
            'div',
            { className: 'lc-vehicle-popover__header-sub' },
            config.subtitle,
            React.createElement('span', { className: 'lc-vehicle-popover__count tabular-nums' }, count + ' 辆'),
          ),
        ),
      ),
      count === 0
        ? React.createElement('div', { className: 'lc-vehicle-popover__empty' }, config.emptyText || '暂无车辆')
        : React.createElement(
            'div',
            { className: 'lc-vehicle-popover__list' },
            vehicles.map(function (vehicle, index) {
              return renderVehiclePopoverCard(vehicle, index, config.variant);
            }),
          ),
    );
  }

  function renderPickupCollectionCell(_, record) {
    var contractCount = record.contractVehicleCount != null
      ? record.contractVehicleCount
      : (record.leaseOrderVehicles || []).length;
    var pickedCount = record.pickedUpVehicleCount != null
      ? record.pickedUpVehicleCount
      : getPickedUpVehicles(record).length;
    var contractKey = (record.contractCode || '') + '-contract';
    var pickedExpanded = expandedRowKeys.indexOf(record.contractCode) >= 0;
    var popoverCommonProps = {
      overlayClassName: 'lc-vehicle-popover',
      placement: 'bottom',
      trigger: 'click',
      arrow: { pointAtCenter: true },
      destroyTooltipOnHide: true,
    };
    var contractPanel = renderRentalSummaryPopoverPanel({
      title: '租车车辆明细',
      subtitle: record.contractCode || '',
      vehicles: record.leaseOrderVehicles || [],
      emptyText: '该合同暂无车辆',
    });

    return React.createElement(
      'div',
      { className: 'lc-lease-order-counts' },
      React.createElement(
        Popover,
        Object.assign({}, popoverCommonProps, {
          content: contractPanel,
          title: null,
          open: contractPopoverKey === contractKey,
          onOpenChange: function (visible) {
            if (!visible) setContractPopoverKey(null);
            else setContractPopoverKey(contractKey);
          },
        }),
        React.createElement(
          'button',
          {
            type: 'button',
            className: 'lc-lease-order-counts__item',
            'aria-label': '租车数 ' + contractCount,
          },
          React.createElement(
            'span',
            { className: 'lc-lease-order-counts__value tabular-nums' },
            contractCount,
          ),
          React.createElement('span', { className: 'lc-lease-order-counts__label' }, '租车数'),
        ),
      ),
      React.createElement('span', { className: 'lc-lease-order-counts__sep', 'aria-hidden': true }),
      React.createElement(
        'button',
        {
          type: 'button',
          className: 'lc-lease-order-counts__item'
            + (pickedExpanded ? ' lc-lease-order-counts__item--active' : ''),
          'aria-label': '已提车数 ' + pickedCount,
          'aria-expanded': pickedExpanded,
          onClick: function (e) {
            e.stopPropagation();
            setContractPopoverKey(null);
            toggleRowExpand(record.contractCode);
          },
        },
        React.createElement(
          'span',
          { className: 'lc-lease-order-counts__value tabular-nums' },
          pickedCount,
        ),
        React.createElement('span', { className: 'lc-lease-order-counts__label' }, '已提车'),
      ),
    );
  }

  function renderMoneySubCell(amount) {
    return React.createElement(
      'span',
      { className: 'vpr-money-cell tabular-nums' },
      fmtMoneyYuan(amount),
    );
  }

  function moneyColumnCellProps(_variant, isTotal) {
    if (!isTotal) {
      return { className: 'vpr-money-col-td' };
    }
    return {
      className: 'vpr-money-col-td vpr-money-col-td--total',
    };
  }

  function moneyColumnHeaderProps(_variant, isTotal) {
    if (!isTotal) {
      return { className: 'vpr-money-col-th' };
    }
    return {
      className: 'vpr-money-col-th vpr-money-col-th--total',
    };
  }

  function renderReceivableRentCell(_, record) {
    return renderMoneySubCell(record.totalReceivableRent);
  }

  function renderReceivableDepositCell(_, record) {
    return renderMoneySubCell(record.totalReceivableDeposit);
  }

  function renderReceivableServiceCell(_, record) {
    return renderMoneySubCell(record.totalReceivableService);
  }

  function renderReceivedRentCell(_, record) {
    return renderMoneySubCell(record.totalReceivedRent);
  }

  function renderReceivedDepositCell(_, record) {
    return renderMoneySubCell(record.totalReceivedDeposit);
  }

  function renderReceivedServiceCell(_, record) {
    return renderMoneySubCell(record.totalReceivedService);
  }

  function renderReceivableTotalCell(_, record) {
    var amount = record.totalReceivableAmount != null
      ? record.totalReceivableAmount
      : 0;
    return React.createElement(
      'span',
      {
        className: 'vpr-money-cell vpr-money-cell--total tabular-nums',
        title: '合计应收金额 = 应收租金 + 应收保证金 + 应收服务费',
      },
      fmtMoneyYuan(amount),
    );
  }

  function renderReceivedTotalCell(_, record) {
    var amount = record.totalReceivedAmount != null ? record.totalReceivedAmount : 0;
    return React.createElement(
      'span',
      {
        className: 'vpr-money-cell vpr-money-cell--total tabular-nums',
        title: '合计实收金额 = 实收租金 + 实收保证金 + 实收服务费',
      },
      fmtMoneyYuan(amount),
    );
  }

  function renderMainActionCell(_, record) {
    var showHandle = canShowHandle(record);
    if (!showHandle) {
      return React.createElement('span', { className: 'vm-operation-actions vm-operation-actions--empty' }, '—');
    }
    return React.createElement(
      'div',
      {
        className: 'vm-row-actions vm-operation-actions',
        onClick: function (e) {
          e.stopPropagation();
        },
      },
      React.createElement(
        'button',
        {
          type: 'button',
          className: 'vm-op-action',
          'aria-label': '办理',
          onClick: function (e) {
            e.stopPropagation();
            goHandle(record);
          },
        },
        React.createElement(ClipboardCheck, {
          className: 'vm-op-action__icon',
          'aria-hidden': true,
          strokeWidth: 1.75,
        }),
        React.createElement('span', { className: 'vm-op-action__label' }, '办理'),
      ),
    );
  }

  function renderBatchVehicleCountTag(batch) {
    var count = (batch && batch.deliveryVehicles && batch.deliveryVehicles.length)
      || batch.deliveryCount
      || 0;
    return React.createElement(
      'span',
      {
        className: 'vpr-pickup-subtable__vehicle-count tabular-nums',
        title: '本批次提车车辆数',
      },
      String(count) + ' 辆',
    );
  }

  function renderPickupSubTable(parent) {
    var batches = parent.children || [];
    if (!batches.length) {
      return React.createElement('div', { className: 'vpr-pickup-expand__empty' }, '暂无提车车辆清单，请点击操作列「办理」选择车辆并约定交付时间、交付地点后提交生成');
    }

    var modelGroupRows = buildPickupSubModelGroupRows(parent);

    return React.createElement(
      'div',
      { className: 'vpr-pickup-table-wrap' },
      React.createElement(
        'table',
        { className: 'vpr-pickup-native-table vpr-pickup-native-table--vehicles' },
        React.createElement(
          'thead',
          null,
          React.createElement(
            'tr',
            null,
            React.createElement('th', { style: { width: 48 } }, '序号'),
            React.createElement('th', { style: { width: 88 } }, '单据状态'),
            React.createElement('th', { style: { width: 108 } }, '交付时间'),
            React.createElement('th', { style: { width: 120 } }, '交付地点'),
            React.createElement('th', { style: { width: 180 } }, '品牌型号'),
            React.createElement('th', { style: { width: 64 } }, '数量'),
            React.createElement('th', { style: { width: 104 } }, '合计应收'),
            React.createElement('th', { style: { width: 104 } }, '合计实收'),
            React.createElement('th', { style: { width: 248 } }, '操作'),
          ),
        ),
        React.createElement(
          'tbody',
          null,
          modelGroupRows.map(function (row) {
            var batch = row.batch;
            var modelGroup = row.modelGroup;
            var sampleVehicle = modelGroup && modelGroup.vehicles.length ? modelGroup.vehicles[0] : null;
            var auditStatus = normalizeAuditStatus(batch.auditStatus);
            var auditLabel = auditStatus === '已驳回' ? '审批驳回' : (auditStatus || '—');
            var batchTotals = getBatchAmountTotals(batch);
            var rowKey = (parent.contractCode || '') + '-' + batch.seq + '-' + (modelGroup ? modelGroup.key : 'empty');
            var cells = [];

            if (row.isFirstInBatch) {
              cells.push(
                React.createElement(
                  'td',
                  {
                    key: 'seq',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell tabular-nums',
                  },
                  row.batchSeq,
                ),
                React.createElement(
                  'td',
                  {
                    key: 'status',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell',
                  },
                  React.createElement(StatusTag, {
                    label: auditLabel,
                    tone: auditStatusTone(batch.auditStatus),
                    title: auditLabel,
                  }),
                ),
              );
            }

            if (row.isFirstInBatch) {
              cells.push(
                React.createElement(
                  'td',
                  {
                    key: 'deliveryTime',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell tabular-nums',
                  },
                  displayText(sampleVehicle ? sampleVehicle.deliveryTime : batch.pickupDate),
                ),
                React.createElement(
                  'td',
                  {
                    key: 'deliveryLocation',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell',
                    title: sampleVehicle ? sampleVehicle.deliveryLocation : batch.deliveryLocation,
                  },
                  displayText(sampleVehicle ? sampleVehicle.deliveryLocation : batch.deliveryLocation),
                ),
              );
            }

            cells.push(
              React.createElement('td', { key: 'vehicleInfo' }, renderModelGroupCell(modelGroup)),
            );

            if (row.isFirstInBatch) {
              cells.push(
                React.createElement(
                  'td',
                  {
                    key: 'vehicleCount',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell vpr-pickup-subtable__vehicle-count-cell',
                  },
                  renderBatchVehicleCountTag(batch),
                ),
              );
            }

            if (row.isFirstInBatch) {
              cells.push(
                React.createElement(
                  'td',
                  {
                    key: 'recvTotal',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell vpr-money vpr-money--total',
                    title: '本批次所选车辆应收金额合计',
                  },
                  fmtMoneyYuan(batchTotals.receivableTotal),
                ),
                React.createElement(
                  'td',
                  {
                    key: 'rcvdTotal',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell vpr-money vpr-money--total',
                    title: '本批次所选车辆实收金额合计',
                  },
                  fmtMoneyYuan(batchTotals.receivedTotal),
                ),
                React.createElement(
                  'td',
                  {
                    key: 'actions',
                    rowSpan: row.batchRowSpan,
                    className: 'vpr-pickup-subtable__batch-cell vpr-pickup-subtable__actions',
                  },
                  renderSubBatchActionCell(batch, parent),
                ),
              );
            }

            return React.createElement('tr', { key: rowKey }, cells);
          }),
        ),
      ),
    );
  }

  function renderExpandedPickupTable(record) {
    return React.createElement(
      'div',
      { className: 'vpr-pickup-expand' },
      renderPickupSubTable(record),
    );
  }

  function confirmDeleteSub() {
    if (deleteConfirmParent && deleteConfirmRecord) {
      persistMainList(
        mainList.map(function (p) {
          if (p.contractCode !== deleteConfirmParent.contractCode) return p;
          var newChildren = (p.children || []).filter(function (r) {
            return !(r.seq === deleteConfirmRecord.seq && r.chargeTime === deleteConfirmRecord.chargeTime);
          });
          newChildren = newChildren.map(function (r, index) {
            return Object.assign({}, r, { seq: index + 1 });
          });
          return Object.assign({}, p, { children: newChildren });
        }),
      );
      message.success('已删除');
    }
    setDeleteConfirmVisible(false);
    setDeleteConfirmRecord(null);
    setDeleteConfirmParent(null);
  }

  var columns = useMemo(
    function () {
      var colWidths = tableColumnWidths;
      return [
        {
          title: '项目信息',
          key: 'projectInfo',
          width: colWidths[0],
          ellipsis: true,
          className: 'lc-project-info-col vpr-col-project',
          onHeaderCell: function () {
            return { className: 'lc-project-info-col vpr-col-project' };
          },
          onCell: function () {
            return { className: 'lc-project-info-col vpr-col-project vm-stacked-cell-td' };
          },
          render: renderProjectInfoCell,
        },
        {
          title: '业务负责人',
          key: 'businessOwner',
          width: colWidths[1],
          ellipsis: true,
          onCell: function () {
            return { className: 'vm-stacked-cell-td vpr-col-owner' };
          },
          render: renderBusinessOwnerCell,
        },
        {
          title: '收款情况',
          key: 'pickupCollection',
          width: colWidths[2],
          className: 'vpr-col-pickup',
          onHeaderCell: function () {
            return {
              className: 'vpr-col-pickup',
              'data-annotation-id': 'vpr-col-pickup',
            };
          },
          onCell: function () {
            return { className: 'vpr-col-pickup' };
          },
          render: renderPickupCollectionCell,
        },
        {
          title: '应收租金',
          key: 'receivableRent',
          width: colWidths[3],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('receivable', false);
          },
          onCell: function () {
            return moneyColumnCellProps('receivable', false);
          },
          render: renderReceivableRentCell,
        },
        {
          title: '应收保证金',
          key: 'receivableDeposit',
          width: colWidths[4],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('receivable', false);
          },
          onCell: function () {
            return moneyColumnCellProps('receivable', false);
          },
          render: renderReceivableDepositCell,
        },
        {
          title: '应收服务费',
          key: 'receivableService',
          width: colWidths[5],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('receivable', false);
          },
          onCell: function () {
            return moneyColumnCellProps('receivable', false);
          },
          render: renderReceivableServiceCell,
        },
        {
          title: '合计应收金额',
          key: 'totalReceivable',
          width: colWidths[6],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('receivable', true);
          },
          onCell: function () {
            return moneyColumnCellProps('receivable', true);
          },
          render: renderReceivableTotalCell,
        },
        {
          title: '实收租金',
          key: 'receivedRent',
          width: colWidths[7],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('received', false);
          },
          onCell: function () {
            return moneyColumnCellProps('received', false);
          },
          render: renderReceivedRentCell,
        },
        {
          title: '实收保证金',
          key: 'receivedDeposit',
          width: colWidths[8],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('received', false);
          },
          onCell: function () {
            return moneyColumnCellProps('received', false);
          },
          render: renderReceivedDepositCell,
        },
        {
          title: '实收服务费',
          key: 'receivedService',
          width: colWidths[9],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('received', false);
          },
          onCell: function () {
            return moneyColumnCellProps('received', false);
          },
          render: renderReceivedServiceCell,
        },
        {
          title: '合计实收金额',
          key: 'totalReceived',
          width: colWidths[10],
          align: 'left',
          onHeaderCell: function () {
            return moneyColumnHeaderProps('received', true);
          },
          onCell: function () {
            return moneyColumnCellProps('received', true);
          },
          render: renderReceivedTotalCell,
        },
        {
          title: '操作',
          key: 'action',
          width: colWidths[11],
          className: 'vpr-col-action',
          render: renderMainActionCell,
        },
      ];
    },
    [expandedRowKeys, contractPopoverKey, mainList, tableColumnWidths],
  );

  var filterItems = [
    React.createElement(
      'label',
      { key: 'contractCode', className: 'vm-filter-field' },
      React.createElement('span', null, '合同编码'),
      React.createElement(Select, {
        value: filters.contractCode,
        options: filterOptions.contractCode,
        allowClear: true,
        placeholder: '请选择或输入合同编码',
        showSearch: true,
        filterOption: filterOption,
        className: 'lc-filter-select',
        onChange: function (v) {
          setFilters(function (p) {
            return Object.assign({}, p, { contractCode: v });
          });
        },
      }),
    ),
    React.createElement(
      'label',
      { key: 'projectName', className: 'vm-filter-field' },
      React.createElement('span', null, '项目名称'),
      React.createElement(Select, {
        value: filters.projectName,
        options: filterOptions.projectName,
        allowClear: true,
        placeholder: '请选择或输入项目名称',
        showSearch: true,
        filterOption: filterOption,
        className: 'lc-filter-select',
        onChange: function (v) {
          setFilters(function (p) {
            return Object.assign({}, p, { projectName: v });
          });
        },
      }),
    ),
    React.createElement(
      'label',
      { key: 'customerName', className: 'vm-filter-field' },
      React.createElement('span', null, '客户名称'),
      React.createElement(Select, {
        value: filters.customerName,
        options: filterOptions.customerName,
        allowClear: true,
        placeholder: '请选择或输入客户名称',
        showSearch: true,
        filterOption: filterOption,
        className: 'lc-filter-select',
        onChange: function (v) {
          setFilters(function (p) {
            return Object.assign({}, p, { customerName: v });
          });
        },
      }),
    ),
    React.createElement(
      'label',
      { key: 'businessDept', className: 'vm-filter-field' },
      React.createElement('span', null, '业务部门'),
      React.createElement(Select, {
        value: filters.businessDept,
        options: filterOptions.businessDept,
        allowClear: true,
        placeholder: '请选择业务部门',
        className: 'lc-filter-select',
        onChange: function (v) {
          setFilters(function (p) {
            return Object.assign({}, p, { businessDept: v });
          });
        },
      }),
    ),
    React.createElement(
      'label',
      { key: 'businessPerson', className: 'vm-filter-field' },
      React.createElement('span', null, '业务负责人'),
      React.createElement(Select, {
        value: filters.businessPerson,
        options: filterOptions.businessPerson,
        allowClear: true,
        placeholder: '请选择业务负责人',
        className: 'lc-filter-select',
        onChange: function (v) {
          setFilters(function (p) {
            return Object.assign({}, p, { businessPerson: v });
          });
        },
      }),
    ),
  ];

  var filterCount = filterExpanded ? filterItems.length : 4;
  var filterNodes = filterItems.slice(0, filterCount);

  return React.createElement(
    App,
    null,
    React.createElement(
      'div',
      {
        className: 'vm-page lc-page lc-page--list-dense vpr-page',
        style: { '--lc-list-chrome-offset': VPR_LIST_CHROME_OFFSET + 'px' },
        'data-annotation-id': 'vpr-list',
      },
      React.createElement('style', null, ONEOS_ANT_TABLE_GLOBAL_FIX.join('\n')),
      React.createElement(
        'section',
        {
          className: 'vm-filter-card ldb-filter-card',
          'data-annotation-id': 'vpr-filter',
          'aria-label': '筛选条件',
        },
        React.createElement(
          'header',
          { className: 'vm-filter-header' },
          React.createElement('h2', { className: 'vm-filter-title' }, '筛选条件'),
        ),
        React.createElement(
          'div',
          { className: 'ldb-filter-body' },
          React.createElement('div', { className: 'vm-filter-grid ldb-filter-grid ldb-filter-grid--primary' }, filterNodes),
        ),
        React.createElement(
          'div',
          { className: 'vm-filter-actions ldb-filter-actions' },
          filterItems.length > 4
            ? React.createElement(
                'button',
                {
                  type: 'button',
                  className: 'vm-btn vm-btn-link ldb-filter-toggle',
                  'data-vm-icon': filterExpanded ? 'chevron-up' : 'filter',
                  onClick: function () {
                    setFilterExpanded(!filterExpanded);
                  },
                },
                filterExpanded ? '收起' : '更多筛选',
              )
            : null,
          React.createElement(
            'button',
            { type: 'button', className: 'vm-btn vm-btn-ghost ldb-toolbar-btn', 'data-vm-icon': 'rotate-ccw', onClick: resetFilters },
            '重置',
          ),
          React.createElement(
            'button',
            { type: 'button', className: 'vm-btn vm-btn-primary ldb-toolbar-btn', 'data-vm-icon': 'search', onClick: handleQuery },
            '查询',
          ),
        ),
      ),
      React.createElement(
        'div',
        {
          className: 'vm-kpi-row',
          role: 'group',
          'aria-label': '提车收款单统计',
          'data-annotation-id': 'vpr-kpi',
        },
        PICKUP_KPI_CARDS.map(function (card) {
          return React.createElement(
            'button',
            {
              key: card.key,
              type: 'button',
              className: 'vm-kpi-card' + (kpiTab === card.key ? ' active' : ''),
              onClick: function () {
                setKpiTab(card.key);
                setPage(1);
              },
              'aria-pressed': kpiTab === card.key,
            },
            React.createElement(
              'span',
              {
                className: 'vm-kpi-tip',
                tabIndex: 0,
                role: 'note',
                'aria-label': card.title + '说明',
                onClick: function (e) {
                  e.stopPropagation();
                },
                onMouseDown: function (e) {
                  e.stopPropagation();
                },
              },
              kpiHelpIcon(),
              React.createElement('span', { className: 'vm-kpi-tooltip', role: 'tooltip' }, card.desc),
            ),
            React.createElement('span', { className: 'vm-kpi-icon', 'aria-hidden': true }, KPI_ICONS[card.key]),
            React.createElement(
              'span',
              { className: 'vm-kpi-main' },
              React.createElement('span', { className: 'vm-kpi-eyebrow' }, card.title),
              React.createElement(
                'span',
                { className: 'vm-kpi-val tabular-nums' },
                kpiCounts[card.key] != null ? kpiCounts[card.key] : 0,
              ),
            ),
          );
        }),
      ),
      React.createElement(
        'section',
        { className: 'vm-table-section' },
        React.createElement(
          'div',
          { className: 'vm-table-toolbar', 'data-annotation-id': 'vpr-toolbar' },
          React.createElement(
            'div',
            { className: 'vm-table-actions' },
            React.createElement(
              'button',
              {
                type: 'button',
                className: 'vm-btn vm-btn-ghost ldb-toolbar-btn',
                'data-vm-icon': 'download',
                onClick: function () {
                  message.success('已按当前筛选条件导出 ' + totalCount + ' 条合同记录（原型）');
                },
              },
              '导出',
            ),
          ),
        ),
        React.createElement(
          'div',
          { className: 'vm-table-card', 'data-annotation-id': 'vpr-table' },
          React.createElement(
            'div',
            { className: 'vm-table-wrap', ref: tableWrapRef },
            React.createElement(Table, {
              className: 'vm-list-table lc-list-table--nested vpr-main-list-table',
              rowKey: 'contractCode',
              columns: columns,
              dataSource: pagedList,
              tableLayout: 'fixed',
              scroll: {
                x: tableScrollX,
                y: 'max(calc(100vh - var(--lc-list-chrome-offset, 420px)), 240px)',
              },
              size: 'small',
              pagination: false,
              expandable: {
                showExpandColumn: false,
                expandIconColumnIndex: -1,
                expandIcon: function () {
                  return null;
                },
                childrenColumnName: '__pickup_sub_batches__',
                expandedRowKeys: expandedRowKeys,
                onExpandedRowsChange: function (keys) {
                  setExpandedRowKeys(keys.length ? [keys[keys.length - 1]] : []);
                },
                expandedRowRender: renderExpandedPickupTable,
                rowExpandable: function (record) {
                  return Boolean(record && record.children && record.children.length);
                },
              },
            }),
          ),
          React.createElement(
            'div',
            { className: 'vm-table-footer' },
            React.createElement(TablePagination, {
              page: safePage,
              pageSize: pageSize,
              total: totalCount,
              onPageChange: function (nextPage) {
                setPage(nextPage);
              },
              onPageSizeChange: function (size) {
                setPageSize(size);
                setPage(1);
              },
            }),
          ),
        ),
      ),
      React.createElement(
        Modal,
        {
          title: '确认删除',
          open: deleteConfirmVisible,
          onCancel: function () {
            setDeleteConfirmVisible(false);
            setDeleteConfirmRecord(null);
            setDeleteConfirmParent(null);
          },
          onOk: confirmDeleteSub,
          okText: '确认',
          cancelText: '取消',
        },
        '确定要删除该提车收款单记录吗？',
      ),
    ),
  );
};

export default Component;
