// 【重要】必须使用 const Component 作为组件变量名
// 账单管理 - 车辆资产管理后台（按 antd 规范）

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

	var antd = window.antd;
	var Breadcrumb = antd.Breadcrumb;
	var Card = antd.Card;
	var Select = antd.Select;
	var Button = antd.Button;
	var Table = antd.Table;
	var Tag = antd.Tag;
	var Modal = antd.Modal;
	var Input = antd.Input;
	var message = antd.message;
	var Space = antd.Space;
	var Row = antd.Row;
	var Col = antd.Col;

	// 当前视图：list | detail
	var viewState = useState('list');
	var currentView = viewState[0];
	var setCurrentView = viewState[1];

	// 分页
	var pageState = useState(1);
	var currentPage = pageState[0];
	var setCurrentPage = pageState[1];
	var pageSizeState = useState(10);
	var pageSize = pageSizeState[0];
	var setPageSize = pageSizeState[1];

	// 选中项（Table rowSelection 用）
	var selectedRowKeysState = useState([]);
	var selectedRowKeys = selectedRowKeysState[0];
	var setSelectedRowKeys = selectedRowKeysState[1];

	// 筛选器（表单值）
	var contractFilterState = useState(undefined);
	var contractFilter = contractFilterState[0];
	var setContractFilter = contractFilterState[1];
	var projectFilterState = useState(undefined);
	var projectFilter = projectFilterState[0];
	var setProjectFilter = projectFilterState[1];
	var customerFilterState = useState(undefined);
	var customerFilter = customerFilterState[0];
	var setCustomerFilter = customerFilterState[1];
	var statusFilterState = useState([]);
	var statusFilter = statusFilterState[0];
	var setStatusFilter = statusFilterState[1];

	// 已应用的筛选条件（点击查询后生效）
	var appliedFilterState = useState({ contract: '', project: '', customer: '', status: [] });
	var appliedFilter = appliedFilterState[0];
	var setAppliedFilter = appliedFilterState[1];

	// 弹窗：应付金额明细 | 服务费明细
	var popoverState = useState({ type: null, data: null });
	var popover = popoverState[0];
	var setPopover = popoverState[1];

	// 照片查看器
	var photoViewerState = useState({ visible: false, photos: [], currentIndex: 0 });
	var photoViewer = photoViewerState[0];
	var setPhotoViewer = photoViewerState[1];

	var viewingBillIdState = useState(null);
	var viewingBillId = viewingBillIdState[0];
	var setViewingBillId = viewingBillIdState[1];

	// 详情模式：view | payment
	var detailModeState = useState('view');
	var detailMode = detailModeState[0];
	var setDetailMode = detailModeState[1];

	// 付款表单数据
	var paymentFormState = useState({
		discountAmount: '',
		discountReason: '',
		vehicleList: [],
		hydrogenList: [],
		violationList: [],
		returnFeeList: []
	});
	var paymentForm = paymentFormState[0];
	var setPaymentForm = paymentFormState[1];

	// 列表内成本编辑
	var editingListCellState = useState(null);
	var editingListCell = editingListCellState[0];
	var setEditingListCell = editingListCellState[1];
	var editingInputValueState = useState('');
	var editingInputValue = editingInputValueState[0];
	var setEditingInputValue = editingInputValueState[1];
	var listEditableCostsState = useState({});
	var listEditableCosts = listEditableCostsState[0];
	var setListEditableCosts = listEditableCostsState[1];

	// 模拟选项与数据（与原文一致）
	var contractOptions = useMemo(function() {
		return [
			{ value: 'HT001', label: 'HT001 - 租赁合同A' },
			{ value: 'HT002', label: 'HT002 - 租赁合同B' },
			{ value: 'HT003', label: 'HT003 - 租赁合同C' }
		];
	}, []);
	var projectOptions = useMemo(function() {
		return [
			{ value: 'XM001', label: 'XM001 - 北京项目' },
			{ value: 'XM002', label: 'XM002 - 上海项目' },
			{ value: 'XM003', label: 'XM003 - 广州项目' }
		];
	}, []);
	var customerOptions = useMemo(function() {
		return [
			{ value: 'KH001', label: 'KH001 - 科技公司A' },
			{ value: 'KH002', label: 'KH002 - 制造企业B' },
			{ value: 'KH003', label: 'KH003 - 物流公司C' }
		];
	}, []);
	var statusOptions = [
		{ value: 'paid', label: '已付款' },
		{ value: 'partial', label: '部分付款' },
		{ value: 'unpaid', label: '未付款' }
	];

	var mockBillList = useMemo(function() {
		var list = [];
		for (var i = 1; i <= 25; i++) {
			var statuses = ['paid', 'partial', 'unpaid'];
			var status = statuses[i % 3];
			list.push({
				id: 'BILL' + i,
				contractCode: 'HT00' + (i % 3 + 1),
				projectName: 'XM00' + (i % 3 + 1) + ' - 项目' + i,
				customerName: 'KH00' + (i % 3 + 1) + ' - 客户' + i,
				period: i,
				payableAmount: (15000 + i * 500).toFixed(2),
				paidAmount: status === 'paid' ? (15000 + i * 500).toFixed(2) : status === 'partial' ? (8000).toFixed(2) : '0.00',
				discountAmount: (i % 5 === 0 ? 200 : 0).toFixed(2),
				remark: status !== 'unpaid' ? '已付款备注' + i : '-',
				vehicleCost: (5000 + i * 100).toFixed(2),
				hydrogenCost: (300 + i * 20).toFixed(2),
				otherCost: (200 + i * 10).toFixed(2),
				status: status
			});
		}
		return list;
	}, []);

	var mockPayableDetail = useMemo(function() {
		return [
			{ startDate: '2025-01-01', endDate: '2025-01-31', plateNo: '京A12345', rent: '8000.00', serviceFee: '500.00', deposit: '2000.00' },
			{ startDate: '2025-01-01', endDate: '2025-01-31', plateNo: '京B67890', rent: '7000.00', serviceFee: '400.00', deposit: '1500.00' }
		];
	}, []);

	var mockBillDetail = useMemo(function() {
		return {
			startDate: '2025-01-01',
			endDate: '2025-01-31',
			contractCode: 'HT001',
			projectName: 'XM001 - 北京项目',
			customerName: 'KH001 - 科技公司A',
			department: '运营部',
			responsible: '张三',
			paymentCycle: '先付（付款周期：1个月）',
			discountTotal: '200.00',
			discountReason: '长期合作客户优惠，首期账单减免部分金额'
		};
	}, []);

	var mockVehicleList = useMemo(function() {
		return [
			{ brand: '奔驰', model: 'E300L', plateNo: '京A12345', planDelivery: '2024-12-25', actualDelivery: '2024-12-28', billStart: '2025-01-01', billEnd: '2025-01-31', monthlyRent: '8000.00', paidMonthlyRent: '7600.00', serviceFee: '500.00', paidServiceFee: '480.00', deposit: '2000.00', paidDeposit: '2000.00', serviceItems: [{ name: '保养服务', price: '300.00', effectiveDate: '2025-01-01' }, { name: '保险', price: '200.00', effectiveDate: '2025-01-01' }] },
			{ brand: '宝马', model: '530Li', plateNo: '京B67890', planDelivery: '2024-12-20', actualDelivery: '2024-12-22', billStart: '2025-01-01', billEnd: '2025-01-31', monthlyRent: '7000.00', paidMonthlyRent: '7000.00', serviceFee: '400.00', paidServiceFee: '380.00', deposit: '1500.00', paidDeposit: '1500.00', serviceItems: [{ name: '保养服务', price: '250.00', effectiveDate: '2025-01-01' }] }
		];
	}, []);

	var mockReturnFeeData = useMemo(function() {
		return {
			totalAmount: '2850.00',
			paidTotalAmount: '2700.00',
			list: [
				{ feeName: '车辆外观损伤费', amount: '800.00', paidAmount: '760.00', photos: ['https://picsum.photos/80/80?random=1', 'https://picsum.photos/80/80?random=2'], attachments: [{ name: '外观损伤说明.pdf' }] },
				{ feeName: '轮胎磨损费', amount: '1200.00', paidAmount: '1150.00', photos: ['https://picsum.photos/80/80?random=3'], attachments: [{ name: '轮胎检测报告.pdf' }, { name: '维修单据.pdf' }] },
				{ feeName: '内饰清洁费', amount: '450.00', paidAmount: '430.00', photos: ['https://picsum.photos/80/80?random=4', 'https://picsum.photos/80/80?random=5', 'https://picsum.photos/80/80?random=6'], attachments: [] },
				{ feeName: '油量补充费', amount: '400.00', paidAmount: '360.00', photos: [], attachments: [{ name: '加油凭证.jpg' }] }
			]
		};
	}, []);

	var mockViolationData = useMemo(function() {
		return {
			violationCount: 3,
			totalAmount: '650.00',
			paidTotalAmount: '600.00',
			list: [
				{ violationTime: '2025-01-10 08:30:00', plateNo: '京A12345', violationType: '违停', location: '北京市朝阳区xxx路', fineAmount: '200.00', paidFineAmount: '200.00' },
				{ violationTime: '2025-01-18 14:20:00', plateNo: '京B67890', violationType: '超速', location: '北京市海淀区xxx大道', fineAmount: '200.00', paidFineAmount: '180.00' },
				{ violationTime: '2025-01-25 09:15:00', plateNo: '京A12345', violationType: '闯红灯', location: '北京市东城区xxx路口', fineAmount: '250.00', paidFineAmount: '220.00' }
			]
		};
	}, []);

	var mockHydrogenData = useMemo(function() {
		return {
			refuelCount: 12,
			balance: '3580.00',
			list: [
				{ refuelTime: '2025-01-15 09:30:00', stationName: '北京朝阳加氢站', plateNo: '京A12345', amount: '15.5', costPrice: '28.00', feePrice: '434.00', paidFeePrice: '420.00' },
				{ refuelTime: '2025-01-18 14:20:00', stationName: '北京海淀加氢站', plateNo: '京B67890', amount: '12.0', costPrice: '28.00', feePrice: '336.00', paidFeePrice: '336.00' },
				{ refuelTime: '2025-01-22 11:00:00', stationName: '北京朝阳加氢站', plateNo: '京A12345', amount: '18.2', costPrice: '28.00', feePrice: '509.60', paidFeePrice: '490.00' }
			]
		};
	}, []);

	var vehicleBillTotals = useMemo(function() {
		var list = mockVehicleList || [];
		var monthlyRentTotal = 0, paidRentTotal = 0, serviceFeeTotal = 0, paidServiceFeeTotal = 0, depositTotal = 0, paidDepositTotal = 0;
		list.forEach(function(v) {
			monthlyRentTotal += parseFloat(v.monthlyRent || 0);
			paidRentTotal += parseFloat(v.paidMonthlyRent || 0);
			serviceFeeTotal += parseFloat(v.serviceFee || 0);
			paidServiceFeeTotal += parseFloat(v.paidServiceFee || 0);
			depositTotal += parseFloat(v.deposit || 0);
			paidDepositTotal += parseFloat(v.paidDeposit || 0);
		});
		return {
			monthlyRentTotal: monthlyRentTotal.toFixed(2),
			paidRentTotal: paidRentTotal.toFixed(2),
			serviceFeeTotal: serviceFeeTotal.toFixed(2),
			paidServiceFeeTotal: paidServiceFeeTotal.toFixed(2),
			depositTotal: depositTotal.toFixed(2),
			paidDepositTotal: paidDepositTotal.toFixed(2)
		};
	}, [mockVehicleList]);

	var billInfoTotals = useMemo(function() {
		var monthlyRentTotal = parseFloat(vehicleBillTotals.monthlyRentTotal || 0);
		var serviceFeeTotal = parseFloat(vehicleBillTotals.serviceFeeTotal || 0);
		var depositTotal = parseFloat(vehicleBillTotals.depositTotal || 0);
		var hydrogenTotal = 0;
		(mockHydrogenData.list || []).forEach(function(item) { hydrogenTotal += parseFloat(item.feePrice || 0); });
		var violationTotal = parseFloat(mockViolationData.totalAmount || 0);
		var returnFeeTotal = parseFloat(mockReturnFeeData.totalAmount || 0);
		var payableTotal = monthlyRentTotal + serviceFeeTotal + depositTotal + hydrogenTotal + violationTotal + returnFeeTotal;
		var paidTotal = 0;
		(mockVehicleList || []).forEach(function(v) {
			paidTotal += parseFloat(v.paidMonthlyRent || 0) + parseFloat(v.paidServiceFee || 0) + parseFloat(v.paidDeposit || 0);
		});
		var discountTotal = parseFloat(mockBillDetail.discountTotal || 0);
		var unpaidTotal = Math.max(0, payableTotal - paidTotal - discountTotal);
		return {
			payableTotal: payableTotal.toFixed(2),
			paidTotal: paidTotal.toFixed(2),
			unpaidTotal: unpaidTotal.toFixed(2)
		};
	}, [vehicleBillTotals, mockHydrogenData, mockViolationData, mockReturnFeeData, mockVehicleList, mockBillDetail]);

	var vehicleTotals = billInfoTotals;

	var filteredList = useMemo(function() {
		var list = (mockBillList || []).slice();
		var c = (appliedFilter.contract || '').trim();
		var p = (appliedFilter.project || '').trim();
		var cust = (appliedFilter.customer || '').trim();
		var st = Array.isArray(appliedFilter.status) ? appliedFilter.status : [];
		if (c) list = list.filter(function(item) { return String(item.contractCode || '').toLowerCase().indexOf(c.toLowerCase()) >= 0; });
		if (p) list = list.filter(function(item) { return String(item.projectName || '').toLowerCase().indexOf(p.toLowerCase()) >= 0; });
		if (cust) list = list.filter(function(item) { return String(item.customerName || '').toLowerCase().indexOf(cust.toLowerCase()) >= 0; });
		if (st.length > 0) {
			var statusSet = {};
			st.forEach(function(s) { statusSet[s] = true; });
			list = list.filter(function(item) { return statusSet[item.status]; });
		}
		return list;
	}, [mockBillList, appliedFilter.contract, appliedFilter.project, appliedFilter.customer, appliedFilter.status]);

	var totalCount = filteredList.length;
	var paginatedList = useMemo(function() {
		var start = (currentPage - 1) * pageSize;
		return filteredList.slice(start, start + pageSize);
	}, [filteredList, currentPage, pageSize]);

	var handleSearch = useCallback(function() {
		setAppliedFilter({
			contract: (contractFilter != null && contractFilter !== '') ? String(contractFilter) : '',
			project: (projectFilter != null && projectFilter !== '') ? String(projectFilter) : '',
			customer: (customerFilter != null && customerFilter !== '') ? String(customerFilter) : '',
			status: Array.isArray(statusFilter) ? statusFilter.slice() : []
		});
		setCurrentPage(1);
	}, [contractFilter, projectFilter, customerFilter, statusFilter]);

	var handleReset = useCallback(function() {
		setContractFilter(undefined);
		setProjectFilter(undefined);
		setCustomerFilter(undefined);
		setStatusFilter([]);
		setAppliedFilter({ contract: '', project: '', customer: '', status: [] });
		setCurrentPage(1);
	}, []);

	var handleExport = useCallback(function() {
		if (selectedRowKeys.length === 0) {
			message.warning('请先选择要导出的数据');
			return;
		}
		message.success('导出 ' + selectedRowKeys.length + ' 条数据');
	}, [selectedRowKeys.length]);

	var handleView = useCallback(function(id, isPayment) {
		setViewingBillId(id);
		setDetailMode(isPayment ? 'payment' : 'view');
		if (isPayment) {
			var vl = mockVehicleList.map(function(v) {
				return { paidMonthlyRent: v.paidMonthlyRent || '', paidServiceFee: v.paidServiceFee || '', paidDeposit: v.paidDeposit || '' };
			});
			var hl = mockHydrogenData.list.map(function(item) { return { paidFeePrice: item.paidFeePrice || '' }; });
			var viol = mockViolationData.list.map(function(item) { return { paidFineAmount: item.paidFineAmount || '' }; });
			var rfl = mockReturnFeeData.list.map(function(item) { return { paidAmount: item.paidAmount || '' }; });
			setPaymentForm({
				discountAmount: mockBillDetail.discountTotal || '',
				discountReason: mockBillDetail.discountReason || '',
				vehicleList: vl,
				hydrogenList: hl,
				violationList: viol,
				returnFeeList: rfl
			});
		}
		setCurrentView('detail');
	}, []);

	var handleBackToList = useCallback(function() {
		setCurrentView('list');
		setViewingBillId(null);
		setDetailMode('view');
	}, []);

	var handlePaymentFormChange = useCallback(function(section, index, field, value) {
		setPaymentForm(function(prev) {
			var next = {
				discountAmount: prev.discountAmount,
				discountReason: prev.discountReason,
				vehicleList: prev.vehicleList.slice(),
				hydrogenList: prev.hydrogenList.slice(),
				violationList: prev.violationList.slice(),
				returnFeeList: prev.returnFeeList.slice()
			};
			if (section === 'bill') {
				if (field === 'discountAmount') next.discountAmount = value;
				if (field === 'discountReason') next.discountReason = value;
			} else if (section === 'vehicle' && index >= 0 && index < next.vehicleList.length) {
				next.vehicleList[index] = Object.assign({}, next.vehicleList[index], { [field]: value });
			} else if (section === 'hydrogen' && index >= 0 && index < next.hydrogenList.length) {
				next.hydrogenList[index] = Object.assign({}, next.hydrogenList[index], { [field]: value });
			} else if (section === 'violation' && index >= 0 && index < next.violationList.length) {
				next.violationList[index] = Object.assign({}, next.violationList[index], { [field]: value });
			} else if (section === 'returnFee' && index >= 0 && index < next.returnFeeList.length) {
				next.returnFeeList[index] = Object.assign({}, next.returnFeeList[index], { [field]: value });
			}
			return next;
		});
	}, []);

	var handleSubmit = useCallback(function() {
		var errors = [];
		if (!paymentForm.discountAmount || String(paymentForm.discountAmount).trim() === '') errors.push('减免金额');
		if (!paymentForm.discountReason || String(paymentForm.discountReason).trim() === '') errors.push('减免原因');
		paymentForm.vehicleList.forEach(function(v, i) {
			if (!v.paidMonthlyRent || String(v.paidMonthlyRent).trim() === '') errors.push('车辆账单-实付月租金(第' + (i + 1) + '行)');
			if (!v.paidServiceFee || String(v.paidServiceFee).trim() === '') errors.push('车辆账单-实付服务费(第' + (i + 1) + '行)');
			if (!v.paidDeposit || String(v.paidDeposit).trim() === '') errors.push('车辆账单-实付保证金(第' + (i + 1) + '行)');
		});
		paymentForm.hydrogenList.forEach(function(h, i) {
			if (!h.paidFeePrice || String(h.paidFeePrice).trim() === '') errors.push('氢费账单-实付氢费金额(第' + (i + 1) + '行)');
		});
		paymentForm.violationList.forEach(function(v, i) {
			if (!v.paidFineAmount || String(v.paidFineAmount).trim() === '') errors.push('违章费用-实付罚款金额(第' + (i + 1) + '行)');
		});
		paymentForm.returnFeeList.forEach(function(r, i) {
			if (!r.paidAmount || String(r.paidAmount).trim() === '') errors.push('还车费用-实付金额(第' + (i + 1) + '行)');
		});
		if (errors.length > 0) {
			message.warning('请填写必填项：' + errors.join('、'));
			return;
		}
		message.success('提交成功');
		handleBackToList();
	}, [paymentForm, handleBackToList]);

	var handleSave = useCallback(function() {
		message.success('保存成功');
	}, []);

	function getStatusText(status) {
		if (status === 'paid') return '已付款';
		if (status === 'partial') return '部分付款';
		return '未付款';
	}
	function getStatusTagColor(status) {
		if (status === 'paid') return 'success';
		if (status === 'partial') return 'warning';
		return 'error';
	}

	// 列表表格列（含行内编辑氢费/其他成本）
	function renderEditableCost(row, field, label) {
		var rowId = row.id;
		var val = (listEditableCosts[rowId] && listEditableCosts[rowId][field] !== undefined)
			? listEditableCosts[rowId][field]
			: (row[field] != null ? row[field] : '0.00');
		var num = (parseFloat(val) || 0).toFixed(2);
		var isEditing = editingListCell && editingListCell.rowId === rowId && editingListCell.field === field;
		if (isEditing) {
			return React.createElement(Space, { key: 'edit', size: 4 },
				React.createElement(Input, {
					value: editingInputValue,
					onChange: function(e) { setEditingInputValue(e.target.value); },
					onBlur: function() {
						var n = parseFloat(editingInputValue);
						var formatted = (isNaN(n) ? 0 : n).toFixed(2);
						setListEditableCosts(function(prev) {
							var next = Object.assign({}, prev);
							next[rowId] = Object.assign({}, next[rowId], { [field]: formatted });
							return next;
						});
						setEditingListCell(null);
						setEditingInputValue('');
					},
					style: { width: 80 },
					autoFocus: true
				}),
				React.createElement('span', null, '元')
			);
		}
		return React.createElement('span', {
			style: { cursor: 'pointer' },
			onClick: function() {
				setEditingInputValue(num);
				setEditingListCell({ rowId: rowId, field: field });
			}
		}, num);
	}

	var listColumns = useMemo(function() {
		return [
			{ title: '付款状态', dataIndex: 'status', key: 'status', width: 100, render: function(s) { return React.createElement(Tag, { color: getStatusTagColor(s) }, getStatusText(s)); } },
			{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 120 },
			{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 160 },
			{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 160 },
			{ title: '当前期数', dataIndex: 'period', key: 'period', width: 90 },
			{ title: '应付金额', dataIndex: 'payableAmount', key: 'payableAmount', width: 110, render: function(_, row) {
				return React.createElement('a', {
					onClick: function() { setPopover({ type: 'payable', data: mockPayableDetail }); },
					style: { color: '#1677ff', fontWeight: 600, textDecoration: 'underline', cursor: 'pointer' }
				}, row.payableAmount);
			}},
			{ title: '实付金额', dataIndex: 'paidAmount', key: 'paidAmount', width: 110 },
			{ title: '减免金额', dataIndex: 'discountAmount', key: 'discountAmount', width: 100 },
			{ title: '未付金额', key: 'unpaid', width: 100, render: function(_, row) {
				return (parseFloat(row.payableAmount || 0) - parseFloat(row.paidAmount || 0) - parseFloat(row.discountAmount || 0)).toFixed(2);
			}},
			{ title: '备注', dataIndex: 'remark', key: 'remark', width: 120 },
			{ title: '车辆成本（元）', dataIndex: 'vehicleCost', key: 'vehicleCost', width: 120, render: function(val) { return (parseFloat(val) || 0).toFixed(2); } },
			{ title: '氢费成本（元）', key: 'hydrogenCost', width: 120, render: function(_, row) { return renderEditableCost(row, 'hydrogenCost', '氢费'); } },
			{ title: '其他成本（元）', key: 'otherCost', width: 120, render: function(_, row) { return renderEditableCost(row, 'otherCost', '其他'); } },
			{ title: '操作', key: 'action', width: 140, fixed: 'right', render: function(_, row) {
				return React.createElement(Space, null,
					React.createElement(Button, { type: 'link', size: 'small', onClick: function() { handleView(row.id, false); } }, '查看'),
					React.createElement(Button, { type: 'link', size: 'small', style: { color: '#52c41a' }, onClick: function() { handleView(row.id, true); } }, '收费')
				);
			}}
		];
	}, [listEditableCosts, editingListCell, editingInputValue, handleView]);

	var rowSelection = useMemo(function() {
		return {
			selectedRowKeys: selectedRowKeys,
			onChange: function(keys) { setSelectedRowKeys(keys || []); }
		};
	}, [selectedRowKeys]);

	var tablePagination = useMemo(function() {
		return {
			current: currentPage,
			pageSize: pageSize,
			total: totalCount,
			showSizeChanger: true,
			showTotal: function(t) { return '共 ' + t + ' 条'; },
			pageSizeOptions: ['10', '20', '50'],
			onChange: function(page, size) {
				setCurrentPage(page);
				if (size !== pageSize) setPageSize(size);
			}
		};
	}, [currentPage, pageSize, totalCount]);

	// —————— 详情视图 ——————
	if (currentView === 'detail') {
		var detailBreadcrumbItems = [
			{ title: '运维管理' },
			{ title: '业务管理' },
			{ title: '租赁账单' },
			{ title: detailMode === 'payment' ? '收费' : '查看' }
		];

		var billInfoCols = [
			{ label: '账单开始日期', value: mockBillDetail.startDate },
			{ label: '账单结束日期', value: mockBillDetail.endDate },
			{ label: '合同编码', value: mockBillDetail.contractCode },
			{ label: '项目名称', value: mockBillDetail.projectName },
			{ label: '客户名称', value: mockBillDetail.customerName },
			{ label: '业务部门', value: mockBillDetail.department },
			{ label: '业务负责人', value: mockBillDetail.responsible },
			{ label: '付款周期', value: mockBillDetail.paymentCycle }
		];

		return React.createElement('div', { style: { padding: 24, background: '#f5f5f5', minHeight: '100vh' } },
			React.createElement(Breadcrumb, { items: detailBreadcrumbItems, style: { marginBottom: 16 } }),
			React.createElement(Card, { style: { marginBottom: 16 } },
				React.createElement('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 16, paddingBottom: 12, borderBottom: '1px solid #f0f0f0' } }, '账单信息'),
				React.createElement(Row, { gutter: [24, 24] },
					billInfoCols.map(function(item, i) {
						return React.createElement(Col, { key: i, span: 8 },
							React.createElement('div', { style: { marginBottom: 8 } },
								React.createElement('span', { style: { color: '#666', marginRight: 8 } }, item.label + '：'),
								React.createElement('span', null, item.value)
							)
						);
					}),
					React.createElement(Col, { span: 8 },
						React.createElement('div', { style: { marginBottom: 8 } },
							React.createElement('span', { style: { color: '#666', marginRight: 8 } }, '应付款总额：'),
							React.createElement('span', { style: { color: '#1890ff', fontWeight: 600 } }, vehicleTotals.payableTotal + ' 元')
						)
					),
					React.createElement(Col, { span: 8 },
						React.createElement('div', { style: { marginBottom: 8 } },
							React.createElement('span', { style: { color: '#666', marginRight: 8 } }, '实付款总额：'),
							React.createElement('span', { style: { color: '#52c41a', fontWeight: 600 } }, vehicleTotals.paidTotal + ' 元')
						)
					),
					React.createElement(Col, { span: 8 },
						React.createElement('div', { style: { marginBottom: 8 } },
							React.createElement('span', { style: { color: '#666', marginRight: 8 } }, '减免金额：'),
							detailMode === 'payment'
								? React.createElement(Input, {
									value: paymentForm.discountAmount,
									onChange: function(e) { handlePaymentFormChange('bill', -1, 'discountAmount', e.target.value); },
									style: { width: 120 },
									placeholder: '0.00',
									addonAfter: '元'
								})
								: React.createElement('span', { style: { fontWeight: 600 } }, mockBillDetail.discountTotal + ' 元')
						)
					),
					React.createElement(Col, { span: 8 },
						React.createElement('div', { style: { marginBottom: 8 } },
							React.createElement('span', { style: { color: '#666', marginRight: 8 } }, '未付款总额：'),
							React.createElement('span', { style: { color: '#ff4d4f', fontWeight: 600 } }, vehicleTotals.unpaidTotal + ' 元')
						)
					),
					React.createElement(Col, { span: 24 },
						React.createElement('div', { style: { marginBottom: 8 } },
							React.createElement('span', { style: { color: '#666', marginRight: 8 } }, '减免原因：'),
							detailMode === 'payment'
								? React.createElement(Input.TextArea, {
									value: paymentForm.discountReason,
									onChange: function(e) { handlePaymentFormChange('bill', -1, 'discountReason', e.target.value); },
									placeholder: '请输入减免原因',
									rows: 3,
									style: { maxWidth: 400 }
								})
								: React.createElement('span', null, mockBillDetail.discountReason || '-')
						)
					)
				)
			),
			// 车辆账单
			React.createElement(Card, { title: '车辆账单', style: { marginBottom: 16 } },
				React.createElement(Table, {
					dataSource: mockVehicleList,
					rowKey: 'plateNo',
					pagination: false,
					scroll: { x: 1200 },
					columns: [
						{ title: '品牌', dataIndex: 'brand', width: 80 },
						{ title: '型号', dataIndex: 'model', width: 90 },
						{ title: '车牌号', dataIndex: 'plateNo', width: 100 },
						{ title: '计划交车日期', dataIndex: 'planDelivery', width: 120 },
						{ title: '实际交车日期', dataIndex: 'actualDelivery', width: 120 },
						{ title: '账单开始日期', dataIndex: 'billStart', width: 120 },
						{ title: '计费结束日期', dataIndex: 'billEnd', width: 120 },
						{ title: '车辆月租金', dataIndex: 'monthlyRent', width: 110 },
						{ title: '实付月租金', dataIndex: 'paidMonthlyRent', width: 110, render: function(_, record, idx) {
							if (detailMode !== 'payment') return (parseFloat(record.paidMonthlyRent || 0)).toFixed(2);
							var pf = paymentForm.vehicleList[idx] || {};
							return React.createElement(Input, { value: pf.paidMonthlyRent, onChange: function(e) { handlePaymentFormChange('vehicle', idx, 'paidMonthlyRent', e.target.value); }, style: { width: 100 }, addonAfter: '元' });
						}},
						{ title: '服务费', dataIndex: 'serviceFee', width: 90, render: function(val, record) {
							if (detailMode === 'payment') return val;
							return React.createElement('a', { onClick: function() { setPopover({ type: 'service', data: record.serviceItems }); } }, val);
						}},
						{ title: '实付服务费', dataIndex: 'paidServiceFee', width: 110, render: function(_, record, idx) {
							if (detailMode !== 'payment') return (parseFloat(record.paidServiceFee || 0)).toFixed(2);
							var pf = paymentForm.vehicleList[idx] || {};
							return React.createElement(Input, { value: pf.paidServiceFee, onChange: function(e) { handlePaymentFormChange('vehicle', idx, 'paidServiceFee', e.target.value); }, style: { width: 100 }, addonAfter: '元' });
						}},
						{ title: '保证金', dataIndex: 'deposit', width: 90 },
						{ title: '实付保证金', dataIndex: 'paidDeposit', width: 110, render: function(_, record, idx) {
							if (detailMode !== 'payment') return (parseFloat(record.paidDeposit || 0)).toFixed(2);
							var pf = paymentForm.vehicleList[idx] || {};
							return React.createElement(Input, { value: pf.paidDeposit, onChange: function(e) { handlePaymentFormChange('vehicle', idx, 'paidDeposit', e.target.value); }, style: { width: 100 }, addonAfter: '元' });
						}}
					],
					summary: function() {
						return React.createElement(Table.Summary, null,
							React.createElement(Table.Summary.Row, null,
								React.createElement(Table.Summary.Cell, { index: 0, colSpan: 7 }, '总计'),
								React.createElement(Table.Summary.Cell, { index: 7 }, vehicleBillTotals.monthlyRentTotal),
								React.createElement(Table.Summary.Cell, { index: 8 }, vehicleBillTotals.paidRentTotal),
								React.createElement(Table.Summary.Cell, { index: 9 }, vehicleBillTotals.serviceFeeTotal),
								React.createElement(Table.Summary.Cell, { index: 10 }, vehicleBillTotals.paidServiceFeeTotal),
								React.createElement(Table.Summary.Cell, { index: 11 }, vehicleBillTotals.depositTotal),
								React.createElement(Table.Summary.Cell, { index: 12 }, vehicleBillTotals.paidDepositTotal)
							)
						);
					}
				})
			),
			// 氢费账单
			React.createElement(Card, { title: '氢费账单', style: { marginBottom: 16 } },
				React.createElement('div', { style: { marginBottom: 16 } },
					React.createElement('span', { style: { marginRight: 24 } }, '加氢次数：', React.createElement('span', { style: { fontWeight: 600 } }, mockHydrogenData.refuelCount + ' 次')),
					React.createElement('span', null, '当前氢费余额：', React.createElement('span', { style: { fontWeight: 600, color: '#1890ff' } }, mockHydrogenData.balance + ' 元'))
				),
				React.createElement(Table, {
					dataSource: mockHydrogenData.list,
					rowKey: function(item, i) { return i; },
					pagination: false,
					columns: [
						{ title: '加氢时间', dataIndex: 'refuelTime', width: 180 },
						{ title: '加氢站名称', dataIndex: 'stationName', width: 140 },
						{ title: '车牌号', dataIndex: 'plateNo', width: 100 },
						{ title: '加氢量', dataIndex: 'amount', width: 90 },
						{ title: '成本单价（元/KG）', dataIndex: 'costPrice', width: 120 },
						{ title: '氢费价格（元）', dataIndex: 'feePrice', width: 120 },
						{ title: '实付氢费金额（元）', dataIndex: 'paidFeePrice', width: 140, render: function(_, record, i) {
							if (detailMode !== 'payment') return (parseFloat(record.paidFeePrice || 0)).toFixed(2);
							var pf = paymentForm.hydrogenList[i] || {};
							return React.createElement(Input, { value: pf.paidFeePrice, onChange: function(e) { handlePaymentFormChange('hydrogen', i, 'paidFeePrice', e.target.value); }, style: { width: 100 }, addonAfter: '元' });
						}}
					],
					summary: function() {
						var totalFee = mockHydrogenData.list.reduce(function(s, item) { return s + parseFloat(item.feePrice || 0); }, 0).toFixed(2);
						var totalPaid = mockHydrogenData.list.reduce(function(s, item) { return s + parseFloat(item.paidFeePrice || 0); }, 0).toFixed(2);
						return React.createElement(Table.Summary, null,
							React.createElement(Table.Summary.Row, null,
								React.createElement(Table.Summary.Cell, { index: 0, colSpan: 5 }, '总计'),
								React.createElement(Table.Summary.Cell, { index: 5 }, totalFee),
								React.createElement(Table.Summary.Cell, { index: 6 }, totalPaid)
							)
						);
					}
				})
			),
			// 违章费用
			React.createElement(Card, { title: '违章费用', style: { marginBottom: 16 } },
				React.createElement('div', { style: { marginBottom: 16 } },
					React.createElement('span', null, '违章次数：', React.createElement('span', { style: { fontWeight: 600 } }, mockViolationData.violationCount + ' 次'))
				),
				React.createElement(Table, {
					dataSource: mockViolationData.list,
					rowKey: function(item, i) { return i; },
					pagination: false,
					columns: [
						{ title: '违章时间', dataIndex: 'violationTime', width: 180 },
						{ title: '车牌号', dataIndex: 'plateNo', width: 100 },
						{ title: '违章类型', dataIndex: 'violationType', width: 100 },
						{ title: '违章地点', dataIndex: 'location', width: 200 },
						{ title: '罚款金额', dataIndex: 'fineAmount', width: 100 },
						{ title: '实付罚款金额（元）', dataIndex: 'paidFineAmount', width: 140, render: function(_, record, i) {
							if (detailMode !== 'payment') return (parseFloat(record.paidFineAmount || 0)).toFixed(2);
							var pf = paymentForm.violationList[i] || {};
							return React.createElement(Input, { value: pf.paidFineAmount, onChange: function(e) { handlePaymentFormChange('violation', i, 'paidFineAmount', e.target.value); }, style: { width: 100 }, addonAfter: '元' });
						}}
					],
					summary: function() {
						var totalPaid = mockViolationData.list.reduce(function(s, item) { return s + parseFloat(item.paidFineAmount || 0); }, 0).toFixed(2);
						return React.createElement(Table.Summary, null,
							React.createElement(Table.Summary.Row, null,
								React.createElement(Table.Summary.Cell, { index: 0, colSpan: 4 }, '总计'),
								React.createElement(Table.Summary.Cell, { index: 4 }, mockViolationData.totalAmount),
								React.createElement(Table.Summary.Cell, { index: 5 }, totalPaid)
							)
						);
					}
				})
			),
			// 还车费用
			React.createElement(Card, { title: '还车费用', style: { marginBottom: 16 } },
				React.createElement(Table, {
					dataSource: mockReturnFeeData.list,
					rowKey: function(item, i) { return i; },
					pagination: false,
					columns: [
						{ title: '费用名称', dataIndex: 'feeName', width: 140 },
						{ title: '金额', dataIndex: 'amount', width: 100 },
						{ title: '实付金额（元）', dataIndex: 'paidAmount', width: 120, render: function(_, record, i) {
							if (detailMode !== 'payment') return (parseFloat(record.paidAmount || 0)).toFixed(2);
							var pf = paymentForm.returnFeeList[i] || {};
							return React.createElement(Input, { value: pf.paidAmount, onChange: function(e) { handlePaymentFormChange('returnFee', i, 'paidAmount', e.target.value); }, style: { width: 100 }, addonAfter: '元' });
						}},
						{ title: '照片', dataIndex: 'photos', width: 200, render: function(photos) {
							if (!photos || photos.length === 0) return '-';
							return React.createElement(Space, null, photos.slice(0, 5).map(function(url, idx) {
								return React.createElement('img', {
									key: idx,
									src: url,
									alt: '',
									style: { width: 40, height: 40, objectFit: 'cover', borderRadius: 4, cursor: 'pointer' },
									onClick: function() { setPhotoViewer({ visible: true, photos: photos, currentIndex: idx }); }
								});
							}));
						}},
						{ title: '附件', dataIndex: 'attachments', render: function(attachments) {
							if (!attachments || attachments.length === 0) return '-';
							return React.createElement(Space, { wrap: true }, attachments.map(function(att, idx) {
								return React.createElement('a', { key: idx, onClick: function() { message.info('下载附件：' + att.name); } }, att.name);
							}));
						}}
					],
					summary: function() {
						var totalPaid = mockReturnFeeData.list.reduce(function(s, item) { return s + parseFloat(item.paidAmount || 0); }, 0).toFixed(2);
						return React.createElement(Table.Summary, null,
							React.createElement(Table.Summary.Row, null,
								React.createElement(Table.Summary.Cell, { index: 0 }, '总计'),
								React.createElement(Table.Summary.Cell, { index: 1 }, mockReturnFeeData.totalAmount),
								React.createElement(Table.Summary.Cell, { index: 2 }, totalPaid),
								React.createElement(Table.Summary.Cell, { index: 3 }, ''),
								React.createElement(Table.Summary.Cell, { index: 4 }, '')
							)
						);
					}
				})
			),
			React.createElement('div', { style: { marginTop: 24, textAlign: 'center' } },
				React.createElement(Space, null,
					detailMode === 'payment' && React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'),
					detailMode === 'payment' && React.createElement(Button, { onClick: handleSave }, '保存'),
					detailMode === 'payment' && React.createElement(Button, { onClick: handleBackToList }, '取消'),
					detailMode === 'view' && React.createElement(Button, { onClick: handleBackToList }, '返回')
				)
			),
			// 照片查看器 Modal
			React.createElement(Modal, {
				title: '照片查看',
				open: photoViewer.visible && photoViewer.photos.length > 0,
				onCancel: function() { setPhotoViewer({ visible: false, photos: [], currentIndex: 0 }); },
				footer: null,
				width: '90vw',
				centered: true
			}, photoViewer.photos.length > 0 ? React.createElement('div', { style: { textAlign: 'center' } },
				React.createElement('img', {
					src: photoViewer.photos[photoViewer.currentIndex].replace('80/80', '600/600'),
					alt: '',
					style: { maxWidth: '100%', maxHeight: '70vh', objectFit: 'contain' }
				}),
				React.createElement('div', { style: { marginTop: 16 } },
					React.createElement(Button, {
						disabled: photoViewer.currentIndex <= 0,
						onClick: function() { setPhotoViewer({ visible: true, photos: photoViewer.photos, currentIndex: photoViewer.currentIndex - 1 }); }
					}, '上一张'),
					React.createElement('span', { style: { margin: '0 16px' } }, (photoViewer.currentIndex + 1) + ' / ' + photoViewer.photos.length),
					React.createElement(Button, {
						disabled: photoViewer.currentIndex >= photoViewer.photos.length - 1,
						onClick: function() { setPhotoViewer({ visible: true, photos: photoViewer.photos, currentIndex: photoViewer.currentIndex + 1 }); }
					}, '下一张')
				)
			) : null),
			// 服务费明细 Modal
			popover.type === 'service' && React.createElement(Modal, {
				title: '服务费明细',
				open: true,
				onCancel: function() { setPopover({ type: null, data: null }); },
				footer: React.createElement(Button, { onClick: function() { setPopover({ type: null, data: null }); } }, '关闭')
			}, React.createElement(Table, {
				dataSource: popover.data,
				rowKey: function(item, i) { return i; },
				pagination: false,
				columns: [
					{ title: '服务项', dataIndex: 'name' },
					{ title: '价格', dataIndex: 'price' },
					{ title: '服务生效日期', dataIndex: 'effectiveDate' }
				]
			}))
		);
	}

	// —————— 列表视图 ——————
	var listBreadcrumbItems = [
		{ title: '运维管理' },
		{ title: '业务管理' },
		{ title: '租赁账单' }
	];

	return React.createElement('div', { style: { padding: 24, background: '#f5f5f5', minHeight: '100vh' } },
		React.createElement(Breadcrumb, { items: listBreadcrumbItems, style: { marginBottom: 16 } }),
		React.createElement(Card, null,
			React.createElement(Row, { gutter: [16, 16], style: { marginBottom: 16 }, align: 'middle' },
				React.createElement(Col, null,
					React.createElement('span', { style: { marginRight: 8 } }, '合同编码：'),
					React.createElement(Select, {
						placeholder: '请选择合同编码',
						allowClear: true,
						showSearch: true,
						optionFilterProp: 'label',
						value: contractFilter,
						onChange: setContractFilter,
						style: { width: 200 },
						options: contractOptions
					})
				),
				React.createElement(Col, null,
					React.createElement('span', { style: { marginRight: 8 } }, '项目名称：'),
					React.createElement(Select, {
						placeholder: '请选择项目名称',
						allowClear: true,
						showSearch: true,
						optionFilterProp: 'label',
						value: projectFilter,
						onChange: setProjectFilter,
						style: { width: 200 },
						options: projectOptions
					})
				),
				React.createElement(Col, null,
					React.createElement('span', { style: { marginRight: 8 } }, '客户名称：'),
					React.createElement(Select, {
						placeholder: '请选择客户名称',
						allowClear: true,
						showSearch: true,
						optionFilterProp: 'label',
						value: customerFilter,
						onChange: setCustomerFilter,
						style: { width: 200 },
						options: customerOptions
					})
				),
				React.createElement(Col, null,
					React.createElement('span', { style: { marginRight: 8 } }, '付款状态：'),
					React.createElement(Select, {
						mode: 'multiple',
						placeholder: '全部',
						allowClear: true,
						value: statusFilter,
						onChange: setStatusFilter,
						style: { width: 200 },
						options: statusOptions,
						maxTagCount: 'responsive'
					})
				),
				React.createElement(Col, null,
					React.createElement(Space, null,
						React.createElement(Button, { type: 'primary', onClick: handleSearch }, '查询'),
						React.createElement(Button, { onClick: handleReset }, '重置')
					)
				)
			),
			React.createElement('div', { style: { marginBottom: 16, display: 'flex', justifyContent: 'flex-end' } },
				React.createElement(Button, { type: 'primary', onClick: handleExport }, '导出')
			),
			React.createElement(Table, {
				rowSelection: rowSelection,
				columns: listColumns,
				dataSource: paginatedList,
				rowKey: 'id',
				pagination: tablePagination,
				scroll: { x: 1600 },
				size: 'middle'
			})
		),
		// 应付金额明细 Modal（列表按内容一行显示、宽度随内容调整）
		React.createElement(Modal, {
			title: '应付金额明细',
			open: popover.type === 'payable',
			onCancel: function() { setPopover({ type: null, data: null }); },
			footer: React.createElement(Button, { onClick: function() { setPopover({ type: null, data: null }); } }, '关闭'),
			width: 'fit-content',
			style: { maxWidth: '90vw' },
			styles: { body: { paddingBottom: 24 } }
		}, popover.type === 'payable' && popover.data ? React.createElement(Table, {
			dataSource: popover.data,
			rowKey: function(item, i) { return i; },
			pagination: false,
			tableLayout: 'auto',
			style: { minWidth: 0 },
			columns: [
				{ title: '账单开始日期', dataIndex: 'startDate', onCell: function() { return { style: { whiteSpace: 'nowrap' } }; } },
				{ title: '账单结束日期', dataIndex: 'endDate', onCell: function() { return { style: { whiteSpace: 'nowrap' } }; } },
				{ title: '车牌号', dataIndex: 'plateNo', onCell: function() { return { style: { whiteSpace: 'nowrap' } }; } },
				{ title: '车辆租金', dataIndex: 'rent', onCell: function() { return { style: { whiteSpace: 'nowrap' } }; } },
				{ title: '服务费', dataIndex: 'serviceFee', onCell: function() { return { style: { whiteSpace: 'nowrap' } }; } },
				{ title: '保证金', dataIndex: 'deposit', onCell: function() { return { style: { whiteSpace: 'nowrap' } }; } }
			]
		}) : null)
	);
};

if (typeof window !== 'undefined') {
	window.Component = Component;
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', function() {
			var rootEl = document.getElementById('root');
			if (rootEl && window.ReactDOM && window.React) {
				var root = ReactDOM.createRoot(rootEl);
				root.render(React.createElement(Component));
			}
		});
	} else {
		var rootEl = document.getElementById('root');
		if (rootEl && window.ReactDOM && window.React) {
			var root = ReactDOM.createRoot(rootEl);
			root.render(React.createElement(Component));
		}
	}
}