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

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 Select = antd.Select;
	var Input = antd.Input;
	var Button = antd.Button;
	var Modal = antd.Modal;
	var message = antd.message;
	var DatePicker = antd.DatePicker;

	// 模拟：进行中的车辆租赁合同列表（选项目后反写合同信息）
	var contractList = [
		{ projectId: 'p1', projectName: '嘉兴氢能示范项目', contractCode: 'HT-ZL-2025-001', customerName: '嘉兴某某物流有限公司', contactPerson: '张三', signDate: '2025-01-15', contactPhone: '13800138001', businessDept: '业务1部', businessPerson: '张经理' },
		{ projectId: 'p2', projectName: '上海物流租赁项目', contractCode: 'HT-ZL-2025-002', customerName: '上海某某运输公司', contactPerson: '李四', signDate: '2025-02-01', contactPhone: '13800138002', businessDept: '业务2部', businessPerson: '李专员' },
		{ projectId: 'p3', projectName: '杭州城配租赁项目', contractCode: 'HT-ZL-2025-003', customerName: '杭州某某租赁有限公司', contactPerson: '王五', signDate: '2025-02-10', contactPhone: '13800138003', businessDept: '业务3部', businessPerson: '王专员' }
	];

	// 模拟：按合同对应的已交车未还车车辆（项目 p1 下）
	var originalPlateByProject = {
		p1: [
			{ plateNo: '浙A12345', vin: 'LGHXCAE28M1234567', brand: '东风', model: 'DFH1180' },
			{ plateNo: '浙A55555', vin: 'LGHXCAE28M5555555', brand: '重汽', model: 'ZZ1160' }
		],
		p2: [
			{ plateNo: '浙B11111', vin: 'LGHXCAE28M7654321', brand: '江淮', model: 'HFC1180' }
		],
		p3: [
			{ plateNo: '浙C33333', vin: 'LGHXCAE28M8888888', brand: '东风', model: 'DFH1190' }
		]
	};

	// 模拟：当前人员权限下已备车车辆
	var replacePlateOptions = [
		{ plateNo: '浙A67890', vin: 'LGHXCAE28M6789012', brand: '福田', model: 'BJ1180' },
		{ plateNo: '浙B22222', vin: 'LGHXCAE28M2222222', brand: '重汽', model: 'ZZ1180' },
		{ plateNo: '浙C44444', vin: 'LGHXCAE28M4444444', brand: '福田', model: 'BJ1190' },
		{ plateNo: '浙A66666', vin: 'LGHXCAE28M6666666', brand: '江淮', model: 'HFC1190' },
		{ plateNo: '浙F88888', vin: 'LGHXCAE28M8888888', brand: '东风', model: 'DFH1180' }
	];

	var projectOptions = contractList.map(function (c) {
		return { value: c.projectId, label: c.projectName };
	});

	var formState = useState({
		projectId: undefined,
		contractCode: '',
		customerName: '',
		contactPerson: '',
		signDate: '',
		contactPhone: '',
		businessDept: '',
		businessPerson: '',
		replaceDate: null,
		replaceType: undefined,
		replaceReason: undefined,
		replaceReasonDesc: '',
		originalPlate: undefined,
		originalVin: '',
		originalBrand: '',
		originalModel: '',
		replacePlate: undefined,
		replaceVin: '',
		replaceBrand: '',
		replaceModel: ''
	});
	var form = formState[0];
	var setForm = formState[1];
	var editedState = useState(false);
	var setEdited = editedState[1];
	var cancelModalVisible = useState(false);
	var setCancelModalVisible = cancelModalVisible[1];
	var requirementModalVisible = useState(false);
	var setRequirementModalVisible = requirementModalVisible[1];

	var selectedContract = useMemo(function () {
		if (!form.projectId) return null;
		return contractList.find(function (c) { return c.projectId === form.projectId; }) || null;
	}, [form.projectId]);

	var originalPlateList = useMemo(function () {
		if (!form.projectId) return [];
		return (originalPlateByProject[form.projectId] || []).map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
	}, [form.projectId]);

	var replacePlateSelectOptions = useMemo(function () {
		return replacePlateOptions.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
	}, []);

	var onProjectChange = useCallback(function (projectId) {
		setEdited(true);
		var contract = contractList.find(function (c) { return c.projectId === projectId; });
		setForm(function (prev) {
			var next = {};
			for (var k in prev) next[k] = prev[k];
			next.projectId = projectId;
			next.contractCode = contract ? contract.contractCode : '';
			next.customerName = contract ? contract.customerName : '';
			next.contactPerson = contract ? contract.contactPerson : '';
			next.signDate = contract ? contract.signDate : '';
			next.contactPhone = contract ? contract.contactPhone : '';
			next.businessDept = contract ? contract.businessDept : '';
			next.businessPerson = contract ? contract.businessPerson : '';
			next.originalPlate = undefined;
			next.originalVin = '';
			next.originalBrand = '';
			next.originalModel = '';
			return next;
		});
	}, []);

	var onOriginalPlateChange = useCallback(function (plateNo) {
		setEdited(true);
		var list = form.projectId ? (originalPlateByProject[form.projectId] || []) : [];
		var vehicle = list.find(function (v) { return v.plateNo === plateNo; });
		setForm(function (prev) {
			var next = {};
			for (var k in prev) next[k] = prev[k];
			next.originalPlate = plateNo;
			next.originalVin = vehicle ? vehicle.vin : '';
			next.originalBrand = vehicle ? vehicle.brand : '';
			next.originalModel = vehicle ? vehicle.model : '';
			return next;
		});
	}, [form.projectId]);

	var onReplacePlateChange = useCallback(function (plateNo) {
		setEdited(true);
		var vehicle = replacePlateOptions.find(function (v) { return v.plateNo === plateNo; });
		setForm(function (prev) {
			var next = {};
			for (var k in prev) next[k] = prev[k];
			next.replacePlate = plateNo;
			next.replaceVin = vehicle ? vehicle.vin : '';
			next.replaceBrand = vehicle ? vehicle.brand : '';
			next.replaceModel = vehicle ? vehicle.model : '';
			return next;
		});
	}, []);

	var handleSubmit = useCallback(function () {
		message.success('替换车申请已提交审核');
	}, []);

	var handleSave = useCallback(function () {
		message.success('已保存，该条数据仅您可查看并编辑（原型）');
	}, []);

	var handleCancel = useCallback(function () {
		if (editedState[0]) {
			setCancelModalVisible(true);
		} else {
			message.info('返回替换车管理列表（原型）');
		}
	}, [editedState[0]]);

	var confirmCancel = useCallback(function () {
		setCancelModalVisible(false);
		message.info('已取消，返回替换车管理列表（原型）');
	}, []);

	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 requirementContent = '替换车管理-新增（2026年3月3日版本）\n一个「数字化资产ONEOS运管平台」中的「运维管理」「车辆业务」「替换车管理」「新增」模块\n1.面包屑：\n#运维管理-车辆业务-替换车管理-新增\n页面由选择项目、替换车详情、两个单独卡片组成；\n\n2.选择项目：\n#可通过选择进行中的车辆租赁合同，拉取租赁合同中对应车辆进行替换；\n2.1.项目名称：选择器，可选择所有进行中的合同，支持输入框中输入关键词进行模糊搜索，下拉显示对应项；\n2.2.合同编码：根据项目名称自动反查，不可编辑；\n2.3.客户名称：根据项目名称自动反查，不可编辑；\n2.4.对接人：根据项目名称自动反查，不可编辑；\n2.5.合同签订时间：根据项目名称自动反查，不可编辑；\n2.6.客户联系电话：根据项目名称自动反查，不可编辑；\n2.7.业务部门：根据项目名称自动反查，不可编辑；\n2.8.业务人员：根据项目名称自动反查，不可编辑；\n\n3.替换车详情：\n3.1.替换时间：日期选择器，格式为：YYYY-MM-DD，精确至天；\n3.2.替换类型：选择器，分为「永久替换」「临时替换」两个选项；\n    3.2.1.类型为永久替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），由运维手动将被替换车进行还车；\n    3.2.2.类型为临时替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），被替换车不用还车，在被替换车重新交付客户时，由运维手动将替换车进行还车；\n    重新生成交车任务时，交车地点会自动继承自合同，由对应区域运维人员才能操作；\n    交车任务完成后，所有涉及到被替换车辆显示（例如车辆租赁合同、租赁账单、提车应收款等功能）会替换为新替换车的对应信息，如果是临时替换，在新替换车完成还车后，对应车辆记录会恢复为原有车辆数据。如果是永久替换，则由运维自主进行被替换车辆还车；\n3.3.替换原因：选择器，分为「客户原因」「车辆原因」；\n3.4.替换原因说明：文本域，默认提示信息为：请说明替换原因；\n3.5.被替换车牌号：选择器，只能选择该租赁合同当前对应的已交车但未还车车牌号，已被替换但替换车申请还在审核中时，该车辆不可选；\n3.6.被替换车识别代码：输入框（禁用），选择被替换车车牌号后自动反写该车识别代码；\n3.7.被替换车品牌：输入框（禁用），选择被替换车车牌号后自动反写该车品牌；\n3.8.被替换车型号：输入框（禁用），选择被替换车车牌号后自动反写该车型号；\n3.9.替换车车牌号：选择器，只能选择该人员权限下所有已备车车辆，在选择项目名称前，不能选择替换车车牌号；\n3.10.替换车识别代码：输入框（禁用），选择替换车车牌号后自动反写该车识别代码；\n3.11.替换车品牌：输入框（禁用），选择替换车车牌号后自动反写该车品牌；\n3.12.替换车型号：输入框（禁用），选择替换车车牌号后自动反写该车型号；\n\n下方为提交审核、保存、取消按钮；\n4.1.点击提交并审核，toast提示：替换车申请已提交审核；\n4.2.点击保存，会存储租赁订单已填写内容，不做必填项校验，同时显示在租赁合同列表中（待审批），该条数据只能保存人自己查看并编辑，其他人无法操作；\n4.3.点击取消，如当前页面有已编辑内容时，点击取消会进行二次提示，内容为：取消将会丢失所有已填写内容，是否确认？点击确认返回替换车管理列表页；\n';

	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: '替换车管理' },
					{ title: '新增' }
				]
			}),
			React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明')
		),
		React.createElement(Card, { title: '选择项目', style: cardStyle },
			React.createElement('div', { style: formRowStyle },
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '项目名称'),
					React.createElement(Select, {
						placeholder: '请选择或输入项目名称',
						style: { width: '100%' },
						value: form.projectId,
						onChange: onProjectChange,
						allowClear: true,
						showSearch: true,
						options: projectOptions,
						filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
					})
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '合同编码'),
					React.createElement(Input, { value: form.contractCode || '', disabled: true, placeholder: '根据项目名称自动反查' })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '客户名称'),
					React.createElement(Input, { value: form.customerName || '', disabled: true, placeholder: '根据项目名称自动反查' })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '对接人'),
					React.createElement(Input, { value: form.contactPerson || '', disabled: true, placeholder: '根据项目名称自动反查' })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '合同签订时间'),
					React.createElement(Input, { value: form.signDate || '', disabled: true, placeholder: '根据项目名称自动反查' })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '客户联系电话'),
					React.createElement(Input, { value: form.contactPhone || '', disabled: true, placeholder: '根据项目名称自动反查' })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '业务部门'),
					React.createElement(Input, { value: form.businessDept || '', disabled: true, placeholder: '根据项目名称自动反查' })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '业务人员'),
					React.createElement(Input, { value: form.businessPerson || '', disabled: true, placeholder: '根据项目名称自动反查' })
				)
			)
		),
		React.createElement(Card, { title: '替换车详情', style: cardStyle },
			React.createElement('div', { style: formRowStyle },
				React.createElement('div', { style: formItemStyle },
							React.createElement('div', { style: labelStyle }, '替换时间'),
							React.createElement(DatePicker, {
								placeholder: '请选择日期',
								style: { width: '100%' },
								format: 'YYYY-MM-DD',
								value: form.replaceDate,
								onChange: function (d) {
									setEdited(true);
									setForm(function (p) {
										var n = {};
										for (var k in p) n[k] = p[k];
										n.replaceDate = d;
										return n;
									});
								},
								allowClear: true
							})
						),
						React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '替换类型'),
					React.createElement(Select, {
						placeholder: '请选择',
						style: { width: '100%' },
						value: form.replaceType,
						onChange: function (v) { setEdited(true); setForm(function (p) { var n = {}; for (var k in p) n[k] = p[k]; n.replaceType = v; return n; }); },
						allowClear: true,
						options: [{ value: '永久替换', label: '永久替换' }, { value: '临时替换', label: '临时替换' }]
					})
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '替换原因'),
					React.createElement(Select, {
						placeholder: '请选择',
						style: { width: '100%' },
						value: form.replaceReason,
						onChange: function (v) { setEdited(true); setForm(function (p) { var n = {}; for (var k in p) n[k] = p[k]; n.replaceReason = v; return n; }); },
						allowClear: true,
						options: [{ value: '客户原因', label: '客户原因' }, { value: '车辆原因', label: '车辆原因' }]
					})
				),
				React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
					React.createElement('div', { style: labelStyle }, '替换原因说明'),
					React.createElement(Input.TextArea, {
						placeholder: '请说明替换原因',
						value: form.replaceReasonDesc || '',
						onChange: function (e) { setEdited(true); setForm(function (p) { var n = {}; for (var k in p) n[k] = p[k]; n.replaceReasonDesc = e.target.value; return n; }); },
						rows: 3,
						style: { width: '100%' }
					})
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '被替换车牌号'),
					React.createElement(Select, {
						placeholder: '请选择该合同已交车未还车车牌号',
						style: { width: '100%' },
						value: form.originalPlate,
						onChange: onOriginalPlateChange,
						allowClear: true,
						options: originalPlateList,
						disabled: !form.projectId
					})
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '被替换车识别代码'),
					React.createElement(Input, { value: form.originalVin || '', disabled: true })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '被替换车品牌'),
					React.createElement(Input, { value: form.originalBrand || '', disabled: true })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '被替换车型号'),
					React.createElement(Input, { value: form.originalModel || '', disabled: true })
				),
				React.createElement('div', { style: { gridColumn: '1 / -1', width: '100%' } }),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '替换车车牌号'),
					React.createElement(Select, {
						placeholder: '请选择已备车车辆',
						style: { width: '100%' },
						value: form.replacePlate,
						onChange: onReplacePlateChange,
						allowClear: true,
						showSearch: true,
						options: replacePlateSelectOptions,
						filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; },
						disabled: !form.projectId
					})
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '替换车识别代码'),
					React.createElement(Input, { value: form.replaceVin || '', disabled: true })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '替换车品牌'),
					React.createElement(Input, { value: form.replaceBrand || '', disabled: true })
				),
				React.createElement('div', { style: formItemStyle },
					React.createElement('div', { style: labelStyle }, '替换车型号'),
					React.createElement(Input, { value: form.replaceModel || '', disabled: true })
				)
			),
			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: requirementModalVisible[0],
			onCancel: function () { setRequirementModalVisible(false); },
			width: 720,
			footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(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))
		),
		React.createElement(Modal, {
			title: '取消将会丢失所有已填写内容，是否确认？',
			open: cancelModalVisible[0],
			onCancel: function () { setCancelModalVisible(false); },
			onOk: confirmCancel,
			okText: '确认',
			cancelText: '返回'
		})
	);
};