// 【重要】必须使用 const Component 作为组件变量名
// 租赁账单-收费明细（2026年3月11日版本）

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

	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 Modal = antd.Modal;
	var message = antd.message;

	var servicePopoverRowIndex = useState(null);
	var submitConfirmVisible = useState(false);
	var cancelConfirmVisible = useState(false);
	var requirementModalVisible = useState(false);

	// 模拟：当前账单信息（由路由/接口传入，此处为第1期账单）
	var billInfo = useMemo(function () {
		return {
			contractCode: 'HT-ZL-2025-001',
			contractType: '正式合同',
			projectName: '嘉兴氢能示范项目',
			customerName: '嘉兴某某物流有限公司',
			deliveryTaskCode: 'JT-2025-001-A',
			billCode: 'HT-ZL-2025-0010001',
			period: 1,
			billStartDate: '2025-01-01',
			billEndDate: '2025-01-31'
		};
	}, []);

	var isFirstPeriod = billInfo.period === 1;

	// 车辆明细（该账单对应车辆及费用）
	var vehicleRows = useState([
		{ key: 'v1', index: 1, brand: '东风', model: 'DFH1180', plateNo: '浙A12345', receivableRent: 30000, actualRent: '29800.00', rentRemark: '首期六期一次性付清', discountAmount: '200.00', discountRemark: '首月优惠', discountProof: [{ name: '优惠审批单.pdf' }], receivableDeposit: 10000, serviceItems: [{ name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' }, { name: '保险上浮', receivable: 500, actual: '480.00', discount: '20.00', remark: '客户协商' }], receivableService: 700, actualService: '680.00' },
		{ key: 'v2', index: 2, brand: '福田', model: 'BJ1180', plateNo: '浙A23456', receivableRent: 27000, actualRent: '27000.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], receivableDeposit: 8000, serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '含首保' }], receivableService: 300, actualService: '300.00' },
		{ key: 'v3', index: 3, brand: '重汽', model: 'ZZ1187', plateNo: '浙A34567', receivableRent: 31200, actualRent: '31200.00', rentRemark: '', discountAmount: '0.00', discountRemark: '', discountProof: [], 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' }
	]);
	var vehicles = vehicleRows[0];
	var setVehicles = vehicleRows[1];

	var hydrogenRow = useState({ receivable: '3580.00', actual: '3500.00', discount: '80.00', discountRemark: '预付款批量减免' });
	var hydrogen = hydrogenRow[0];
	var setHydrogen = hydrogenRow[1];

	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 receivableRent = 0, actualRent = 0, receivableDeposit = 0, receivableService = 0, actualService = 0, discountTotal = 0, serviceDiscountTotal = 0;
		vehicles.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;
			(v.serviceItems || []).forEach(function (s) { serviceDiscountTotal += parseFloat(s.discount) || 0; });
		});
		var hydrogenReceivable = parseFloat(hydrogen.receivable) || 0;
		var hydrogenActual = parseFloat(hydrogen.actual) || 0;
		var hydrogenDiscount = parseFloat(hydrogen.discount) || 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),
			serviceDiscountTotal: serviceDiscountTotal.toFixed(2),
			hydrogenReceivable: hydrogenReceivable.toFixed(2),
			hydrogenActual: hydrogenActual.toFixed(2),
			hydrogenDiscount: hydrogenDiscount.toFixed(2)
		};
	}, [vehicles, hydrogen]);

	var receivableTotal = useMemo(function () {
		return (parseFloat(totals.receivableRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.receivableService) + (isFirstPeriod ? parseFloat(totals.hydrogenReceivable) : 0)).toFixed(2);
	}, [totals, isFirstPeriod]);

	var actualTotal = useMemo(function () {
		var base = parseFloat(totals.actualRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.actualService) - parseFloat(totals.discountTotal) - parseFloat(totals.serviceDiscountTotal);
		if (isFirstPeriod) base += parseFloat(totals.hydrogenActual) - parseFloat(totals.hydrogenDiscount);
		return base.toFixed(2);
	}, [totals, isFirstPeriod]);

	var invoiceTotal = useMemo(function () {
		// 开票金额：同“实收款总额”展示格式，但不包含应收车辆保证金
		var base = parseFloat(totals.actualRent) + parseFloat(totals.actualService) - parseFloat(totals.discountTotal) - parseFloat(totals.serviceDiscountTotal);
		if (isFirstPeriod) base += parseFloat(totals.hydrogenActual) - parseFloat(totals.hydrogenDiscount);
		return base.toFixed(2);
	}, [totals, isFirstPeriod]);

	var receivablePopoverContent = useMemo(function () {
		var rows = [
			['总计应收车辆月租金', totals.receivableRent + ' 元'],
			['总计应收车辆保证金', totals.receivableDeposit + ' 元'],
			['总计应收服务费', totals.receivableService + ' 元']
		];
		if (isFirstPeriod) rows.push(['氢费预付款应收金额', totals.hydrogenReceivable + ' 元']);
		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,
					rows.map(function (r, i) { return React.createElement('tr', { key: i }, React.createElement('td', { style: { padding: '6px 8px' } }, r[0]), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, r[1])); })
				)
			)
		);
	}, [totals, isFirstPeriod]);

	var actualPopoverContent = useMemo(function () {
		var rows = [
			['总计实收车辆月租金', totals.actualRent + ' 元'],
			['总计应收车辆保证金', totals.receivableDeposit + ' 元'],
			['总计实收服务费', totals.actualService + ' 元'],
			['总计减免金额', totals.discountTotal + ' 元'],
			['服务费各项减免费用总和', totals.serviceDiscountTotal + ' 元']
		];
		if (isFirstPeriod) {
			rows.push(['氢费预付款实收金额', totals.hydrogenActual + ' 元']);
			rows.push(['氢费预付款减免金额', totals.hydrogenDiscount + ' 元']);
		}
		return React.createElement('div', { style: { padding: 8, minWidth: 240 } },
			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,
					rows.map(function (r, i) { return React.createElement('tr', { key: i }, React.createElement('td', { style: { padding: '6px 8px' } }, r[0]), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, r[1])); })
				)
			)
		);
	}, [totals, isFirstPeriod]);

	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 formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
	var formItemStyle = { marginBottom: 12 };
	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' };
	var highlightStyle = { color: '#1890ff', fontWeight: 600, cursor: 'pointer' };
	var requiredStar = { color: '#ff4d4f', marginRight: 2 };

	var activeServiceIndex = servicePopoverRowIndex[0];
	var setServicePopoverRowIndex = servicePopoverRowIndex[1];

	function handleSubmit() {
		submitConfirmVisible[1](true);
	}
	function handleSubmitConfirm() {
		submitConfirmVisible[1](false);
		message.success('提交成功');
		if (window.__billChargeDetailBack) window.__billChargeDetailBack();
	}
	function handleSave() {
		message.success('保存成功');
		if (window.__billChargeDetailBack) window.__billChargeDetailBack();
	}
	function handleCancel() {
		cancelConfirmVisible[1](true);
	}
	function handleCancelConfirm() {
		cancelConfirmVisible[1](false);
		if (window.__billChargeDetailBack) window.__billChargeDetailBack();
		else message.info('返回租赁账单列表（原型）');
	}

	var requirementContent = '租赁账单-收费明细（2026年3月11日版本）\n一个「数字化资产ONEOS运管平台」中的「租赁账单」「收费明细」模块\n#面包屑：业务管理-租赁账单-收费明细；\n1.账单信息：\n#显示该账单对应合同及账单信息，显示以下字段：\n  1.1.合同编码：显示该账单对应合同编码；\n  1.2.合同类型：显示该账单对应合同类型，包括正式合同、试用合同；\n  1.3.项目名称：显示该账单对应合同中项目名称；\n  1.4.客户名称：显示该账单对应合同中客户名称；\n  1.5.交车任务编码：显示交车任务对应编码；\n  1.6.账单编码：显示该账单编码，账单编码规则为：[合同编码][账单编号]组成，主要用于后期与用友YS系统打通时获取财务收款及发票相关数据；\n          前缀为合同编码，后缀为账单编号，规则为：ZD+4位编号，为该合同下第x份账单，例如：ZD0001为该合同下第1份账单，依次类推；\n          例如：JXZL20260216YW101235AZD0001即为JXZL20260216YW101235A合同下第1份账单；；\n  1.7.账单期数：显示该账单期数；\n  1.8.账单开始日期：显示账单开始日期，根据租赁合同及交车任务开始计费日期按规则生成，格式为:YYYY-MM-DD；\n  1.9.账单结束日期：显示账单结束日期，根据租赁合同及交车任务开始计费日期按规则生成，格式为:YYYY-MM-DD；\n2.账单明细：\n#顶部显示应收款总额、实收款总额；\n  2.1.应收款总额：「应收车辆月租金总和」+「应收车辆保证金总和」+「应收服务费总和」+「氢费预付款应收金额」\n  2.2.实收款总额：「实收车辆月租金总和」+「应收车辆保证金总和」+「实收服务费总和」+「氢费预付款实收金额」-「减免费用总和」「服务费各项减免费用总和」\n  2.3.开票金额：「实收车辆月租金总和」+「实收服务费总和」-「减免费用总和」「服务费各项减免费用总和」\n\n#显示该账单对应车辆列表及相关费用信息，显示以下字段；\n  2.3.序号：与租赁合同及交车任务中该车辆序号一致；\n  2.4.品牌：与租赁合同及交车任务中该车辆品牌一致；\n  2.5.型号：与租赁合同及交车任务中该车辆型号一致；\n  2.6.车牌号：与租赁合同及交车任务中该车辆车牌号一致；\n  2.7.应收车辆月租金：与租赁合同中该车辆车辆月租金一致，格式为：xx.xx元；\n  2.8.实收车辆月租金：输入框，2位小数，后缀为元，默认为与应收车辆月租金一致；\n  2.9.车辆租金备注：输入框，支持自定义输入；\n  2.10.减免金额：输入框，2位小数，后缀为元，默认为0.00元；\n  2.11.减免金额备注：输入框，支持自定义输入；\n  2.12.减免证明：附件上传按钮，点击支持多文件上传，已上传文件一行显示一条，支持点击预览，格式支持各类图片、doc、docx、pdf等格式；\n  2.13.应收车辆保证金：首期与合同中车辆保证金一致，第二期开始为0.00，格式为：xx.xx元；\n  2.14.服务费项目：点击管理，弹出气泡卡片，气泡卡片标题为服务费项目，下方为列表，显示服务项目、应收费用、实收费用、备注；\n     2.14.1.服务项目：显示租赁合同中所有服务项目名称；\n     2.14.2.应收费用：显示租赁合同中所有服务项目对应费用，格式为：xx.xx元；\n     2.14.3.实收费用：必填项，输入框，默认反写应收费用，支持修改，由业务员自行输入实收费用金额，精确至2位小数，后缀为元，默认与应收费用一致；\n     2.14.4.减免费用：选填项，输入框，默认为：0.00，精确至2位小数，后缀为元；\n     2.14.4.备注：选填项，输入框，由业务员自行输入备注信息；\n  2.15.应收服务费：显示当前车辆所有服务费应收费用总和，格式为：xx.xx元；\n  2.16.实收服务费：显示当前车辆所有服务费实收费用总和，格式为：xx.xx元；\n#列表下方为氢费预付款情况，首期账单显示，第二期账单开始无此区域内容显示；\n  2.17.氢费预付款应收金额：显示合同中氢费预付款金额；\n  2.18.氢费预付款实收金额：输入框，2位小数，后缀为元，默认与氢费预付款应收金额一致；\n  2.19.减免金额：输入框，2位小数，后缀为元；\n  2.20.减免金额备注：输入框，支持自定义输入；\n\n3.下方为提交审核、保存、取消按钮\n  3.1.提交审核：点击提交审核按钮，进入审核流程；\n  3.2.保存：点击保存按钮，保存当前表单已填数据，不做校验；\n';

	return React.createElement('div', { style: layoutStyle },
		React.createElement('div', { style: { marginBottom: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
			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 },
			React.createElement('div', { style: formRowStyle },
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '合同编码'),
					React.createElement('div', { style: valueStyle }, billInfo.contractCode || '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '合同类型'),
					React.createElement('div', { style: valueStyle }, billInfo.contractType || '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '项目名称'),
					React.createElement('div', { style: valueStyle }, billInfo.projectName || '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '客户名称'),
					React.createElement('div', { style: valueStyle }, billInfo.customerName || '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '交车任务编码'),
					React.createElement('div', { style: valueStyle }, billInfo.deliveryTaskCode || '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '账单编码'),
					React.createElement('div', { style: valueStyle }, billInfo.billCode || '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '账单期数'),
					React.createElement('div', { style: valueStyle }, billInfo.period != null ? billInfo.period : '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '账单开始日期'),
					React.createElement('div', { style: valueStyle }, billInfo.billStartDate || '—')
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '账单结束日期'),
					React.createElement('div', { style: valueStyle }, billInfo.billEndDate || '—')
				)
			)
		),
		React.createElement(Card, { title: '账单明细', style: cardStyle },
			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('span', { style: { cursor: 'default' } }, '开票金额：', React.createElement('span', { style: highlightStyle }, invoiceTotal, ' 元'))
			),
			React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16 } },
				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, { width: 50 }) }, '序号'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 80 }) }, '品牌'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 90 }) }, '型号'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 100 }) }, '车牌号'),
							React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 120 }) }, '应收车辆月租金'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 130 }) }, '实收车辆月租金'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 120 }) }, '车辆租金备注'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 100 }) }, '减免金额'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 120 }) }, '减免金额备注'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 130 }) }, '减免证明'),
							React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 110 }) }, '应收车辆保证金'),
							React.createElement('th', { style: Object.assign({}, thBase, { width: 90 }) }, '服务费项目'),
							React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 90 }) }, '应收服务费'),
							React.createElement('th', { style: Object.assign({}, thBase, { textAlign: 'right', width: 90 }) }, '实收服务费')
						)
					),
					React.createElement('tbody', null,
						vehicles.map(function (row) {
							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('span', null, React.createElement('span', { style: requiredStar }, '*'), '实收费用')),
											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: { padding: '6px 8px' } },
													React.createElement(Input, { size: 'small', value: s.actual, suffix: '元', onChange: function (e) { updateServiceItem(row.key, si, 'actual', e.target.value); } })
												),
												React.createElement('td', { style: { padding: '6px 8px' } },
													React.createElement(Input, { size: 'small', value: s.discount, suffix: '元', onChange: function (e) { updateServiceItem(row.key, si, 'discount', e.target.value); } })
												),
												React.createElement('td', { style: { padding: '6px 8px' } },
													React.createElement(Input, { size: 'small', value: s.remark, placeholder: '备注', onChange: function (e) { updateServiceItem(row.key, si, 'remark', e.target.value); } })
												)
											);
										})
									)
								)
							);
							var proofList = row.discountProof || [];
							var onProofUpload = function (e) {
								var files = e.target.files;
								if (!files || !files.length) return;
								var next = proofList.slice();
								for (var i = 0; i < files.length; i++) { next.push({ name: files[i].name }); }
								updateVehicle(row.key, 'discountProof', next);
								e.target.value = '';
							};
							var removeProof = function (idx) {
								var next = (row.discountProof || []).slice();
								next.splice(idx, 1);
								updateVehicle(row.key, 'discountProof', next);
							};
							var depositDisplay = isFirstPeriod ? (row.receivableDeposit || 0) : '0.00';
							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 != null ? row.receivableRent : 0) + ' 元'),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									React.createElement(Input, { size: 'small', value: row.actualRent, suffix: '元', onChange: function (e) { updateVehicle(row.key, 'actualRent', e.target.value); } })
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									React.createElement(Input, { size: 'small', value: row.rentRemark, onChange: function (e) { updateVehicle(row.key, 'rentRemark', e.target.value); } })
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									React.createElement(Input, { size: 'small', value: row.discountAmount, suffix: '元', onChange: function (e) { updateVehicle(row.key, 'discountAmount', e.target.value); } })
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									React.createElement(Input, { size: 'small', value: row.discountRemark, onChange: function (e) { updateVehicle(row.key, 'discountRemark', e.target.value); } })
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4, fontSize: 12 } },
										proofList.map(function (p, pidx) {
											return React.createElement('div', { key: pidx, style: { display: 'flex', alignItems: 'center', gap: 4 } },
												React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0, height: 'auto' }, onClick: function () { message.info('预览：' + (p.name || '附件')); } }, p.name || '附件'),
												React.createElement(Button, { type: 'link', size: 'small', danger: true, style: { padding: 0, minWidth: 'auto' }, onClick: function () { removeProof(pidx); } }, '删除')
											);
										}),
										React.createElement('span', null,
											React.createElement('input', { type: 'file', multiple: true, accept: '.jpg,.jpeg,.png,.pdf,.doc,.docx', style: { display: 'none' }, id: 'proof-' + row.key, onChange: onProofUpload }),
											React.createElement(Button, { type: 'default', size: 'small', onClick: function () { var el = document.getElementById('proof-' + row.key); if (el) el.click(); } }, '附件上传')
										)
									)
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (depositDisplay !== undefined && depositDisplay !== null ? depositDisplay : '0.00') + ' 元'),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
									React.createElement(Popover, {
										content: servicePopover,
										title: null,
										trigger: 'click',
										open: activeServiceIndex === row.key,
										onOpenChange: function (open) { setServicePopoverRowIndex(open ? row.key : null); }
									},
										React.createElement(Button, { type: 'link', size: 'small' }, '管理')
									)
								),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableService != null ? row.receivableService : '0.00') + ' 元'),
								React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.actualService || '0.00') + ' 元')
							);
						})
					)
				)
			),
			isFirstPeriod ? React.createElement('div', { style: { marginTop: 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(Input, { value: hydrogen.receivable + ' 元', disabled: true })
					),
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '氢费预付款实收金额'),
						React.createElement(Input, { value: hydrogen.actual, suffix: '元', onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { actual: e.target.value }); }); } })
					),
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '减免金额'),
						React.createElement(Input, { value: hydrogen.discount, suffix: '元', onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { discount: e.target.value }); }); } })
					),
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '减免金额备注'),
						React.createElement(Input, { value: hydrogen.discountRemark, onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { discountRemark: e.target.value }); }); } })
					)
				)
			) : null
		),
		React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
			React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
			React.createElement(Button, { onClick: handleSave }, '保存'),
			React.createElement(Button, { onClick: handleCancel }, '取消')
		),
		React.createElement(Modal, {
			title: '确认',
			open: submitConfirmVisible[0],
			onCancel: function () { submitConfirmVisible[1](false); },
			onOk: handleSubmitConfirm,
			okText: '确认',
			cancelText: '取消'
		}, '请确认账单金额无误'),
		React.createElement(Modal, {
			title: '确认取消',
			open: cancelConfirmVisible[0],
			onCancel: function () { cancelConfirmVisible[1](false); },
			onOk: handleCancelConfirm,
			okText: '确认',
			cancelText: '取消'
		}, '取消将会丢失未保存的修改，是否确认？'),
		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' } },
			React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent)
		))
	);
};