import { StatusTag } from '../vehicle-management/components/StatusTag';
import {
  fmtMoneyYuan,
  normalizeAuditStatus,
  auditStatusTone,
} from './data/pickup-receivable-list-data.js';

function displayText(value) {
  var text = value == null ? '' : String(value).trim();
  return text || '—';
}

function renderInfoField(label, value) {
  return React.createElement(
    'div',
    { className: 'vpr-collect-field', key: label },
    React.createElement('div', { className: 'vpr-collect-field__label' }, label),
    React.createElement(
      'div',
      { className: 'vpr-collect-field__value', title: displayText(value) },
      displayText(value),
    ),
  );
}

const Component = function (props) {
  var useMemo = React.useMemo;
  var antd = window.antd;
  var Button = antd.Button;
  var Card = antd.Card;

  var ctx = typeof window !== 'undefined' ? window.__pickupViewContext : null;
  var project = ctx || {};
  var publishedRecords = project.publishedRecords || [];
  var pendingVehicles = project.pendingVehicles || [];
  var onGoHandle = props && props.onGoHandle;
  var canHandle = props && props.canHandle;

  var summary = useMemo(function () {
    var receivableTotal = 0;
    var receivedTotal = 0;
    publishedRecords.forEach(function (row) {
      receivableTotal += parseFloat(row.receivableTotal) || 0;
      receivedTotal += parseFloat(row.receivedTotal) || 0;
    });
    return {
      publishedCount: publishedRecords.length,
      pendingCount: pendingVehicles.length,
      receivableTotal: receivableTotal,
      receivedTotal: receivedTotal,
    };
  }, [publishedRecords, pendingVehicles]);

  var showHandle = canHandle && pendingVehicles.length > 0 && onGoHandle;

  function handleBack() {
    if (window.__receivableBack) window.__receivableBack();
  }

  function handleGoHandle() {
    if (onGoHandle) onGoHandle();
  }

  return React.createElement(
    'div',
    { className: 'vm-page lc-page vpr-page vpr-collect-page vpr-contract-view-page' },
    React.createElement(
      'header',
      { className: 'vpr-collect-topbar', 'data-annotation-id': 'vpr-contract-view-topbar' },
      React.createElement(
        'button',
        {
          type: 'button',
          className: 'vm-btn vm-btn-back',
          onClick: handleBack,
        },
        '返回列表',
      ),
    ),
    showHandle
      ? React.createElement(
          'div',
          { className: 'vpr-contract-view-actions' },
          React.createElement(
            Button,
            {
              type: 'primary',
              className: 'vm-btn-primary',
              onClick: handleGoHandle,
            },
            '办理未发布车辆',
          ),
        )
      : null,
    React.createElement(
      'div',
      { className: 'vpr-page-kpi-row', 'data-annotation-id': 'vpr-contract-view-kpi' },
      React.createElement(
        'div',
        { className: 'vpr-collect-kpi-card' },
        React.createElement('div', { className: 'vpr-collect-kpi-card__label' }, '已发布单据'),
        React.createElement(
          'div',
          { className: 'vpr-collect-kpi-card__value tabular-nums' },
          String(summary.publishedCount),
          React.createElement('span', { className: 'vpr-page-kpi-unit' }, ' 条'),
        ),
      ),
      React.createElement(
        'div',
        { className: 'vpr-collect-kpi-card' },
        React.createElement('div', { className: 'vpr-collect-kpi-card__label' }, '未发布车辆'),
        React.createElement(
          'div',
          {
            className:
              'vpr-collect-kpi-card__value tabular-nums'
              + (summary.pendingCount ? ' vpr-page-kpi-value--warn' : ''),
          },
          String(summary.pendingCount),
          React.createElement('span', { className: 'vpr-page-kpi-unit' }, ' 辆'),
        ),
      ),
      React.createElement(
        'div',
        { className: 'vpr-collect-kpi-card' },
        React.createElement('div', { className: 'vpr-collect-kpi-card__label' }, '已发布合计应收'),
        React.createElement(
          'div',
          { className: 'vpr-collect-kpi-card__value tabular-nums' },
          fmtMoneyYuan(summary.receivableTotal),
        ),
      ),
      React.createElement(
        'div',
        { className: 'vpr-collect-kpi-card vpr-collect-kpi-card--primary' },
        React.createElement('div', { className: 'vpr-collect-kpi-card__label' }, '已发布合计实收'),
        React.createElement(
          'div',
          { className: 'vpr-collect-kpi-card__value tabular-nums' },
          fmtMoneyYuan(summary.receivedTotal),
        ),
        React.createElement('div', { className: 'vpr-collect-kpi-card__hint' }, '由收款记录导入反写'),
      ),
    ),
    React.createElement(
      Card,
      {
        className: 'vpr-collect-card vpr-collect-card--primary',
        title: '合同项目信息',
      },
      React.createElement(
        'div',
        { className: 'vpr-collect-info-grid' },
        renderInfoField('客户名称', project.customerName),
        renderInfoField('合同编码', project.contractCode),
        renderInfoField('项目名称', project.projectName),
        renderInfoField('付款周期', project.paymentCycle),
        renderInfoField('业务部门', project.businessDept),
        renderInfoField('业务负责人', project.businessPerson),
        renderInfoField('租车数', project.contractVehicleCount),
        renderInfoField('已提车数', project.pickedUpVehicleCount),
      ),
      React.createElement(
        'div',
        { className: 'vpr-page-callout', role: 'note' },
        React.createElement('strong', null, '说明：'),
        '本页汇总本合同全部已发布与未发布提车应收款。未发布车辆可点击上方「办理未发布车辆」进入办理流程。',
      ),
    ),
    React.createElement(
      'section',
      { className: 'vpr-contract-view-section' },
      React.createElement(
        'div',
        { className: 'vpr-contract-view-section__head' },
        React.createElement('h2', { className: 'vpr-contract-view-section__title' }, '已发布提车应收款'),
        React.createElement(
          'span',
          { className: 'vpr-contract-view-section__count tabular-nums' },
          summary.publishedCount + ' 条',
        ),
      ),
      publishedRecords.length
        ? React.createElement(
            'div',
            { className: 'vpr-pickup-table-wrap vpr-page-table-wrap' },
            React.createElement(
              'table',
              { className: 'vpr-pickup-native-table vpr-contract-view-table' },
              React.createElement(
                'thead',
                null,
                React.createElement(
                  'tr',
                  null,
                  React.createElement('th', null, '提车收款单编码'),
                  React.createElement('th', null, '发布状态'),
                  React.createElement('th', null, '单据状态'),
                  React.createElement('th', null, '交付时间'),
                  React.createElement('th', { className: 'vpr-th--num' }, '车辆数'),
                  React.createElement('th', { className: 'vpr-th--num' }, '合计应收'),
                  React.createElement('th', { className: 'vpr-th--num' }, '合计实收'),
                  React.createElement('th', null, '生成时间'),
                ),
              ),
              React.createElement(
                'tbody',
                null,
                publishedRecords.map(function (row) {
                  var auditLabel = normalizeAuditStatus(row.auditStatus);
                  return React.createElement(
                    'tr',
                    { key: row.collectCode || row.seq, className: 'vpr-page-table-row' },
                    React.createElement('td', { className: 'tabular-nums' }, displayText(row.collectCode)),
                    React.createElement(
                      'td',
                      null,
                      React.createElement(StatusTag, {
                        label: row.publishStatus,
                        tone: 'green',
                        title: row.publishStatus,
                      }),
                    ),
                    React.createElement(
                      'td',
                      null,
                      React.createElement(StatusTag, {
                        label: auditLabel === '已驳回' ? '审批驳回' : auditLabel,
                        tone: auditStatusTone(row.auditStatus),
                        title: auditLabel,
                      }),
                    ),
                    React.createElement('td', { className: 'tabular-nums' }, displayText(row.pickupDate)),
                    React.createElement('td', { className: 'vpr-td--num tabular-nums' }, String(row.vehicleCount || 0)),
                    React.createElement('td', { className: 'vpr-money vpr-td--num tabular-nums' }, fmtMoneyYuan(row.receivableTotal)),
                    React.createElement('td', { className: 'vpr-money vpr-td--num tabular-nums' }, fmtMoneyYuan(row.receivedTotal)),
                    React.createElement('td', { className: 'tabular-nums' }, displayText(row.chargeTime)),
                  );
                }),
              ),
            ),
          )
        : React.createElement(
            'div',
            { className: 'vpr-contract-view-empty vpr-page-empty' },
            React.createElement('p', { className: 'vpr-page-empty__title' }, '暂无已发布记录'),
            React.createElement('p', { className: 'vpr-page-empty__desc' }, '办理提交后将在此展示已生成的提车应收款单据。'),
          ),
    ),
    React.createElement(
      'section',
      { className: 'vpr-contract-view-section' },
      React.createElement(
        'div',
        { className: 'vpr-contract-view-section__head' },
        React.createElement('h2', { className: 'vpr-contract-view-section__title' }, '未发布提车应收款'),
        React.createElement(
          'span',
          { className: 'vpr-contract-view-section__count tabular-nums' },
          summary.pendingCount + ' 辆',
        ),
      ),
      pendingVehicles.length
        ? React.createElement(
            'div',
            { className: 'vpr-pickup-table-wrap vpr-page-table-wrap' },
            React.createElement(
              'table',
              { className: 'vpr-pickup-native-table vpr-contract-view-table' },
              React.createElement(
                'thead',
                null,
                React.createElement(
                  'tr',
                  null,
                  React.createElement('th', { className: 'vpr-th--num' }, '序号'),
                  React.createElement('th', null, '发布状态'),
                  React.createElement('th', null, '品牌'),
                  React.createElement('th', null, '型号'),
                  React.createElement('th', null, '车牌号'),
                  React.createElement('th', null, '说明'),
                ),
              ),
              React.createElement(
                'tbody',
                null,
                pendingVehicles.map(function (vehicle) {
                  return React.createElement(
                    'tr',
                    {
                      key: (vehicle.seq || '') + '-' + (vehicle.plateNo || '') + '-' + (vehicle.model || ''),
                      className: 'vpr-page-table-row',
                    },
                    React.createElement('td', { className: 'vpr-td--num tabular-nums' }, vehicle.seq),
                    React.createElement(
                      'td',
                      null,
                      React.createElement(StatusTag, {
                        label: vehicle.publishStatus,
                        tone: 'amber',
                        title: vehicle.publishStatus,
                      }),
                    ),
                    React.createElement('td', null, displayText(vehicle.brand)),
                    React.createElement('td', null, displayText(vehicle.model)),
                    React.createElement('td', { className: 'tabular-nums' }, displayText(vehicle.plateNo)),
                    React.createElement('td', { className: 'vpr-page-table-muted' }, '尚未办理，可发起提车应收款办理'),
                  );
                }),
              ),
            ),
          )
        : React.createElement(
            'div',
            { className: 'vpr-contract-view-empty vpr-page-empty vpr-page-empty--success' },
            React.createElement('p', { className: 'vpr-page-empty__title' }, '本合同车辆均已发布'),
            React.createElement('p', { className: 'vpr-page-empty__desc' }, '所有车辆均已生成提车应收款，无需再次办理。'),
          ),
    ),
    showHandle
      ? React.createElement(
          'div',
          { className: 'vpr-contract-view-footer-cta' },
          React.createElement(
            Button,
            {
              type: 'primary',
              size: 'large',
              className: 'vm-btn-primary',
              onClick: handleGoHandle,
            },
            '办理 ',
            summary.pendingCount,
            ' 辆未发布车辆',
          ),
        )
      : null,
  );
};

export default Component;
