// 【重要】必须使用 const Component 作为组件变量名
// 业务管理 - 车辆成本维护（2026年3月12日版本）

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

	var antd = window.antd;
	var Breadcrumb = antd.Breadcrumb;
	var Card = antd.Card;
	var Table = antd.Table;
	var Button = antd.Button;
	var Input = antd.Input;
	var Space = antd.Space;
	var Modal = antd.Modal;
	var Cascader = antd.Cascader;
	var message = antd.message;

	var requirementModalVisible = useState(false);
	var filterCascaderValue = useState(undefined); // [brand] 或 [brand, model]
	var listDataState = useState([
		{ id: 1, brand: '东风', model: '18吨双飞翼', rentalCostPerDay: 260.00, selfOperatedCostPerDay: 250.00 },
		{ id: 2, brand: '福田', model: '18吨厢式', rentalCostPerDay: 255.00, selfOperatedCostPerDay: 245.00 },
		{ id: 3, brand: '重汽', model: '18吨栏板', rentalCostPerDay: 270.00, selfOperatedCostPerDay: 260.00 },
		{ id: 4, brand: '陕汽', model: '25吨牵引', rentalCostPerDay: 268.00, selfOperatedCostPerDay: 258.00 },
		{ id: 5, brand: '解放', model: '18吨冷藏', rentalCostPerDay: 262.00, selfOperatedCostPerDay: 252.00 },
		{ id: 6, brand: '江淮', model: '9吨厢式', rentalCostPerDay: 248.00, selfOperatedCostPerDay: 238.00 },
		{ id: 7, brand: '东风', model: '25吨栏板', rentalCostPerDay: 275.00, selfOperatedCostPerDay: 265.00 },
		{ id: 8, brand: '福田', model: '25吨飞翼', rentalCostPerDay: 272.00, selfOperatedCostPerDay: 262.00 },
		{ id: 9, brand: '重汽', model: '25吨冷藏', rentalCostPerDay: 278.00, selfOperatedCostPerDay: 268.00 },
		{ id: 10, brand: '陕汽', model: '18吨自卸', rentalCostPerDay: 265.00, selfOperatedCostPerDay: 255.00 }
	]);
	var listData = listDataState[0];
	var setListData = listDataState[1];
	var editingKeyState = useState(null);
	var editingKey = editingKeyState[0];
	var setEditingKey = editingKeyState[1];
	var editRentalState = useState('');
	var editRental = editRentalState[0];
	var setEditRental = editRentalState[1];
	var editSelfOperatedState = useState('');
	var editSelfOperated = editSelfOperatedState[0];
	var setEditSelfOperated = editSelfOperatedState[1];

	var cascaderOptions = useMemo(function () {
		var map = {};
		listData.forEach(function (r) {
			if (!r.brand) return;
			if (!map[r.brand]) map[r.brand] = { value: r.brand, label: r.brand, children: [] };
			var children = map[r.brand].children;
			var model = r.model || '';
			if (model && children.every(function (c) { return c.value !== model; })) {
				children.push({ value: model, label: model });
			}
		});
		return Object.keys(map).map(function (k) { return map[k]; });
	}, [listData]);

	var filteredList = useMemo(function () {
		var val = filterCascaderValue[0];
		if (!val || !Array.isArray(val) || val.length === 0) return listData;
		var brand = val[0];
		var model = val[1];
		if (model) return listData.filter(function (r) { return r.brand === brand && r.model === model; });
		return listData.filter(function (r) { return r.brand === brand; });
	}, [listData, filterCascaderValue[0]]);

	function fmtCost(v) {
		var n = typeof v === 'number' ? v : parseFloat(v);
		return (isNaN(n) ? '0.00' : n.toFixed(2)) + '元';
	}

	function saveRow(id) {
		var r = parseFloat(editRental);
		var s = parseFloat(editSelfOperated);
		if (isNaN(r) || r < 0 || isNaN(s) || s < 0) {
			message.warning('请输入有效的日成本（元），支持两位小数');
			return;
		}
		setListData(function (prev) {
			return prev.map(function (row) {
				if (row.id !== id) return row;
				var o = {}; for (var k in row) o[k] = row[k];
				o.rentalCostPerDay = Math.round(r * 100) / 100;
				o.selfOperatedCostPerDay = Math.round(s * 100) / 100;
				return o;
			});
		});
		setEditingKey(null);
		setEditRental('');
		setEditSelfOperated('');
		message.success('保存成功');
	}

	function cancelEdit() {
		setEditingKey(null);
		setEditRental('');
		setEditSelfOperated('');
	}

	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
	var cardStyle = { marginBottom: 16 };
	var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
	var filterItemStyle = { marginBottom: 12 };
	var filterControlStyle = { width: '100%', maxWidth: 320 };

	var columns = [
		{ title: '序号', key: 'idx', width: 72, align: 'center', render: function (_, __, index) { return index + 1; } },
		{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 120, ellipsis: true, render: function (v) { return v || '—'; } },
		{ title: '型号', dataIndex: 'model', key: 'model', width: 160, ellipsis: true, render: function (v) { return v || '—'; } },
		{
			title: '租赁车辆日成本',
			dataIndex: 'rentalCostPerDay',
			key: 'rentalCostPerDay',
			width: 160,
			align: 'right',
			render: function (v, record) {
				var id = record.id;
				var isEditing = editingKey === id;
				if (isEditing) {
					return React.createElement(Input, {
						type: 'number',
						step: 0.01,
						min: 0,
						value: editRental,
						onChange: function (e) { setEditRental(e.target.value); },
						style: { width: 120, textAlign: 'right' },
						addonAfter: '元'
					});
				}
				return fmtCost(v);
			}
		},
		{
			title: '自营车辆日成本',
			dataIndex: 'selfOperatedCostPerDay',
			key: 'selfOperatedCostPerDay',
			width: 160,
			align: 'right',
			render: function (v, record) {
				var id = record.id;
				var isEditing = editingKey === id;
				if (isEditing) {
					return React.createElement(Input, {
						type: 'number',
						step: 0.01,
						min: 0,
						value: editSelfOperated,
						onChange: function (e) { setEditSelfOperated(e.target.value); },
						style: { width: 120, textAlign: 'right' },
						addonAfter: '元'
					});
				}
				return fmtCost(v);
			}
		},
		{
			title: '操作',
			key: 'action',
			width: 140,
			render: function (_, record) {
				var isEditing = editingKey === record.id;
				if (isEditing) {
					return React.createElement(Space, { size: 'small' },
						React.createElement(Button, { type: 'link', size: 'small', onClick: function () { saveRow(record.id); } }, '保存'),
						React.createElement(Button, { type: 'link', size: 'small', onClick: cancelEdit }, '取消')
					);
				}
				return React.createElement(Button, {
					type: 'link',
					size: 'small',
					onClick: function () {
						setEditingKey(record.id);
						setEditRental(record.rentalCostPerDay != null ? String(record.rentalCostPerDay) : '');
						setEditSelfOperated(record.selfOperatedCostPerDay != null ? String(record.selfOperatedCostPerDay) : '');
					}
				}, '编辑');
			}
		}
	];

	var requirementContent = '车辆成本维护（2026年3月12日版本）\n一个「数字化资产ONEOS运管平台」中的「车辆成本维护」模块\n#面包屑：业务管理-车辆成本维护；\n\n页面分为2个卡片；\n1.筛选：\n#支持车辆品牌、型号筛选；\n1.1.型号：级联选择器，支持品牌、型号级联；\n\n2.车辆成本列表：列表默认显示当前系统中所有品牌和型号记录，如型号参数表有新增，则该处同步新增一条数据；\n2.1.品牌：显示车辆品牌；\n2.2.型号：显示车辆型号（如18吨双飞翼，而不是公告型号）；\n2.3.租赁车辆日成本：显示格式为：xx.xx元，支持两位小数；\n2.4.自营车辆日成本：显示格式为：xx.xx元，支持两位小数；\n2.5.操作：编辑；';

	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: '车辆成本维护' }
				]
			}),
			React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](true); } }, '查看需求说明')
		),
		React.createElement(Card, { title: '筛选', style: cardStyle },
			React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 16 } },
				React.createElement('div', { style: filterItemStyle },
					React.createElement('div', { style: filterLabelStyle }, '型号'),
					React.createElement(Cascader, {
						options: cascaderOptions,
						value: filterCascaderValue[0],
						onChange: function (v) { filterCascaderValue[1](v); },
						placeholder: '请选择品牌 / 型号',
						allowClear: true,
						style: filterControlStyle,
						changeOnSelect: true
					})
				),
				React.createElement('div', { style: { display: 'flex', gap: 8 } },
					React.createElement(Button, { onClick: function () { filterCascaderValue[1](undefined); } }, '重置'),
					React.createElement(Button, { type: 'primary' }, '查询')
				)
			)
		),
		React.createElement(Card, { title: '车辆成本列表', style: cardStyle },
			React.createElement(Table, {
				rowKey: 'id',
				columns: columns,
				dataSource: filteredList,
				pagination: { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } },
				size: 'middle',
				bordered: true
			})
		),
		React.createElement(Modal, {
			title: '需求说明',
			open: requirementModalVisible[0],
			onCancel: function () { requirementModalVisible[1](false); },
			width: 560,
			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))
	);
};