// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 替换车管理 - 新增

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

	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 Tag = antd.Tag;
	var Empty = antd.Empty;

	var pairIdRef = useRef(1);

	function createEmptyPair() {
		pairIdRef.current += 1;
		return {
			id: 'pair_' + pairIdRef.current,
			replaceType: undefined,
			replaceReason: undefined,
			replaceReasonDesc: '',
			originalPlate: undefined,
			originalVin: '',
			originalBrand: '',
			originalModel: '',
			contractId: '',
			replacePlate: undefined,
			replaceVin: '',
			replaceBrand: '',
			replaceModel: ''
		};
	}

	var EMPTY_PROJECT = {
		contractId: '',
		projectId: '',
		projectName: '',
		projectType: '',
		customerName: '',
		contractCode: '',
		deliveryRegion: ''
	};

	// 模拟：合同状态为「合同进行中」的租赁合同
	var activeContracts = [
		{
			contractId: 'c1',
			contractStatus: '合同进行中',
			projectId: 'p1',
			projectName: '嘉兴氢能示范项目',
			projectType: '租赁',
			contractCode: 'HT-ZL-2025-001',
			customerName: '嘉兴某某物流有限公司',
			deliveryRegion: '浙江省-嘉兴市'
		},
		{
			contractId: 'c2',
			contractStatus: '合同进行中',
			projectId: 'p2',
			projectName: '上海物流租赁项目',
			projectType: '租赁',
			contractCode: 'HT-ZL-2025-002',
			customerName: '上海某某运输公司',
			deliveryRegion: '上海市-上海市'
		},
		{
			contractId: 'c3',
			contractStatus: '合同进行中',
			projectId: 'p3',
			projectName: '杭州城配自营项目',
			projectType: '自营',
			contractCode: 'HT-ZY-2025-003',
			customerName: '杭州某某租赁有限公司',
			deliveryRegion: '浙江省-杭州市'
		}
	];

	var deliveredVehicles = [
		{ plateNo: '浙A12345', vin: 'LGHXCAE28M1234567', brand: '东风', model: 'DFH1180', contractId: 'c1', vehicleStatus: '已交车' },
		{ plateNo: '浙A55555', vin: 'LGHXCAE28M5555555', brand: '重汽', model: 'ZZ1160', contractId: 'c1', vehicleStatus: '已交车' },
		{ plateNo: '沪B11111', vin: 'LGHXCAE28M7654321', brand: '江淮', model: 'HFC1180', contractId: 'c2', vehicleStatus: '已交车' },
		{ plateNo: '浙C33333', vin: 'LGHXCAE28M8888888', brand: '东风', model: 'DFH1190', contractId: 'c3', vehicleStatus: '已交车' }
	];

	var preparedVehiclesByRegion = {
		'浙江省-嘉兴市': [
			{ plateNo: '浙A67890', vin: 'LGHXCAE28M6789012', brand: '福田', model: 'BJ1180', vehicleStatus: '已备车' },
			{ plateNo: '浙A66666', vin: 'LGHXCAE28M6666666', brand: '江淮', model: 'HFC1190', vehicleStatus: '已备车' },
			{ plateNo: '浙F88888', vin: 'LGHXCAE28M8888888', brand: '东风', model: 'DFH1180', vehicleStatus: '已备车' }
		],
		'上海市-上海市': [
			{ plateNo: '沪B22222', vin: 'LGHXCAE28M2222222', brand: '重汽', model: 'ZZ1180', vehicleStatus: '已备车' },
			{ plateNo: '沪B33333', vin: 'LGHXCAE28M3333333', brand: '福田', model: 'BJ1190', vehicleStatus: '已备车' }
		],
		'浙江省-杭州市': [
			{ plateNo: '浙C44444', vin: 'LGHXCAE28M4444444', brand: '东风', model: 'DFH1180', vehicleStatus: '已备车' }
		]
	};

	var contractById = useMemo(function () {
		var map = {};
		activeContracts.forEach(function (c) {
			if (c.contractStatus === '合同进行中') map[c.contractId] = c;
		});
		return map;
	}, []);

	var pairsState = useState(function () { return []; });
	var pairs = pairsState[0];
	var setPairs = pairsState[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 projectInfo = useMemo(function () {
		var anchor = pairs.find(function (p) { return p.originalPlate && p.contractId; });
		if (!anchor || !anchor.contractId) return EMPTY_PROJECT;
		var c = contractById[anchor.contractId];
		if (!c) return EMPTY_PROJECT;
		return {
			contractId: c.contractId,
			projectId: c.projectId,
			projectName: c.projectName,
			projectType: c.projectType,
			customerName: c.customerName,
			contractCode: c.contractCode,
			deliveryRegion: c.deliveryRegion
		};
	}, [pairs, contractById]);

	var plateFilterOption = useCallback(function (input, opt) {
		return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1;
	}, []);

	var getDeliveredVehicle = useCallback(function (plateNo) {
		return deliveredVehicles.find(function (v) { return v.plateNo === plateNo; }) || null;
	}, []);

	var getUsedPlates = useCallback(function (pairsList, field, exceptPairId) {
		var set = {};
		pairsList.forEach(function (p) {
			if (p.id === exceptPairId) return;
			if (p[field]) set[p[field]] = true;
		});
		return set;
	}, []);

	var selectedOriginalPlates = useMemo(function () {
		return pairs.map(function (p) { return p.originalPlate; }).filter(Boolean);
	}, [pairs]);

	var multiOldPlateOptions = useMemo(function () {
		var lockedContractId = projectInfo.contractId;
		return deliveredVehicles
			.filter(function (v) {
				if (v.vehicleStatus !== '已交车' || !contractById[v.contractId]) return false;
				if (lockedContractId && v.contractId !== lockedContractId) return false;
				return true;
			})
			.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
	}, [projectInfo.contractId, contractById]);

	var getNewOptionsForPair = useCallback(function (pair) {
		if (!projectInfo.deliveryRegion) return [];
		var used = getUsedPlates(pairs, 'replacePlate', pair.id);
		var list = preparedVehiclesByRegion[projectInfo.deliveryRegion] || [];
		return list
			.filter(function (v) {
				return v.vehicleStatus === '已备车' && !used[v.plateNo];
			})
			.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
	}, [pairs, projectInfo.deliveryRegion, getUsedPlates]);

	var updatePair = useCallback(function (pairId, patch) {
		setEdited(true);
		setPairs(function (prev) {
			return prev.map(function (p) {
				if (p.id !== pairId) return p;
				var next = {};
				for (var k in p) next[k] = p[k];
				for (var pk in patch) next[pk] = patch[pk];
				return next;
			});
		});
	}, []);

	var buildPairForPlate = useCallback(function (plateNo, existing) {
		var vehicle = getDeliveredVehicle(plateNo);
		if (!vehicle) return null;
		var row = existing ? Object.assign({}, existing) : createEmptyPair();
		row.originalPlate = plateNo;
		row.originalVin = vehicle.vin;
		row.originalBrand = vehicle.brand;
		row.originalModel = vehicle.model;
		row.contractId = vehicle.contractId;
		if (!existing) {
			row.replacePlate = undefined;
			row.replaceVin = '';
			row.replaceBrand = '';
			row.replaceModel = '';
		}
		return row;
	}, [getDeliveredVehicle]);

	var onMultiOriginalPlateChange = useCallback(function (plateNos) {
		var list = Array.isArray(plateNos) ? plateNos : [];
		if (list.length === 0) {
			setEdited(true);
			setPairs([]);
			return;
		}
		var anchorContractId = null;
		var validPlates = [];
		var rejected = false;
		list.forEach(function (plate) {
			var vehicle = getDeliveredVehicle(plate);
			if (!vehicle || !contractById[vehicle.contractId]) return;
			if (!anchorContractId) anchorContractId = vehicle.contractId;
			if (vehicle.contractId !== anchorContractId) {
				rejected = true;
				return;
			}
			validPlates.push(plate);
		});
		if (rejected) {
			message.warning('多台替换须为同一客户、同一项目，已忽略不同项目的车辆');
		}
		if (validPlates.length === 0) {
			setPairs([]);
			return;
		}
		setEdited(true);
		setPairs(function (prev) {
			var prevByPlate = {};
			prev.forEach(function (p) {
				if (p.originalPlate) prevByPlate[p.originalPlate] = p;
			});
			return validPlates.map(function (plate) {
				return buildPairForPlate(plate, prevByPlate[plate]);
			});
		});
	}, [getDeliveredVehicle, contractById, buildPairForPlate]);

	var onReplacePlateChange = useCallback(function (pairId, plateNo) {
		if (!plateNo) {
			updatePair(pairId, {
				replacePlate: undefined,
				replaceVin: '',
				replaceBrand: '',
				replaceModel: ''
			});
			return;
		}
		var pair = pairs.find(function (p) { return p.id === pairId; });
		if (!pair || !pair.originalPlate) {
			message.info('请先选择被替换车辆');
			return;
		}
		var list = preparedVehiclesByRegion[projectInfo.deliveryRegion] || [];
		var vehicle = list.find(function (v) { return v.plateNo === plateNo; });
		if (!vehicle) return;
		var used = getUsedPlates(pairs, 'replacePlate', pairId);
		if (used[plateNo]) {
			message.warning('该新车已在其他替换项中选择');
			return;
		}
		updatePair(pairId, {
			replacePlate: plateNo,
			replaceVin: vehicle.vin,
			replaceBrand: vehicle.brand,
			replaceModel: vehicle.model
		});
	}, [updatePair, pairs, projectInfo.deliveryRegion, getUsedPlates]);

	var handleSubmit = useCallback(function () {
		if (!pairs.length || !projectInfo.contractId) {
			message.warning('请选择被替换车辆并完善替换信息');
			return;
		}
		var incomplete = pairs.find(function (p) {
			return !p.originalPlate || !p.replacePlate || !p.replaceType || !p.replaceReason;
		});
		if (incomplete) {
			message.warning('请完善每条替换的新车、替换类型与替换原因');
			return;
		}
		message.success('已提交 ' + pairs.length + ' 条替换车申请（原型）');
	}, [pairs, projectInfo.contractId]);

	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 pageCss =
		'.vr-add-page{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}' +
		'.vr-add-page .vr-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}' +
		'.vr-add-page .vr-main-card{border-radius:16px;border:none;box-shadow:0 4px 24px -6px rgba(15,23,42,0.08),0 0 0 1px rgba(15,23,42,0.05)}' +
		'.vr-add-page .vr-main-card>.ant-card-head{border-bottom:1px solid #f1f5f9;padding:16px 24px;min-height:auto}' +
		'.vr-add-page .vr-main-card>.ant-card-head .ant-card-head-title{font-size:16px;font-weight:600;color:#0f172a;padding:0}' +
		'.vr-add-page .vr-main-card>.ant-card-body{padding:20px 24px 24px}' +
		'.vr-add-page .vr-pair-list{display:flex;flex-direction:column;gap:16px}' +
		'.vr-add-page .vr-pair-card{border-radius:12px;border:1px solid #e2e8f0;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}' +
		'.vr-add-page .vr-pair-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px -4px rgba(22,119,255,0.12)}' +
		'.vr-add-page .vr-pair-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#f0f9ff;border-bottom:1px solid #e0f2fe}' +
		'.vr-add-page .vr-pair-card__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#0f172a}' +
		'.vr-add-page .vr-pair-card__index{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:6px;background:#1677ff;color:#fff;font-size:12px;font-weight:700}' +
		'.vr-add-page .vr-pair-card__body{padding:16px}' +
		'.vr-add-page .vr-block{margin-bottom:14px}' +
		'.vr-add-page .vr-block:last-child{margin-bottom:0}' +
		'.vr-add-page .vr-block-label{font-size:12px;font-weight:600;color:#475569;margin-bottom:10px;letter-spacing:.02em}' +
		'.vr-add-page .vr-block-label--old{color:#b45309}' +
		'.vr-add-page .vr-block-label--new{color:#047857}' +
		'.vr-add-page .vr-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}' +
		'.vr-add-page .vr-form-grid--reason .vr-field:last-child{grid-column:1/-1}' +
		'@media(max-width:900px){.vr-add-page .vr-form-grid{grid-template-columns:1fr}}' +
		'.vr-add-page .vr-field{display:flex;flex-direction:column;gap:6px;min-width:0}' +
		'.vr-add-page .vr-field__label{font-size:13px;font-weight:500;color:#334155;line-height:1.4}' +
		'.vr-add-page .vr-field__label .vr-req{color:#ef4444;margin-right:2px}' +
		'.vr-add-page .vr-swap-divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:#94a3b8;font-size:12px;font-weight:500}' +
		'.vr-add-page .vr-swap-divider::before,.vr-add-page .vr-swap-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#cbd5e1,transparent)}' +
		'.vr-add-page .vr-swap-divider__icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#eff6ff;color:#1677ff;font-size:14px;flex-shrink:0}' +
		'.vr-add-page .vr-multi-pick{margin-bottom:20px;padding:16px 18px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 2px rgba(15,23,42,0.04)}' +
		'.vr-add-page .vr-multi-pick__title{font-size:14px;font-weight:600;color:#0f172a;margin-bottom:4px}' +
		'.vr-add-page .vr-multi-pick__hint{font-size:12px;color:#64748b;margin-bottom:12px;line-height:1.5}' +
		'.vr-add-page .vr-vehicle-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;padding:12px 14px;margin-bottom:14px;border-radius:8px;background:#fffbeb;border:1px solid #fde68a}' +
		'@media(max-width:900px){.vr-add-page .vr-vehicle-summary{grid-template-columns:1fr}}' +
		'.vr-add-page .vr-pair-list-empty{padding:32px 16px;text-align:center;color:#94a3b8;font-size:13px}' +
		'.vr-add-page .vr-project-panel{margin-top:20px;padding:16px 18px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0}' +
		'.vr-add-page .vr-project-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}' +
		'.vr-add-page .vr-project-panel__title{font-size:14px;font-weight:600;color:#0f172a}' +
		'.vr-add-page .vr-project-panel__hint{font-size:12px;color:#64748b}' +
		'.vr-add-page .vr-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}' +
		'@media(max-width:900px){.vr-add-page .vr-project-grid{grid-template-columns:1fr}}' +
		'.vr-add-page .vr-readonly{display:flex;flex-direction:column;gap:4px;min-width:0}' +
		'.vr-add-page .vr-readonly__label{font-size:12px;color:#64748b;font-weight:500}' +
		'.vr-add-page .vr-readonly__value{font-size:14px;color:#0f172a;font-weight:500;word-break:break-all}' +
		'.vr-add-page .vr-readonly__value--muted{color:#94a3b8;font-weight:400}' +
		'.vr-add-page .vr-footer{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid #f1f5f9}' +
		'.vr-add-page .vr-remove-btn{color:#64748b!important}' +
		'.vr-add-page .vr-remove-btn:hover{color:#ef4444!important}' +
		'@media(prefers-reduced-motion:reduce){.vr-add-page .vr-pair-card{transition:none}}' +
		'.vr-req-doc{padding:4px 2px 8px}' +
		'.vr-req-doc__meta{font-size:12px;color:#64748b;line-height:1.6;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f1f5f9}' +
		'.vr-req-doc__section{margin-bottom:20px}' +
		'.vr-req-doc__section:last-child{margin-bottom:0}' +
		'.vr-req-doc__title{font-size:15px;font-weight:600;color:#0f172a;margin:0 0 10px;line-height:1.4}' +
		'.vr-req-doc__line{font-size:13px;color:#475569;line-height:1.75;margin:0 0 6px;padding-left:0}' +
		'.vr-req-doc__line--sub{padding-left:14px;color:#64748b}' +
		'.vr-req-doc__line:last-child{margin-bottom:0}' +
		'.vr-req-doc__tag{display:inline-block;margin:0 4px 4px 0;padding:0 6px;font-size:12px;line-height:20px;border-radius:4px;background:#f1f5f9;color:#334155}';

	function specSection(title, lines) {
		return React.createElement(
			'section',
			{ className: 'vr-req-doc__section' },
			React.createElement('h3', { className: 'vr-req-doc__title' }, title),
			(lines || []).map(function (text, i) {
				var isSub = typeof text === 'string' && (text.indexOf('　') === 0 || /^\d+\.\d+/.test(text));
				return React.createElement(
					'p',
					{
						key: i,
						className: 'vr-req-doc__line' + (isSub ? ' vr-req-doc__line--sub' : '')
					},
					text
				);
			})
		);
	}

	function renderRequirementDoc() {
		return React.createElement(
			'div',
			{ className: 'vr-req-doc' },
			React.createElement(
				'div',
				{ className: 'vr-req-doc__meta' },
				'数字化资产 ONEOS 运管平台 · 运维管理 · 车辆业务 · 替换车管理 · 新增'
			),
			specSection('1. 页面定位', [
				'用于发起车辆替换申请：将合同下已交付客户的车辆（被替换车）替换为交车区域内已备车的替换车。',
				'支持一次申请内多辆车替换，但须属于同一客户、同一项目；项目信息在页面底部统一展示一份。'
			]),
			specSection('2. 导航与入口', [
				'面包屑：运维管理 / 车辆业务 / 替换车管理 / 新增。',
				'右上角「查看需求说明」：打开本文档。',
				'主卡片标题：新增替换车；已选被替换车时展示「N 辆车」数量标签。'
			]),
			specSection('3. 被替换车辆（多选）', [
				'3.1 车牌号：必填，多选下拉，支持输入关键词模糊搜索；占位「请输入或选择车牌号，可多选」。',
				'3.2 可选范围：合同状态为「合同进行中」的合同下，车辆状态为「已交车」的全部车辆。',
				'3.3 交互：每选中一辆自动生成一条「车辆替换」明细卡片；取消勾选则移除对应卡片。',
				'3.4 约束：多选车辆须属于同一合同（同一客户、同一项目）；若混入其他项目车辆，提示「多台替换须为同一客户、同一项目，已忽略不同项目的车辆」，且仅保留同项目车辆。',
				'3.5 锁定：首辆车选定后，后续多选仅展示同一合同下的已交车车辆。',
				'3.6 未选车时，下方展示空状态：「请在上方选择被替换车辆车牌号，将自动生成替换明细」。'
			]),
			specSection('4. 车辆替换明细（每条被替换车一张卡片）', [
				'4.1 卡片标题：序号 +「车辆替换」+ 被替换车牌号；若已选替换车，展示「→ 替换车牌号」。',
				'4.2 被替换车辆信息（只读）：车牌号、品牌、型号；品牌/型号占位「选择车辆后自动显示」。',
				'4.3 替换说明',
				'　4.3.1 替换类型：必填，单选——永久替换、临时替换。',
				'　4.3.2 替换原因：必填，单选——客户原因、车辆原因。',
				'　4.3.3 替换原因说明：选填，多行文本，最多 500 字，占位「请说明替换原因」，显示字数统计。',
				'4.4 替换车辆',
				'　4.4.1 新车：必填，单选下拉，支持搜索；未选被替换车时禁用，占位「请先选择被替换车辆」。',
				'　4.4.2 已选被替换车后，占位展示交车区域，如「交车区域：浙江省-嘉兴市」。',
				'　4.4.3 可选范围：与被替换车所属合同「交车区域」停车场内，车辆状态为「已备车」的车辆。',
				'　4.4.4 同一申请内，各明细的替换车车牌号不可重复；重复时提示「该新车已在其他替换项中选择」。',
				'　4.4.5 品牌、型号：选择新车后自动反显，禁用编辑，占位「选择车辆后自动显示」。',
				'4.5 保留策略：取消多选某车牌时移除卡片；再次选中同一车牌时，若此前已填写替换说明/新车，尽量保留原填写内容。'
			]),
			specSection('5. 项目信息（全单共用一份）', [
				'5.1 展示时机：至少选择一辆被替换车后，根据所属合同自动反显。',
				'5.2 未选车时展示空状态：「选择被替换车辆后自动显示」。',
				'5.3 字段（均不可编辑）：客户名称、项目名称、项目类型（租赁 / 自营，标签展示）。'
			]),
			specSection('6. 替换类型业务规则', [
				'6.1 永久替换：审批通过后替换车交车（交车时间为流程结束当天），运维手动将被替换车还车。',
				'6.2 临时替换：审批通过后替换车交车；被替换车无需还车；被替换车重新交付客户后，运维手动将替换车还车。',
				'6.3 交车任务继承合同交车地点，由对应区域运维人员操作。',
				'6.4 交车完成后，租赁账单、提车应收等涉及被替换车的展示信息切换为替换车；临时替换在替换车还车后恢复原被替换车数据，永久替换由运维自主还车。'
			]),
			specSection('7. 底部操作', [
				'7.1 提交审核：校验至少一条明细，且每条须已选被替换车、替换车、替换类型、替换原因；通过后 Toast「已提交 N 条替换车申请」。',
				'7.2 保存：不做必填校验，保存草稿，仅保存人可见可编辑（原型提示）。',
				'7.3 取消：无编辑内容直接返回列表；有编辑内容时二次确认「取消将会丢失所有已填写内容，是否确认？」，确认后返回列表。'
			]),
			specSection('8. 校验与提示汇总', [
				'请选择被替换车辆并完善替换信息',
				'请完善每条替换的新车、替换类型与替换原因',
				'多台替换须为同一客户、同一项目，已忽略不同项目的车辆',
				'该新车已在其他替换项中选择',
				'请先选择被替换车辆'
			])
		);
	}

	function renderField(label, required, node) {
		return React.createElement(
			'div',
			{ className: 'vr-field' },
			React.createElement(
				'div',
				{ className: 'vr-field__label' },
				required ? React.createElement('span', { className: 'vr-req' }, '*') : null,
				label
			),
			node
		);
	}

	function renderMultiPickSection() {
		return React.createElement(
			'section',
			{ className: 'vr-multi-pick', 'aria-label': '选择被替换车辆' },
			React.createElement('div', { className: 'vr-multi-pick__title' }, '被替换车辆'),
			React.createElement(
				'div',
				{ className: 'vr-multi-pick__hint' },
				'车牌号支持多选，每选中一辆将生成一条替换明细；须为同一客户、同一项目。'
			),
			renderField(
				'车牌号',
				true,
				React.createElement(Select, {
					mode: 'multiple',
					placeholder: '请输入或选择车牌号，可多选',
					style: { width: '100%' },
					value: selectedOriginalPlates,
					onChange: onMultiOriginalPlateChange,
					allowClear: true,
					showSearch: true,
					options: multiOldPlateOptions,
					filterOption: plateFilterOption,
					optionFilterProp: 'label',
					maxTagCount: 'responsive'
				})
			)
		);
	}

	function renderPairCard(pair, index) {
		var newOptions = getNewOptionsForPair(pair);

		return React.createElement(
			'article',
			{ key: pair.id, className: 'vr-pair-card', 'aria-label': '替换车辆第' + (index + 1) + '项' },
			React.createElement(
				'div',
				{ className: 'vr-pair-card__head' },
				React.createElement(
					'div',
					{ className: 'vr-pair-card__title' },
					React.createElement('span', { className: 'vr-pair-card__index' }, index + 1),
					React.createElement('span', null, '车辆替换'),
					pair.originalPlate
						? React.createElement(Tag, { style: { margin: 0 } }, pair.originalPlate)
						: null,
					pair.originalPlate && pair.replacePlate
						? React.createElement(Tag, { color: 'processing', style: { margin: 0 } }, '→ ' + pair.replacePlate)
						: null
				)
			),
			React.createElement(
				'div',
				{ className: 'vr-pair-card__body' },
				React.createElement(
					'div',
					{ className: 'vr-vehicle-summary' },
					renderField(
						'车牌号',
						false,
						React.createElement(Input, {
							value: pair.originalPlate || '',
							disabled: true
						})
					),
					renderField(
						'品牌',
						false,
						React.createElement(Input, {
							value: pair.originalBrand || '',
							disabled: true,
							placeholder: '选择车辆后自动显示'
						})
					),
					renderField(
						'型号',
						false,
						React.createElement(Input, {
							value: pair.originalModel || '',
							disabled: true,
							placeholder: '选择车辆后自动显示'
						})
					)
				),
				React.createElement(
					'div',
					{ className: 'vr-block' },
					React.createElement('div', { className: 'vr-block-label' }, '替换说明'),
					React.createElement(
						'div',
						{ className: 'vr-form-grid vr-form-grid--reason' },
						renderField(
							'替换类型',
							true,
							React.createElement(Select, {
								placeholder: '请选择',
								style: { width: '100%' },
								value: pair.replaceType,
								onChange: function (v) { updatePair(pair.id, { replaceType: v }); },
								allowClear: true,
								options: [
									{ value: '永久替换', label: '永久替换' },
									{ value: '临时替换', label: '临时替换' }
								]
							})
						),
						renderField(
							'替换原因',
							true,
							React.createElement(Select, {
								placeholder: '请选择',
								style: { width: '100%' },
								value: pair.replaceReason,
								onChange: function (v) { updatePair(pair.id, { replaceReason: v }); },
								allowClear: true,
								options: [
									{ value: '客户原因', label: '客户原因' },
									{ value: '车辆原因', label: '车辆原因' }
								]
							})
						),
						renderField(
							'替换原因说明',
							false,
							React.createElement(Input.TextArea, {
								placeholder: '请说明替换原因',
								value: pair.replaceReasonDesc || '',
								onChange: function (e) { updatePair(pair.id, { replaceReasonDesc: e.target.value }); },
								rows: 2,
								style: { width: '100%' },
								maxLength: 500,
								showCount: true
							})
						)
					)
				),
				React.createElement(
					'div',
					{ className: 'vr-swap-divider', role: 'presentation' },
					React.createElement('span', { className: 'vr-swap-divider__icon', 'aria-hidden': true }, '↓'),
					React.createElement('span', null, '替换为')
				),
				React.createElement(
					'div',
					{ className: 'vr-block' },
					React.createElement('div', { className: 'vr-block-label vr-block-label--new' }, '替换车辆'),
					React.createElement(
						'div',
						{ className: 'vr-form-grid' },
						renderField(
							'新车',
							true,
							React.createElement(Select, {
								placeholder: projectInfo.deliveryRegion
									? '交车区域：' + projectInfo.deliveryRegion
									: '请先选择被替换车辆',
								style: { width: '100%' },
								value: pair.replacePlate,
								onChange: function (v) { onReplacePlateChange(pair.id, v); },
								allowClear: true,
								showSearch: true,
								options: newOptions,
								filterOption: plateFilterOption,
								disabled: !pair.originalPlate,
								optionFilterProp: 'label'
							})
						),
						renderField(
							'品牌',
							false,
							React.createElement(Input, {
								value: pair.replaceBrand || '',
								disabled: true,
								placeholder: '选择车辆后自动显示'
							})
						),
						renderField(
							'型号',
							false,
							React.createElement(Input, {
								value: pair.replaceModel || '',
								disabled: true,
								placeholder: '选择车辆后自动显示'
							})
						)
					)
				)
			)
		);
	}

	function renderProjectPanel() {
		var hasProject = !!projectInfo.contractId;
		return React.createElement(
			'section',
			{ className: 'vr-project-panel', 'aria-label': '项目信息' },
			React.createElement(
				'div',
				{ className: 'vr-project-panel__head' },
				React.createElement('div', { className: 'vr-project-panel__title' }, '项目信息')
			),
			hasProject
				? React.createElement(
					'div',
					{ className: 'vr-project-grid' },
					React.createElement(
						'div',
						{ className: 'vr-readonly' },
						React.createElement('span', { className: 'vr-readonly__label' }, '客户名称'),
						React.createElement('span', { className: 'vr-readonly__value' }, projectInfo.customerName)
					),
					React.createElement(
						'div',
						{ className: 'vr-readonly' },
						React.createElement('span', { className: 'vr-readonly__label' }, '项目名称'),
						React.createElement('span', { className: 'vr-readonly__value' }, projectInfo.projectName)
					),
					React.createElement(
						'div',
						{ className: 'vr-readonly' },
						React.createElement('span', { className: 'vr-readonly__label' }, '项目类型'),
						React.createElement(
							'span',
							{ className: 'vr-readonly__value' },
							React.createElement(
								Tag,
								{ color: projectInfo.projectType === '自营' ? 'purple' : 'blue', style: { margin: 0 } },
								projectInfo.projectType
							)
						)
					)
				)
				: React.createElement(Empty, {
					image: Empty.PRESENTED_IMAGE_SIMPLE,
					description: '选择被替换车辆后自动显示'
				})
		);
	}

	return React.createElement(
		'div',
		{ className: 'vr-add-page', style: { padding: '20px 24px 32px', minHeight: '100vh', background: 'linear-gradient(165deg,#eef4ff 0%,#f5f7fa 42%,#f0f2f5 100%)' } },
		React.createElement('style', null, pageCss),
		React.createElement(
			'header',
			{ className: 'vr-page-header' },
			React.createElement(Breadcrumb, {
				items: [
					{ title: '运维管理' },
					{ title: '车辆业务' },
					{ title: '替换车管理' },
					{ title: '新增' }
				]
			}),
			React.createElement(
				Button,
				{ type: 'link', style: { padding: 0, flexShrink: 0 }, onClick: function () { setRequirementModalVisible(true); } },
				'查看需求说明'
			)
		),
		React.createElement(
			Card,
			{
				className: 'vr-main-card',
				title: React.createElement(
					'span',
					null,
					'新增替换车 ',
					pairs.length > 0
						? React.createElement(Tag, { style: { marginLeft: 8, fontWeight: 400 } }, pairs.length + ' 辆车')
						: null
				)
			},
			renderMultiPickSection(),
			pairs.length > 0
				? React.createElement(
					'div',
					{ className: 'vr-pair-list' },
					pairs.map(function (pair, index) { return renderPairCard(pair, index); })
				)
				: React.createElement(
					'div',
					{ className: 'vr-pair-list-empty' },
					'请在上方选择被替换车辆车牌号，将自动生成替换明细'
				),
			renderProjectPanel(),
			React.createElement(
				'div',
				{ className: 'vr-footer' },
				React.createElement(Button, { type: 'primary', size: 'large', onClick: handleSubmit }, '提交审核'),
				React.createElement(Button, { size: 'large', onClick: handleSave }, '保存'),
				React.createElement(Button, { size: 'large', onClick: handleCancel }, '取消')
			)
		),
		React.createElement(Modal, {
			title: '替换车管理 - 新增 · 需求说明',
			open: requirementModalVisible[0],
			onCancel: function () { setRequirementModalVisible(false); },
			width: 760,
			footer: React.createElement(Button, { type: 'primary', onClick: function () { setRequirementModalVisible(false); } }, '关闭'),
			bodyStyle: { maxHeight: '72vh', overflow: 'auto', paddingTop: 8 }
		}, renderRequirementDoc()),
		React.createElement(Modal, {
			title: '取消将会丢失所有已填写内容，是否确认？',
			open: cancelModalVisible[0],
			onCancel: function () { setCancelModalVisible(false); },
			onOk: confirmCancel,
			okText: '确认',
			cancelText: '返回'
		})
	);
};