// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 异动管理 - 查看（只读）

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

	var antd = window.antd;
	var App = antd.App;
	var Breadcrumb = antd.Breadcrumb;
	var Card = antd.Card;
	var Button = antd.Button;
	var Input = antd.Input;
	var Select = antd.Select;
	var DatePicker = antd.DatePicker;
	var Table = antd.Table;
	var Modal = antd.Modal;
	var message = antd.message;

	function getInitialDateTime(str) {
		try {
			if (window.dayjs) return window.dayjs(str);
		} catch (e1) {}
		try {
			if (window.moment) return window.moment(str, 'YYYY-MM-DD HH:mm');
		} catch (e2) {}
		return null;
	}

	var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
	var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
	var formItemStyle = { marginBottom: 12 };
	var controlStyle = { width: '100%' };

	var destinationTypeOptions = useMemo(function () {
		return [
			{ value: '停车场', label: '停车场' },
			{ value: '维修站', label: '维修站' },
			{ value: '其他', label: '其他' }
		];
	}, []);

	var destinationParkingOptions = useMemo(function () {
		return [
			{ value: '天河智慧停车场', label: '天河智慧停车场' },
			{ value: '南山科技园停车场', label: '南山科技园停车场' },
			{ value: '西湖景区停车场', label: '西湖景区停车场' },
			{ value: '宁波江北停车场', label: '宁波江北停车场' },
			{ value: '张江园区停车场', label: '张江园区停车场' }
		];
	}, []);

	var destinationRepairOptions = useMemo(function () {
		return [
			{ value: '杭州拱墅维修站', label: '杭州拱墅维修站' },
			{ value: '广州天河维修站', label: '广州天河维修站' },
			{ value: '上海浦东维修站', label: '上海浦东维修站' }
		];
	}, []);

	var changeTypeOptions = useMemo(function () {
		return [
			{ value: '维修', label: '维修' },
			{ value: '保养', label: '保养' },
			{ value: '年审', label: '年审' },
			{ value: '其他', label: '其他' }
		];
	}, []);

	var approvalStatusOptions = useMemo(function () {
		return [
			{ value: '待提交', label: '待提交' },
			{ value: '审批中', label: '审批中' },
			{ value: '审批完成', label: '审批完成' },
			{ value: '驳回', label: '驳回' },
			{ value: '撤回', label: '撤回' }
		];
	}, []);

	// 原型：详情接口返回的只读数据（字段与「异动管理.新增」一致，并含审批状态）
	var form = {
		startTime: getInitialDateTime('2026-02-20 09:30'),
		plannedEndTime: getInitialDateTime('2026-02-22 18:00'),
		destinationType: '维修站',
		destinationName: '广州天河维修站',
		destinationNameOther: '',
		changeType: '维修',
		plannedMileageKm: '45.50',
		remark: '车辆需进站检修制动系统，预计两日内完成。',
		approvalStatus: '审批中'
	};

	var vehicles = [
		{
			id: 1,
			plateNo: '粤A12345',
			vehicleType: '厢式货车',
			brand: '东风',
			model: 'DFH1180',
			departParking: '天河智慧停车场',
			startMileageKm: '15230.12',
			startHydrogen: '28.30',
			h2Unit: 'MPa',
			startElectricKwh: '68.40'
		},
		{
			id: 2,
			plateNo: '浙A11111',
			vehicleType: 'SUV',
			brand: '小鹏',
			model: 'P7',
			departParking: '西湖景区停车场',
			startMileageKm: '12010.00',
			startHydrogen: '60.00',
			h2Unit: '%',
			startElectricKwh: '55.20'
		}
	];

	var destinationNameLabel = form.destinationType === '维修站' ? '维修站' : (form.destinationType === '停车场' ? '停车场' : '目的地名称');

	var destinationNameNode = (function () {
		if (form.destinationType === '其他') {
			return React.createElement(Input, {
				value: form.destinationNameOther || '-',
				disabled: true
			});
		}
		var opts = form.destinationType === '维修站' ? destinationRepairOptions : destinationParkingOptions;
		return React.createElement(Select, {
			style: controlStyle,
			value: form.destinationName,
			options: opts,
			disabled: true
		});
	})();

	var requirementModalState = useState(false);
	var requirementModalOpen = requirementModalState[0];
	var setRequirementModalOpen = requirementModalState[1];

	var requirementDocContent = [
		'一个「数字化资产ONEOS运管平台」中的「异动管理」「查看」模块',
		'#面包屑：运维管理-车辆业务-异动管理-查看',
		'页面布局与字段与「异动管理.新增」一致，所有表单项均为只读，仅供查询展示。',
		'',
		'1.异动情况：异动开始/预计结束日期、审批状态、异动目的地、目的地名称、异动类型、预计异动里程、备注 — 全部禁用不可编辑。',
		'2.车辆信息：车牌号、车辆类型、品牌、型号、出发停车场、异动开始里程、异动开始氢量、异动开始电量 — 全部禁用；无新增行与删除操作。',
		'3.底部仅提供「返回」按钮，返回异动管理列表（原型）。'
	].join('\n');

	var vehicleColumns = useMemo(function () {
		return [
			{
				title: '车牌号',
				key: 'plateNo',
				width: 140,
				render: function (_, r) {
					return React.createElement(Input, { value: r.plateNo || '-', disabled: true });
				}
			},
			{
				title: '车辆类型',
				key: 'vehicleType',
				width: 120,
				render: function (_, r) {
					return React.createElement(Input, { value: r.vehicleType || '-', disabled: true });
				}
			},
			{
				title: '品牌',
				key: 'brand',
				width: 100,
				render: function (_, r) {
					return React.createElement(Input, { value: r.brand || '-', disabled: true });
				}
			},
			{
				title: '型号',
				key: 'model',
				width: 120,
				render: function (_, r) {
					return React.createElement(Input, { value: r.model || '-', disabled: true });
				}
			},
			{
				title: '出发停车场',
				key: 'departParking',
				width: 160,
				render: function (_, r) {
					return React.createElement(Input, { value: r.departParking || '-', disabled: true });
				}
			},
			{
				title: '异动开始里程',
				key: 'startMileageKm',
				width: 160,
				render: function (_, r) {
					return React.createElement(Input, { value: r.startMileageKm || '-', disabled: true, addonAfter: 'km' });
				}
			},
			{
				title: '异动开始氢量',
				key: 'startHydrogen',
				width: 150,
				render: function (_, r) {
					var unit = r.h2Unit || '';
					return React.createElement(Input, { value: r.startHydrogen || '-', disabled: true, addonAfter: unit || '-' });
				}
			},
			{
				title: '异动开始电量',
				key: 'startElectricKwh',
				width: 150,
				render: function (_, r) {
					return React.createElement(Input, { value: r.startElectricKwh || '-', disabled: true, addonAfter: 'kWh' });
				}
			}
		];
	}, []);

	return React.createElement(App, null,
		React.createElement('div', { style: layoutStyle },
			React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
				React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '异动管理' }, { title: '查看' }] }),
				React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
			),

			React.createElement(Modal, {
				title: '需求说明',
				open: requirementModalOpen,
				onCancel: function () { setRequirementModalOpen(false); },
				width: 720,
				footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
				bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
			}, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),

			React.createElement(Card, { title: '异动情况', style: { marginBottom: 16 } },
				React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '异动开始日期'),
						React.createElement(DatePicker, {
							style: controlStyle,
							showTime: { format: 'HH:mm' },
							format: 'YYYY-MM-DD HH:mm',
							value: form.startTime,
							disabled: true,
							inputReadOnly: true
						})
					),
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '异动预计结束日期'),
						React.createElement(DatePicker, {
							style: controlStyle,
							showTime: { format: 'HH:mm' },
							format: 'YYYY-MM-DD HH:mm',
							value: form.plannedEndTime,
							disabled: true,
							inputReadOnly: true
						})
					),
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '审批状态'),
						React.createElement(Select, {
							style: controlStyle,
							value: form.approvalStatus,
							options: approvalStatusOptions,
							disabled: true
						})
					),

					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '异动目的地'),
						React.createElement(Select, {
							style: controlStyle,
							value: form.destinationType,
							options: destinationTypeOptions,
							disabled: true
						})
					),
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, destinationNameLabel),
						destinationNameNode
					),
					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '异动类型'),
						React.createElement(Select, {
							style: controlStyle,
							value: form.changeType,
							options: changeTypeOptions,
							disabled: true
						})
					),

					React.createElement('div', { style: formItemStyle },
						React.createElement('div', { style: labelStyle }, '预计异动里程'),
						React.createElement(Input, {
							value: form.plannedMileageKm || '-',
							disabled: true,
							addonAfter: 'km'
						})
					),
					React.createElement('div', { style: formItemStyle }),
					React.createElement('div', { style: formItemStyle }),

					React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
						React.createElement('div', { style: labelStyle }, '备注'),
						React.createElement(Input.TextArea, {
							value: form.remark || '-',
							disabled: true,
							autoSize: { minRows: 3, maxRows: 6 }
						})
					)
				)
			),

			React.createElement(Card, { title: '车辆信息', style: { marginBottom: 16 } },
				React.createElement(Table, {
					rowKey: 'id',
					columns: vehicleColumns,
					dataSource: vehicles,
					size: 'small',
					pagination: false,
					scroll: { x: 1180 }
				})
			),

			React.createElement('div', { style: { height: 56 } }),
			React.createElement('div', {
				style: {
					position: 'fixed',
					left: 0,
					right: 0,
					bottom: 0,
					padding: '12px 24px',
					background: '#fff',
					borderTop: '1px solid #f0f0f0',
					display: 'flex',
					gap: 8,
					zIndex: 10
				}
			},
				React.createElement(Button, { onClick: function () { message.info('返回异动管理列表（原型）'); } }, '返回')
			)
		)
	);
};