// 【重要】必须使用 const Component 作为组件变量名 - Axhub 产品原型
// 数字化资产ONEOS运管平台 - 查看交车任务模块（只读，布局参照新增交车任务）

const Component = function() {
  var antd = window.antd;
  var Input = antd.Input;
  var Button = antd.Button;

  // Mock：当前查看的交车任务详情（从列表跳转带入或根据 id 拉取）
  var task = {
    projectName: '嘉兴某某物流氢能运输项目',
    contractCode: 'JXZL20260216YW101235A',
    customerName: '嘉兴某某物流有限公司',
    deliveryRegion: '浙江省 / 嘉兴市',
    deliveryLocation: '浙江省嘉兴市南湖区科技大道1号',
    planDeliveryDisplay: '2026-03-01至2026-03-05',
    billingStartDate: '2026-03-06',
    vehicles: [
      { brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车' },
      { brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌' },
      { brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '' }
    ]
  };

  var vehicleList = task.vehicles || [];

  var styles = {
    page: { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSize: 14 },
    breadcrumb: { marginBottom: 16, color: '#666' },
    breadcrumbSep: { margin: '0 8px', color: '#999' },
    card: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
    cardHeader: { padding: '16px 20px', borderBottom: '1px solid #f0f0f0' },
    cardTitle: { fontSize: 16, fontWeight: 600, color: '#333' },
    cardBody: { padding: '20px 24px' },
    formRow: { display: 'flex', flexWrap: 'wrap', marginBottom: 16 },
    formCol: { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 },
    label: { display: 'block', marginBottom: 6, color: '#333' },
    inputDisabled: { width: '100%', padding: '6px 10px', border: '1px solid #d9d9d9', borderRadius: 4, backgroundColor: '#f5f5f5', color: '#666', fontSize: 13 },
    footer: { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, justifyContent: 'flex-start', zIndex: 99 },
    tableWrap: { marginTop: 16, overflowX: 'auto' },
    table: { width: '100%', borderCollapse: 'collapse', fontSize: 13 },
    th: { padding: '10px 8px', textAlign: 'left', borderBottom: '1px solid #e8e8e8', backgroundColor: '#fafafa', fontWeight: 600 },
    td: { padding: '8px', borderBottom: '1px solid #f0f0f0', verticalAlign: 'middle' }
  };

  var FormItemReadOnly = function(props) {
    return React.createElement('div', { style: styles.formCol },
      React.createElement('label', { style: styles.label }, props.label),
      React.createElement(Input, { value: props.value != null ? props.value : '', disabled: true, style: styles.inputDisabled })
    );
  };

  var formRow1 = React.createElement('div', { style: styles.formRow },
    React.createElement(FormItemReadOnly, { label: '选择项目名称', value: task.projectName }),
    React.createElement(FormItemReadOnly, { label: '合同编码', value: task.contractCode }),
    React.createElement(FormItemReadOnly, { label: '客户名称', value: task.customerName }),
    React.createElement(FormItemReadOnly, { label: '交车区域', value: task.deliveryRegion }),
    React.createElement(FormItemReadOnly, { label: '交车地点', value: task.deliveryLocation })
  );

  var formRow2 = React.createElement('div', { style: styles.formRow },
    React.createElement(FormItemReadOnly, { label: '预计交车日期', value: task.planDeliveryDisplay }),
    React.createElement(FormItemReadOnly, { label: '开始计费日期', value: task.billingStartDate })
  );

  var tableHeader = React.createElement('thead', null,
    React.createElement('tr', null,
      React.createElement('th', { style: styles.th }, '品牌'),
      React.createElement('th', { style: styles.th }, '型号'),
      React.createElement('th', { style: styles.th }, '车牌号'),
      React.createElement('th', { style: styles.th }, '车辆识别代码'),
      React.createElement('th', { style: styles.th }, '车辆月租金'),
      React.createElement('th', { style: styles.th }, '服务费'),
      React.createElement('th', { style: styles.th }, '保证金'),
      React.createElement('th', { style: styles.th }, '备注')
    )
  );

  var tableBody = React.createElement('tbody', null,
    vehicleList.length === 0
      ? React.createElement('tr', null, React.createElement('td', { colSpan: 8, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '暂无车辆'))
      : vehicleList.map(function(row, i) {
          return React.createElement('tr', { key: i },
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.brand, disabled: true, style: styles.inputDisabled })),
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.model, disabled: true, style: styles.inputDisabled })),
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.plateNo || '-', disabled: true, style: styles.inputDisabled })),
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.vin, disabled: true, style: styles.inputDisabled })),
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.monthRent + '元', disabled: true, style: styles.inputDisabled })),
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.serviceFee + '元', disabled: true, style: styles.inputDisabled })),
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.deposit + '元', disabled: true, style: styles.inputDisabled })),
            React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.remark || '-', disabled: true, style: styles.inputDisabled }))
          );
        })
  );

  var tableEl = React.createElement('div', { style: styles.tableWrap },
    React.createElement('table', { style: styles.table }, tableHeader, tableBody)
  );

  var handleBack = function() {
    if (window.history && window.history.back) window.history.back();
    else antd.message.info('返回');
  };

  return React.createElement('div', { style: styles.page },
    React.createElement('div', { style: { marginBottom: 16 } },
      React.createElement('div', { style: styles.breadcrumb },
        React.createElement('span', null, '业务管理'),
        React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
        React.createElement('span', null, '交车任务'),
        React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
        React.createElement('span', { style: { color: '#1890ff' } }, '查看交车任务'))),
    React.createElement('div', { style: styles.card },
      React.createElement('div', { style: styles.cardHeader }, React.createElement('span', { style: styles.cardTitle }, '交车任务')),
      React.createElement('div', { style: styles.cardBody },
        formRow1,
        formRow2,
        tableEl)),
    React.createElement('div', { style: { height: 60 } }),
    React.createElement('div', { style: styles.footer },
      React.createElement(Button, { onClick: handleBack }, '返回'))
  );
};