// 【重要】必须使用 const Component 作为组件变量名
// 财务管理 - 提车应收款 - 开票信息（2026年3月5日版本）

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

	var antd = window.antd;
	var Breadcrumb = antd.Breadcrumb;
	var Card = antd.Card;
	var Input = antd.Input;
	var Button = antd.Button;
	var Popover = antd.Popover;
	var Tooltip = antd.Tooltip;
	var Modal = antd.Modal;
	var message = antd.message;
	var Steps = antd.Steps;
	var DatePicker = antd.DatePicker;

	var dayjs = window.dayjs || null;
	function nowStr() {
		return dayjs && dayjs().format ? dayjs().format('YYYY-MM-DD HH:mm') : (new Date().getFullYear() + '-' + String(new Date().getMonth() + 1).padStart(2, '0') + '-' + String(new Date().getDate()).padStart(2, '0') + ' ' + String(new Date().getHours()).padStart(2, '0') + ':' + String(new Date().getMinutes()).padStart(2, '0'));
	}

	var projectCardExpanded = useState(true);
	var receivableCardExpanded = useState(true);
	var invoiceCardExpanded = useState(true);
	var approveCardExpanded = useState(true);
	var submitConfirmVisible = useState(false);
	var cancelConfirmVisible = useState(false);
	var requirementModalVisible = useState(false);
	var proofPreviewVisible = useState(false);
	var proofPreviewFile = useState(null);
	var invoicePreviewVisible = useState(false);
	var invoicePreviewFile = useState(null);

	// 开票记录列表：历史记录 submitted=true 不可删，新增行 submitted=false 可删
	var invoiceListState = useState([
		{ id: 'hist1', arrivalTime: '2026-03-01 10:00', arrivalAmount: '50000.00', invoiceTime: '2026-03-02 14:30', invoiceFiles: [{ name: '发票1.pdf' }], remark: '首笔到账', invoicePerson: '李财务', submitted: true },
		{ id: 'new1', arrivalTime: '', arrivalAmount: '', invoiceTime: nowStr(), invoiceFiles: [], remark: '', invoicePerson: '-', submitted: false }
	]);
	var invoiceList = invoiceListState[0];
	var setInvoiceList = invoiceListState[1];
	var nextIdRef = useRef(2);

	var projectInfo = useMemo(function () {
		return {
			contractCode: 'HT-ZL-2025-001',
			contractType: '正式合同',
			projectName: '嘉兴氢能示范项目',
			customerName: '嘉兴某某物流有限公司',
			paymentMethod: '预付',
			paymentCycle: '6个月',
			contractStart: '2025-01-15',
			contractEnd: '2026-01-14',
			businessDept: '业务1部',
			businessPerson: '张经理'
		};
	}, []);

	// 车辆应收款明细：全选默认为取消勾选；已完成提车应收款的不可勾选
	var vehicleRows = useState([
		{ key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '浙A12345', receivableRent: 30000, actualRent: '30000.00', rentRemark: '', receivableDeposit: 10000, serviceItems: [{ name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' }, { name: '保险上浮', receivable: 500, actual: '500.00', discount: '0.00', remark: '' }], receivableService: 700, actualService: '700.00', discountAmount: '0.00', discountRemark: '', discountProof: [], selected: false, receivableCompleted: true },
		{ key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '浙A23456', receivableRent: 27000, actualRent: '27000.00', rentRemark: '', receivableDeposit: 8000, serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '' }], receivableService: 300, actualService: '300.00', discountAmount: '0.00', discountRemark: '', discountProof: [], selected: false, receivableCompleted: true },
		{ key: 'v3', index: 3, brand: '重汽', model: 'ZZ1187', plateNo: '浙A34567', receivableRent: 31200, actualRent: '31200.00', rentRemark: '', receivableDeposit: 10000, serviceItems: [{ name: '代处理费用', receivable: 180, actual: '180.00', discount: '0.00', remark: '' }, { name: '上牌服务', receivable: 400, actual: '400.00', discount: '0.00', remark: '' }], receivableService: 580, actualService: '580.00', discountAmount: '0.00', discountRemark: '', discountProof: [{ name: '减免说明.pdf' }], selected: true, receivableCompleted: false },
		{ key: 'v4', index: 4, brand: '陕汽', model: 'SX1313', plateNo: '', receivableRent: 28800, actualRent: '28800.00', rentRemark: '', receivableDeposit: 9000, serviceItems: [{ name: '保险上浮', receivable: 350, actual: '350.00', discount: '0.00', remark: '' }], receivableService: 350, actualService: '350.00', discountAmount: '0.00', discountRemark: '', discountProof: [], selected: true, receivableCompleted: false },
		{ key: 'v5', index: 5, brand: '解放', model: 'J6P', plateNo: '浙A45678', receivableRent: 33000, actualRent: '33000.00', rentRemark: '', receivableDeposit: 11000, serviceItems: [{ name: '代处理费用', receivable: 220, actual: '220.00', discount: '0.00', remark: '' }, { name: '保养费用', receivable: 280, actual: '280.00', discount: '0.00', remark: '' }], receivableService: 500, actualService: '500.00', discountAmount: '0.00', discountRemark: '', discountProof: [], selected: true, receivableCompleted: false }
	]);
	var vehicles = vehicleRows[0];
	var setVehicles = vehicleRows[1];

	var hasHydrogenPrepay = true;
	// 氢费预付款（仅一条，提交审核时的数据，只读展示）
	var hydrogen = useMemo(function () {
		return { receivable: '3580.00', actual: '3580.00', discount: '0.00', discountRemark: '氢费预付款减免说明，与客户签订补充协议' };
	}, []);
	var invoiceMethod = '先开票后付款';
	var invoiceRemark = '开票项目：租赁费，税率 13%。请开具增值税专用发票。';

	var updateVehicle = useCallback(function (key, field, value) {
		setVehicles(function (prev) {
			return prev.map(function (r) {
				if (r.key !== key) return r;
				var next = Object.assign({}, r);
				next[field] = value;
				if (field === 'serviceItems') {
					var total = 0;
					(value || []).forEach(function (s) { total += parseFloat(s.actual) || 0; });
					next.actualService = total.toFixed(2);
				}
				return next;
			});
		});
	}, []);

	var updateServiceItem = useCallback(function (vehicleKey, itemIndex, field, value) {
		setVehicles(function (prev) {
			return prev.map(function (r) {
				if (r.key !== vehicleKey) return r;
				var items = (r.serviceItems || []).slice();
				if (!items[itemIndex]) return r;
				items[itemIndex] = Object.assign({}, items[itemIndex], { [field]: value });
				var total = 0;
				items.forEach(function (s) { total += parseFloat(s.actual) || 0; });
				return Object.assign({}, r, { serviceItems: items, actualService: total.toFixed(2) });
			});
		});
	}, []);

	var totals = useMemo(function () {
		var selected = vehicles.filter(function (v) { return v.selected; });
		var receivableRent = 0, actualRent = 0, receivableDeposit = 0, receivableService = 0, actualService = 0, discountTotal = 0;
		selected.forEach(function (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;
		});
		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)
		};
	}, [vehicles]);

	var selectedVehicles = vehicles.filter(function (v) { return v.selected; });

	var receivableTotal = (parseFloat(totals.receivableRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.receivableService)).toFixed(2);
	var actualTotal = (parseFloat(totals.actualRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.actualService) - parseFloat(totals.discountTotal)).toFixed(2);

	var receivablePopoverContent = useMemo(function () {
		return React.createElement('div', { style: { padding: 8, minWidth: 220 } },
			React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } },
				React.createElement('thead', null,
					React.createElement('tr', null,
						React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '项目'),
						React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '金额')
					)
				),
				React.createElement('tbody', null,
					React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆月租金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableRent + ' 元')),
					React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆保证金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableDeposit + ' 元')),
					React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收服务费'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableService + ' 元'))
				)
			)
		);
	}, [totals]);

	var actualPopoverContent = useMemo(function () {
		return React.createElement('div', { style: { padding: 8, minWidth: 220 } },
			React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } },
				React.createElement('thead', null,
					React.createElement('tr', null,
						React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '项目'),
						React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '金额')
					)
				),
				React.createElement('tbody', null,
					React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计实收车辆月租金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.actualRent + ' 元')),
					React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆保证金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableDeposit + ' 元')),
					React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计实收服务费'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.actualService + ' 元')),
					React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计减免金额'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.discountTotal + ' 元'))
				)
			)
		);
	}, [totals]);

	var invoiceInfo = useMemo(function () {
		return {
			customerName: '嘉兴某某物流有限公司',
			taxId: '91330400MA2XXXXX1',
			address: '浙江省嘉兴市南湖区科技大道1号',
			phone: '0571-88888888',
			account: '6222021234567890123',
			bank: '中国工商银行嘉兴分行',
			mailingAddress: '浙江省嘉兴市南湖区科技大道1号'
		};
	}, []);

	var approvalSteps = useMemo(function () {
		return [
			{ title: '业务部门', status: 'finish', person: '张经理', time: '2026-03-01 10:00' },
			{ title: '财务部门', status: 'finish', person: '李四', time: '2026-03-03 09:00' },
			{ title: '财务负责人', status: 'finish', person: '王五', time: '2026-03-03 11:00' }
		];
	}, []);

	var unpaidAmount = useMemo(function () {
		var sumArrival = invoiceList.reduce(function (s, r) { return s + (parseFloat(r.arrivalAmount) || 0); }, 0);
		return (Math.max(0, parseFloat(actualTotal) - sumArrival)).toFixed(2);
	}, [invoiceList, actualTotal]);

	function updateInvoiceRow(id, field, value) {
		setInvoiceList(function (prev) {
			return prev.map(function (r) {
				if (r.id !== id) return r;
				var next = Object.assign({}, r);
				next[field] = value;
				if (field === 'invoiceFiles') next.invoiceFiles = value || [];
				return next;
			});
		});
	}

	function addInvoiceRow() {
		nextIdRef.current += 1;
		setInvoiceList(function (prev) {
			return prev.concat([{ id: 'new' + nextIdRef.current, arrivalTime: '', arrivalAmount: '', invoiceTime: nowStr(), invoiceFiles: [], remark: '', invoicePerson: '-', submitted: false }]);
		});
	}

	function removeInvoiceRow(id) {
		var row = invoiceList.find(function (r) { return r.id === id; });
		if (row && row.submitted) return;
		setInvoiceList(function (prev) { return prev.filter(function (r) { return r.id !== id; }); });
	}

	var handleSubmit = useCallback(function () {
		submitConfirmVisible[1](true);
	}, []);

	var handleSubmitConfirm = useCallback(function () {
		message.success('提交成功');
		submitConfirmVisible[1](false);
		if (window.__receivableBack) window.__receivableBack(); else message.info('跳转至提车应收款列表页（原型）');
	}, []);

	var handleCancel = useCallback(function () {
		cancelConfirmVisible[1](true);
	}, []);

	var handleCancelConfirm = useCallback(function () {
		cancelConfirmVisible[1](false);
		if (window.__receivableBack) window.__receivableBack(); else message.info('返回提车应收款列表页（原型）');
	}, []);

	var requirementContent = '提车应收款-开票信息（2026年3月5日版本）\n一个「数字化资产ONEOS运管平台」中的「财务管理」「提车应收款」「开票信息」模块\n#面包屑：财务管理-提车应收款-开票信息；\n\n页面分为3个卡片，业务流程请参考流程图；\n1.项目信息：\n#显示项目详细信息，包括：\n1.1.合同编码：显示该租赁合同对应合同编码；\n1.2.合同类型：显示该租赁合同对应合同编码；\n1.3.项目名称：显示该租赁合同对应项目名称；\n1.4.客户名称：显示该租赁合同对应客户名称；\n1.5.付款方式：显示该租赁合同对应付款方式，分为：预付、后付两种，根据实际合同反写；\n1.6.付款周期：显示该租赁合同对应付款周期，格式为：x个月；\n1.7.合同生效时间：显示该租赁合同对应合同生效时间；\n1.8.合同结束时间：显示该租赁合同对应合同结束时间；\n1.9.业务部门：显示该租赁合同对应业务部门名称；\n1.10.业务负责人：显示该租赁合同对应业务负责人；\n\n2.提车应收款信息：\n#上方显示应收款总额、实收款总额；\n2.1.应收款总额：显示提交审核时的应收款总额，格式为：xx.xx元，点击金额弹出气泡卡片，卡片中显示列表，字段为：\n    2.1.1.项目：包括总计应收车辆月租金、总计应收车辆保证金、总计应收服务费三项；\n    2.1.2.金额：显示该项目对应应收金额；\n2.2.实收款总额：显示提交审核时的实收款总额，格式为：xx.xx元，点击金额弹出气泡卡片，卡片中显示列表，字段为：\n    2.2.1.项目：包括总计实收车辆月租金、总计应收车辆保证金、总计实收服务费、总计减免金额四项；\n    2.2.2.金额：显示该项目对应实收金额；\n#中间为车辆应收款明细，以列表展示提车应收款已选中所有车辆明细，包括以下字段：\n2.1.序号：根据租赁合同中车辆对应序号顺序展示；\n2.2.品牌：显示租赁合同中车辆对应品牌；\n2.3.型号：显示租赁合同中车辆对应型号；\n2.4.车牌号：显示租赁合同中车辆对应车牌号，如果车牌号为空则显示为-（后续如果交车成功，则车牌号会反显在该处）；\n2.5.应收车辆月租金：根据租赁合同付款周期自动计算，例如：付款周期为6个月，则这里显示金额为：车辆月租金*6；\n2.6.实收车辆月租金：显示提交审核时的实收车辆月租金，格式为：xx.xx元；\n2.7.车辆租金备注：显示提交审核时的车辆租金备注，超长则显示...，悬浮时显示全部详细内容；\n2.8.减免金额：显示提交审核时的减免金额，格式为：xx.xx元；\n2.9.减免金额备注：显示提交审核时的减免金额备注，超长则显示...，悬浮时显示全部详细内容；\n2.10.减免证明：显示所有附件，可点击预览；\n2.11.应收车辆保证金：显示租赁合同中当前车辆保证金金额，格式为：xx.xx元；\n2.12.服务费项目：点击管理，弹出气泡卡片，气泡卡片标题为服务费项目，下方为列表，显示服务项目、应收费用、实收费用、备注；\n     2.12.1.服务项目：显示租赁合同中所有服务项目名称；\n     2.12.2.应收费用：显示租赁合同中所有服务项目对应费用；\n     2.12.3.实收费用：显示提交审核时的实收费用金额，格式为：xx.xx元；\n     2.12.4.减免费用：显示提交审核时的减免费用金额，格式为：xx.xx元；\n     2.12.4.备注：显示提交审核时的服务费减免备注，超长则显示...，悬浮时显示全部详细内容；\n2.13.应收服务费：显示当前车辆所有服务费应收费用总和，格式为：xx.xx元；\n2.14.实收服务费：显示当前车辆所有服务费实收费用总和，格式为：xx.xx元；\n2.15.列表下方对应字段下方显示总计数据，包括：总计应收车辆月租金、总计实收车辆月租金、总计应收车辆保证金、总计应收服务费、总计实收服务费、总计减免金额；\n列表不支持分页功能；\n#下方为氢费预付款情况，以列表展示租赁合同中所有氢费预付款明细，包括以下字段，如租赁合同氢费非预付款模式，则不显示该部分内容：\n2.19.氢费预付款应收金额：显示租赁合同中氢费预付款金额，格式为：xx.xx元，支持2位小数；\n2.20.氢费预付款实收金额：显示提交审核时的氢费预付款实收金额，格式为：xx.xx元；\n2.21.减免金额：显示提交审核时的减免金额，格式为：xx.xx元；\n2.22.减免金额备注：显示提交审核时的氢费预付款减免备注，超长则显示...，悬浮时显示全部详细内容；\n#最底部为开票方式、开票备注；\n2.23.开票方式：显示提交审核时的开票方式；\n2.24.开票备注：显示提交审核时的开票备注；\n\n3.开票信息：\n#上方显示该租赁合同客户信息（如果该合同转为三方合同，则未开票部分开票信息修改为丙方开票信息），包括：\n3.1.客户名称：显示租赁合同客户名称；\n3.2.纳税人识别号：显示该客户对应纳税人识别号；\n3.3.地址：显示该客户对应地址；\n3.4.电话：显示该客户对应电话；\n3.5.账户：显示该客户对应账户；\n3.6.开户行：显示该客户对应开户行；\n3.7.邮寄地址：显示该客户对应邮寄地址；\n#下方显示列表，包括以下字段，列表上方显示未付金额，格式为xx.xx元（计算方式为：实收款总额-（所有到账金额记录总和）），列表显示过往提交的历史记录，同时默认一行可编辑，支持继续新增一行和删除行操作（过往提交的历史记录无法删除）：\n3.8.到账时间：时间选择器，格式为：YYYY-MM-DD HH:MM，新增未提交的记录支持删除，但之前已完成提交的记录无法删除；\n3.9.到账金额：输入框，支持2位小数，格式为：xx.xx元，新增未提交的记录支持删除，但之前已完成提交的记录无法删除；；\n3.10.开票时间：时间选择器，格式为：YYYY-MM-DD HH:MM，默认为打开页面的时间，新增未提交的记录支持删除，但之前已完成提交的记录无法删除；\n3.11.发票附件：附件上传按钮，支持多附件上传，上传后显示附件名称，新增未提交的记录支持删除，但之前已完成提交的记录无法删除；\n3.12.备注：输入框，新增未提交的记录支持删除，但之前已完成提交的记录无法删除；；\n3.13.开票人：显示上传发票的操作用户姓名；\n3.14.支持新增一行、删除一行（新增未提交的记录可以删除，已完成提交的历史记录不能删除）；\n\n4.审批情况：\n#上方为纵向步骤条，显示所有审批步骤\n4.1.步骤中显示部门名称，部门名称后方显示审批状态、审批人、审批时间，所有审批记录已完成；\n\n5.底部为提交，取消；\n5.1.提交：点击提交，进行二次确认，文案为：请仔细核对提车首付款到账和开票信息，提交后无法修改；\n5.2.取消：点击取消，进行二次确认，文案为：取消将会丢失所有已填写数据，是否确认，点击确认则跳转至提车应收款列表页；';

	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
	var cardStyle = { marginBottom: 16 };
	var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
	var requiredStar = { color: '#ff4d4f', marginRight: 2 };
	var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
	var formItemStyle = { marginBottom: 12 };
	var highlightStyle = { color: '#1890ff', fontWeight: 600, cursor: 'pointer' };
	var valueStyle = { color: 'rgba(0,0,0,0.85)', fontSize: 14, lineHeight: '22px', minHeight: 22 };
	var thBase = { padding: '10px 12px', border: '1px solid #f0f0f0', whiteSpace: 'nowrap' };

	return React.createElement('div', { style: layoutStyle },
		React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
			React.createElement(Breadcrumb, {
				items: [
					{ title: '财务管理' },
					{ title: '提车应收款' },
					{ title: '开票信息' }
				]
			}),
			React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](true); } }, '查看需求说明')
		),
		React.createElement(Card, {
			title: '项目信息',
			style: cardStyle,
			extra: React.createElement(Button, { type: 'link', size: 'small', onClick: function () { projectCardExpanded[1](!projectCardExpanded[0]); } }, projectCardExpanded[0] ? '收起' : '展开')
		},
			projectCardExpanded[0] ? React.createElement('div', { style: formRowStyle },
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同编码'), React.createElement('div', { style: valueStyle }, projectInfo.contractCode || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同类型'), React.createElement('div', { style: valueStyle }, projectInfo.contractType || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '项目名称'), React.createElement('div', { style: valueStyle }, projectInfo.projectName || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '客户名称'), React.createElement('div', { style: valueStyle }, projectInfo.customerName || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '付款方式'), React.createElement('div', { style: valueStyle }, projectInfo.paymentMethod || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '付款周期'), React.createElement('div', { style: valueStyle }, projectInfo.paymentCycle || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同生效时间'), React.createElement('div', { style: valueStyle }, projectInfo.contractStart || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '合同结束时间'), React.createElement('div', { style: valueStyle }, projectInfo.contractEnd || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '业务部门'), React.createElement('div', { style: valueStyle }, projectInfo.businessDept || '-')),
				React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '业务负责人'), React.createElement('div', { style: valueStyle }, projectInfo.businessPerson || '-'))
			) : null
		),
		React.createElement(Card, {
			title: '提车应收款信息',
			style: cardStyle,
			extra: React.createElement(Button, { type: 'link', size: 'small', onClick: function () { receivableCardExpanded[1](!receivableCardExpanded[0]); } }, receivableCardExpanded[0] ? '收起' : '展开')
		},
			receivableCardExpanded[0] ? React.createElement(React.Fragment, null,
				React.createElement('div', { style: { marginBottom: 16, display: 'flex', gap: 24, alignItems: 'center' } },
					React.createElement(Popover, { content: receivablePopoverContent, title: '应收款明细', trigger: 'click' },
						React.createElement('span', { style: { cursor: 'pointer' } }, '应收款总额：', React.createElement('span', { style: highlightStyle }, receivableTotal, ' 元'))
					),
					React.createElement(Popover, { content: actualPopoverContent, title: '实收款明细', trigger: 'click' },
						React.createElement('span', { style: { cursor: 'pointer' } }, '实收款总额：', React.createElement('span', { style: highlightStyle }, actualTotal, ' 元'))
					)
				),
				React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16, overflowY: 'visible' } },
					React.createElement('table', { style: { width: '100%', minWidth: 1600, borderCollapse: 'collapse', fontSize: 13, tableLayout: 'fixed' } },
						React.createElement('thead', null,
							React.createElement('tr', { style: { backgroundColor: '#fafafa' } },
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 50 }) }, '序号'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 80 }) }, '品牌'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 90 }) }, '型号'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 100 }) }, '车牌号'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 120 }) }, '应收车辆月租金'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 130 }) }, React.createElement('span', null, React.createElement('span', { style: requiredStar }, '*'), '实收车辆月租金')),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 130 }) }, '车辆租金备注'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 130 }) }, '减免金额'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 130 }) }, '减免金额备注'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 130 }) }, '减免证明'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 110 }) }, '应收车辆保证金'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'left', width: 90 }) }, '服务费项目'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 90 }) }, '应收服务费'),
								React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 130 }) }, '实收服务费')
							)
						),
						React.createElement('tbody', null,
							selectedVehicles.map(function (row) {
								var disabled = row.receivableCompleted;
								var servicePopover = React.createElement('div', { style: { padding: 8, minWidth: 360 } },
									React.createElement('div', { style: { fontWeight: 600, marginBottom: 8 } }, '服务费项目'),
									React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 12 } },
										React.createElement('thead', null,
											React.createElement('tr', null,
												React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '服务项目'),
												React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '应收费用'),
												React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '实收费用'),
												React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '减免费用'),
												React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '备注')
											)
										),
										React.createElement('tbody', null,
											(row.serviceItems || []).map(function (s, si) {
												return React.createElement('tr', { key: si },
													React.createElement('td', { style: { padding: '6px 8px' } }, s.name),
													React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, (s.receivable != null ? s.receivable : '') + ' 元'),
													React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, (s.actual || '') + ' 元'),
													React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, (s.discount || '0.00') + ' 元'),
													React.createElement('td', { style: { padding: '6px 8px' } }, s.remark || '-')
												);
											})
										)
									)
								);
								return React.createElement('tr', { key: row.key },
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.index),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.brand),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.model),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.plateNo || '-'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableRent || 0) + ' 元'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', width: 130, textAlign: 'right' } }, (row.actualRent || '0.00') + ' 元'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', width: 130 } }, row.rentRemark || '-'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', width: 130, textAlign: 'right' } }, (row.discountAmount || '0.00') + ' 元'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', width: 130 } }, row.discountRemark || '-'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', width: 130 } },
										(row.discountProof && row.discountProof.length)
											? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 2, fontSize: 12 } },
												row.discountProof.map(function (p, pidx) {
													return React.createElement(Button, { key: pidx, type: 'link', size: 'small', style: { padding: 0, height: 'auto', fontSize: 12, textAlign: 'left' }, onClick: function () { proofPreviewFile[1](p); proofPreviewVisible[1](true); } }, p.name || '附件');
												})
											)
											: '-'
									),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableDeposit || 0) + ' 元'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
										React.createElement(Popover, { content: servicePopover, title: null, trigger: 'click' },
											React.createElement(Button, { type: 'link', size: 'small' }, '管理')
										)
									),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableService || 0) + ' 元'),
									React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right', width: 130 } }, (row.actualService || '0.00') + ' 元')
								);
							})
						),
						React.createElement('tfoot', null,
							React.createElement('tr', { style: { backgroundColor: '#fafafa', fontWeight: 500 } },
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', fontWeight: 600 } }, '总计'),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableRent + ' 元'),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.actualRent + ' 元'),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.discountTotal + ' 元'),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableDeposit + ' 元'),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableService + ' 元'),
								React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.actualService + ' 元')
							)
						)
					)
				),
				hasHydrogenPrepay ? React.createElement('div', { style: { marginBottom: 16 } },
					React.createElement('div', { style: { fontSize: 14, fontWeight: 500, marginBottom: 8 } }, '氢费预付款情况'),
					React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16, maxWidth: 800 } },
						React.createElement('div', { style: formItemStyle },
							React.createElement('div', { style: labelStyle }, '氢费预付款应收金额'),
							React.createElement('div', { style: valueStyle }, hydrogen.receivable + ' 元')
						),
						React.createElement('div', { style: formItemStyle },
							React.createElement('div', { style: labelStyle }, '氢费预付款实收金额'),
							React.createElement('div', { style: valueStyle }, hydrogen.actual + ' 元')
						),
						React.createElement('div', { style: formItemStyle },
							React.createElement('div', { style: labelStyle }, '减免金额'),
							React.createElement('div', { style: valueStyle }, hydrogen.discount + ' 元')
						),
						React.createElement('div', { style: formItemStyle },
							React.createElement('div', { style: labelStyle }, '减免金额备注'),
							React.createElement('div', { style: valueStyle }, hydrogen.discountRemark || '-')
						)
					)
				) : null,
				React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', marginTop: 16 } },
					React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '开票方式'), React.createElement('div', { style: valueStyle }, invoiceMethod)),
					React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) }, React.createElement('div', { style: labelStyle }, '开票备注'), React.createElement('div', { style: valueStyle }, invoiceRemark || '-'))
				)
			) : null
		),
		React.createElement(Card, {
			title: '开票信息',
			style: cardStyle,
			extra: React.createElement(Button, { type: 'link', size: 'small', onClick: function () { invoiceCardExpanded[1](!invoiceCardExpanded[0]); } }, invoiceCardExpanded[0] ? '收起' : '展开')
		},
			invoiceCardExpanded[0] ? React.createElement(React.Fragment, null,
				React.createElement('div', { style: { fontSize: 14, fontWeight: 500, marginBottom: 12 } }, '客户信息'),
				React.createElement('div', { style: formRowStyle },
					React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '客户名称'), React.createElement('div', { style: valueStyle }, invoiceInfo.customerName || '-')),
					React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '纳税人识别号'), React.createElement('div', { style: valueStyle }, invoiceInfo.taxId || '-')),
					React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '地址'), React.createElement('div', { style: valueStyle }, invoiceInfo.address || '-')),
					React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '电话'), React.createElement('div', { style: valueStyle }, invoiceInfo.phone || '-')),
					React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '账户'), React.createElement('div', { style: valueStyle }, invoiceInfo.account || '-')),
					React.createElement('div', { style: formItemStyle }, React.createElement('div', { style: labelStyle }, '开户行'), React.createElement('div', { style: valueStyle }, invoiceInfo.bank || '-')),
					React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) }, React.createElement('div', { style: labelStyle }, '邮寄地址'), React.createElement('div', { style: valueStyle }, invoiceInfo.mailingAddress || '-'))
				),
				React.createElement('div', { style: { fontSize: 14, fontWeight: 500, marginBottom: 4, marginTop: 16 } }, '到账与开票记录'),
				React.createElement('div', { style: { marginBottom: 8, fontSize: 14 } }, '未付金额：', React.createElement('span', { style: highlightStyle }, unpaidAmount, ' 元')),
				React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } },
					React.createElement('thead', null,
						React.createElement('tr', { style: { backgroundColor: '#fafafa' } },
							React.createElement('th', { style: Object.assign({}, thBase, { width: 160 }) }, '到账时间'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 120 }) }, '到账金额'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 160 }) }, '开票时间'),
							React.createElement('th', { style: Object.assign({}, thBase) }, '发票附件'),
							React.createElement('th', { style: Object.assign({}, thBase) }, '备注'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 80 }) }, '开票人'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 70 }) }, '操作')
						)
					),
					React.createElement('tbody', null,
						invoiceList.map(function (r) {
							var dateValArrival = r.arrivalTime && dayjs ? dayjs(r.arrivalTime, 'YYYY-MM-DD HH:mm') : null;
							var dateValInvoice = r.invoiceTime && dayjs ? dayjs(r.invoiceTime, 'YYYY-MM-DD HH:mm') : null;
							if (dateValInvoice && dateValInvoice.isValid && !dateValInvoice.isValid()) dateValInvoice = null;
							if (dateValArrival && dateValArrival.isValid && !dateValArrival.isValid()) dateValArrival = null;
							return React.createElement('tr', { key: r.id },
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									r.submitted ? (r.arrivalTime || '-') : React.createElement(DatePicker, {
										showTime: true,
										style: { width: '100%' },
										format: 'YYYY-MM-DD HH:mm',
										placeholder: '请选择到账时间',
										value: dateValArrival,
										onChange: function (d, dateStr) { updateInvoiceRow(r.id, 'arrivalTime', dateStr || ''); }
									})
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									r.submitted ? (r.arrivalAmount ? r.arrivalAmount + ' 元' : '-') : React.createElement(Input, { size: 'small', value: r.arrivalAmount, suffix: '元', placeholder: '0.00', onChange: function (e) { updateInvoiceRow(r.id, 'arrivalAmount', e.target.value); } })
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									r.submitted ? (r.invoiceTime || '-') : React.createElement(DatePicker, {
										showTime: true,
										style: { width: '100%' },
										format: 'YYYY-MM-DD HH:mm',
										placeholder: '请选择开票时间',
										value: dateValInvoice,
										onChange: function (d, dateStr) { updateInvoiceRow(r.id, 'invoiceTime', dateStr || ''); }
									})
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									r.submitted
										? ((r.invoiceFiles && r.invoiceFiles.length) ? r.invoiceFiles.map(function (f, i) { return React.createElement(Button, { key: i, type: 'link', size: 'small', style: { padding: 0, height: 'auto', fontSize: 12, marginRight: 4 }, onClick: function () { invoicePreviewFile[1](f); invoicePreviewVisible[1](true); } }, f.name || '附件'); }) : '-')
										: React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
											(r.invoiceFiles || []).map(function (f, i) {
												return React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 } },
													React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', textAlign: 'left', height: 'auto' }, onClick: function () { invoicePreviewFile[1](f); invoicePreviewVisible[1](true); } }, f.name || '附件'),
													React.createElement(Button, { type: 'link', size: 'small', danger: true, style: { padding: 0 }, onClick: function () { var next = (r.invoiceFiles || []).slice(); next.splice(i, 1); updateInvoiceRow(r.id, 'invoiceFiles', next); } }, '删除')
												);
											}),
											React.createElement('span', null,
												React.createElement('input', { type: 'file', multiple: true, accept: '.jpg,.jpeg,.png,.pdf', style: { display: 'none' }, id: 'inv-file-' + r.id, onChange: function (e) {
													var files = e.target.files;
													if (!files || !files.length) return;
													var next = (r.invoiceFiles || []).slice();
													for (var i = 0; i < files.length; i++) next.push({ name: files[i].name });
													updateInvoiceRow(r.id, 'invoiceFiles', next);
													e.target.value = '';
												} }),
												React.createElement(Button, { type: 'default', size: 'small', onClick: function () { var el = document.getElementById('inv-file-' + r.id); if (el) el.click(); } }, '附件上传')
											)
										)
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									r.submitted ? (r.remark || '-') : React.createElement(Input, { size: 'small', value: r.remark, placeholder: '选填', onChange: function (e) { updateInvoiceRow(r.id, 'remark', e.target.value); } })
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, r.invoicePerson || '-'),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									r.submitted ? '-' : React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function () { removeInvoiceRow(r.id); } }, '删除')
								)
							);
						})
					)
				),
				React.createElement('div', { style: { marginTop: 8 } }, React.createElement(Button, { type: 'dashed', size: 'small', onClick: addInvoiceRow }, '新增一行'))
			) : null
		),
		React.createElement(Card, {
			title: '审批情况',
			style: cardStyle,
			extra: React.createElement(Button, { type: 'link', size: 'small', onClick: function () { approveCardExpanded[1](!approveCardExpanded[0]); } }, approveCardExpanded[0] ? '收起' : '展开')
		},
			approveCardExpanded[0] ? React.createElement(Steps, {
				direction: 'vertical',
				current: approvalSteps.length,
				items: approvalSteps.map(function (s) {
					var statusText = '审批通过';
					var desc = React.createElement('div', { style: { fontSize: 13, color: 'rgba(0,0,0,0.65)', marginTop: 4 } },
						React.createElement('div', null, '审批状态：', statusText),
						React.createElement('div', null, '审批人：', s.person || '-'),
						s.time ? React.createElement('div', null, '审批时间：', s.time) : null
					);
					return { title: s.title, description: desc, status: 'finish' };
				})
			}) : null
		),
		React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
			React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
			React.createElement(Button, { onClick: handleCancel }, '取消')
		),
		React.createElement(Modal, {
			title: '确认提交',
			open: submitConfirmVisible[0],
			onCancel: function () { submitConfirmVisible[1](false); },
			onOk: handleSubmitConfirm,
			okText: '确认',
			cancelText: '取消'
		}, React.createElement('div', null, '请仔细核对提车首付款到账和开票信息，提交后无法修改。')),
		React.createElement(Modal, {
			title: '确认取消',
			open: cancelConfirmVisible[0],
			onCancel: function () { cancelConfirmVisible[1](false); },
			onOk: handleCancelConfirm,
			okText: '确认',
			cancelText: '取消'
		}, React.createElement('div', null, '取消将会丢失所有已填写数据，是否确认？')),
		React.createElement(Modal, {
			title: '附件预览',
			open: proofPreviewVisible[0],
			onCancel: function () { proofPreviewVisible[1](false); proofPreviewFile[1](null); },
			footer: React.createElement(Button, { onClick: function () { proofPreviewVisible[1](false); proofPreviewFile[1](null); } }, '关闭'),
			width: 640
		}, React.createElement('div', { style: { padding: '16px 0' } },
			React.createElement('div', { style: { marginBottom: 12, fontSize: 14, color: 'rgba(0,0,0,0.65)' } }, '文件：', proofPreviewFile[0] ? (proofPreviewFile[0].name || '附件') : ''),
			React.createElement('div', { style: { minHeight: 360, background: '#fafafa', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(0,0,0,0.45)', fontSize: 14 } }, '此处可预览附件内容，支持 jpg、png、pdf 等格式')
		)),
		React.createElement(Modal, {
			title: '发票附件预览',
			open: invoicePreviewVisible[0],
			onCancel: function () { invoicePreviewVisible[1](false); invoicePreviewFile[1](null); },
			footer: React.createElement(Button, { onClick: function () { invoicePreviewVisible[1](false); invoicePreviewFile[1](null); } }, '关闭'),
			width: 640
		}, React.createElement('div', { style: { padding: '16px 0' } },
			React.createElement('div', { style: { marginBottom: 12, fontSize: 14, color: 'rgba(0,0,0,0.65)' } }, '文件：', invoicePreviewFile[0] ? (invoicePreviewFile[0].name || '附件') : ''),
			React.createElement('div', { style: { minHeight: 360, background: '#fafafa', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(0,0,0,0.45)', fontSize: 14 } }, '此处可预览附件内容，支持 jpg、png、pdf 等格式')
		)),
		React.createElement(Modal, {
			title: '需求说明',
			open: requirementModalVisible[0],
			onCancel: function () { requirementModalVisible[1](false); },
			width: 720,
			footer: React.createElement(Button, { onClick: function () { requirementModalVisible[1](false); } }, '关闭'),
			bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
		}, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
	);
};