import React from 'react';
import { Select, InputNumber, Input, Image, Cascader, Button, DatePicker, Popover, Modal, message } from 'antd';
import dayjs from 'dayjs';
import { ChevronDown, Plus, Trash2, Info, X, Search } from 'lucide-react';
import {
	getLessorCompanies,
	getLessorCompanyById,
	getLeaseCustomerById,
	getCustomerInvoicePreview,
	getLessorAccountPreview,
	getLessorContactPreview,
	getCustomerContactPreview,
	getCustomerAttachmentPreviewUrl,
	MOCK_LEASE_CUSTOMERS,
	DEFAULT_MILEAGE_STANDARD,
	MILEAGE_PERIOD_OPTIONS,
	CUSTOMER_CREDENTIAL_ITEMS,
	DEFAULT_FEE_INFO,
	PAYMENT_PERIOD_OPTIONS,
	HYDROGEN_PAYMENT_METHOD_OPTIONS,
	CONTRACT_CODE_PREFIX,
	LEASE_CUSTOMER_RISK_FILTER_OPTIONS,
	getLeaseCustomerRiskLevelLabel,
	isLeaseCustomerSelectable,
} from '../contract-template-management/contract-template-vars.js';
import {
	createEmptyLeaseOrderRow,
	createDefaultLeaseOrderState,
	createEmptyDelegateRow,
	createDefaultPowerOfAttorneyState,
	PROVINCE_CITY_CASCADER_OPTIONS,
	LEASE_VEHICLE_BRAND_MODEL_CATALOG,
	LEASE_EXTRA_SERVICE_TREE,
	flattenExtraServiceOptions,
	matchExtraServiceOption,
	getExtraServiceCategoryByValue,
	PLATE_ACTUAL_DELIVERY,
	POA_MAX_DELEGATES,
	normalizeBrandModels,
	normalizePlateNos,
	formatBrandModelsDisplay,
	formatBrandModelPair,
	parsePlateSearchText,
	calcInsuredVehicleCount,
	isInsuredVehicleCountEditable,
	getRowVehicleCountForPricing,
	isDelegateRowStarted,
	isDelegateRowComplete,
	calcRentServiceSubtotal,
	normalizeExtraServices,
	getReadyVehiclePlateOptions,
	calcLeaseOrderKpis,
	formatKpiAmount,
	getExtraServiceNames,
} from './lease-order-vars.js';
import {
	LEASE_BUSINESS_ORG_TREE,
	flattenBusinessOwnerOptions,
	matchBusinessOwnerOption,
	formatBusinessAssignmentLabel,
	getBusinessOwnersByDept,
} from './lease-business-org-data.js';
import { getMatchedPrototypeClauses } from './lease-contract-vehicle-clause.js';

function FieldHint(props) {
	if (!props.children) return null;
	return React.createElement('p', {
		className: 'lc-form-hint',
		'data-annotation-id': props.annotationId || undefined,
	}, props.children);
}

function aggregateOrderBrandModels(rows) {
	var seen = {};
	var result = [];
	(rows || []).forEach(function (row) {
		normalizeBrandModels(row).forEach(function (pair) {
			var key = pair[0] + '\0' + pair[1];
			if (seen[key]) return;
			seen[key] = true;
			result.push(pair);
		});
	});
	return result;
}

function BrandModelsClauseHint(props) {
	var brandModels = normalizeBrandModels({ brandModels: props.brandModels });
	if (!brandModels.length) return null;
	var matched = [];
	brandModels.forEach(function (pair) {
		getMatchedPrototypeClauses(pair[0], pair[1]).forEach(function (clause) {
			if (!matched.some(function (item) { return item.id === clause.id; })) {
				matched.push(clause);
			}
		});
	});
	if (!matched.length) {
		return React.createElement('p', {
			className: 'lc-brand-model-clause-hint lc-brand-model-clause-hint--empty',
			role: 'note',
		},
			React.createElement(Info, { size: 12, className: 'lc-brand-model-clause-hint__icon', 'aria-hidden': true }),
			'当前车型未命中标准合同条件条款，右侧预览中相关段落将不展示。',
		);
	}
	return React.createElement('div', {
		className: 'lc-brand-model-clause-hint lc-brand-model-clause-hint--matched',
		role: 'note',
	},
		React.createElement('p', { className: 'lc-brand-model-clause-hint__lead' },
			React.createElement(Info, { size: 12, className: 'lc-brand-model-clause-hint__icon', 'aria-hidden': true }),
			'已命中条件条款，右侧预览将显示对应正文：',
		),
		matched.map(function (clause) {
			return React.createElement('p', {
				key: clause.id,
				className: 'lc-brand-model-clause-hint__item',
			},
				React.createElement('span', { className: 'lc-brand-model-clause-hint__label' }, clause.label),
				React.createElement('span', { className: 'lc-brand-model-clause-hint__summary' }, clause.summary),
			);
		}),
	);
}

function LeaseCustomerPickerField(props) {
	var value = props.value;
	var onChange = props.onChange;
	var selectedCustomer = getLeaseCustomerById(value);
	var modalOpenState = React.useState(false);
	var pendingIdState = React.useState('');
	var keywordState = React.useState('');
	var riskFilterState = React.useState(undefined);
	var modalOpen = modalOpenState[0];
	var setModalOpen = modalOpenState[1];
	var pendingId = pendingIdState[0];
	var setPendingId = pendingIdState[1];
	var keyword = keywordState[0];
	var setKeyword = keywordState[1];
	var riskFilter = riskFilterState[0];
	var setRiskFilter = riskFilterState[1];

	function openModal() {
		setPendingId(value || '');
		setKeyword('');
		setRiskFilter(undefined);
		setModalOpen(true);
	}

	function handleCancel() {
		setModalOpen(false);
	}

	function handleConfirm() {
		var picked = getLeaseCustomerById(pendingId);
		if (!picked || !isLeaseCustomerSelectable(picked)) {
			message.warning('请选择风控等级符合要求的客户');
			return;
		}
		onChange(picked.id);
		setModalOpen(false);
	}

	function handleRowClick(customer) {
		if (!isLeaseCustomerSelectable(customer)) {
			message.warning('该客户风控等级不符合签约要求，无法选择');
			return;
		}
		setPendingId(customer.id);
	}

	function handleClear(event) {
		event.stopPropagation();
		onChange('');
	}

	var filteredCustomers = MOCK_LEASE_CUSTOMERS.filter(function (customer) {
		if (riskFilter && customer.riskLevel !== riskFilter) return false;
		if (keyword && customer.name.indexOf(keyword.trim()) < 0) return false;
		return true;
	});

	var pendingCustomer = getLeaseCustomerById(pendingId);
	var confirmDisabled = !pendingCustomer || !isLeaseCustomerSelectable(pendingCustomer);

	return React.createElement('div', { className: 'lc-customer-picker' },
		React.createElement('div', {
			className: 'lc-customer-picker__trigger vm-focus-border',
			role: 'button',
			tabIndex: 0,
			onClick: openModal,
			onKeyDown: function (event) {
				if (event.key === 'Enter' || event.key === ' ') {
					event.preventDefault();
					openModal();
				}
			},
			'aria-label': '乙方客户',
		},
			React.createElement('span', {
				className: selectedCustomer ? 'lc-customer-picker__value' : 'lc-customer-picker__placeholder',
			}, selectedCustomer ? selectedCustomer.name : '请选择客户'),
			React.createElement('span', { className: 'lc-customer-picker__actions' },
				value ? React.createElement('button', {
					type: 'button',
					className: 'lc-customer-picker__clear',
					onClick: handleClear,
					'aria-label': '清除乙方客户',
				}, '×') : null,
				React.createElement(ChevronDown, { size: 16, 'aria-hidden': true }),
			),
		),
		React.createElement(Modal, {
			title: '选择乙方客户',
			open: modalOpen,
			onCancel: handleCancel,
			onOk: handleConfirm,
			okText: '确认',
			cancelText: '取消',
			okButtonProps: { disabled: confirmDisabled },
			mask: true,
			centered: true,
			width: 720,
			rootClassName: 'lc-customer-picker-modal',
			destroyOnClose: true,
		},
			React.createElement('div', { className: 'lc-customer-picker-modal__filters' },
				React.createElement(Input, {
					className: 'lc-customer-picker-modal__search vm-focus-border',
					placeholder: '搜索客户名称',
					value: keyword,
					allowClear: true,
					onChange: function (e) { setKeyword(e.target.value); },
					'aria-label': '搜索客户名称',
				}),
				React.createElement(Select, {
					className: 'lc-customer-picker-modal__risk-filter vm-focus-border',
					placeholder: '风控等级',
					value: riskFilter,
					allowClear: true,
					onChange: function (v) { setRiskFilter(v); },
					options: LEASE_CUSTOMER_RISK_FILTER_OPTIONS,
					style: { width: '100%' },
					'aria-label': '按风控等级筛选',
				}),
			),
			React.createElement('div', { className: 'lc-customer-picker-modal__table-wrap', role: 'region', 'aria-label': '客户列表' },
				React.createElement('table', { className: 'lc-customer-picker-modal__table' },
					React.createElement('thead', null,
						React.createElement('tr', null,
							React.createElement('th', { scope: 'col' }, '客户名称'),
							React.createElement('th', { scope: 'col', className: 'lc-customer-picker-modal__col-time' }, '上次评级时间'),
							React.createElement('th', { scope: 'col', className: 'lc-customer-picker-modal__col-risk' }, '风控等级'),
						),
					),
					React.createElement('tbody', null,
						filteredCustomers.length
							? filteredCustomers.map(function (customer) {
								var selectable = isLeaseCustomerSelectable(customer);
								var isSelected = pendingId === customer.id;
								return React.createElement('tr', {
									key: customer.id,
									className: 'lc-customer-picker-modal__row'
										+ (isSelected ? ' is-selected' : '')
										+ (selectable ? ' is-selectable' : ' is-disabled'),
									onClick: function () { handleRowClick(customer); },
									'aria-selected': isSelected,
									'aria-disabled': !selectable,
								},
									React.createElement('td', null, customer.name),
									React.createElement('td', { className: 'tabular-nums' }, customer.lastRatingTime || '—'),
									React.createElement('td', null,
										React.createElement('div', { className: 'lc-customer-picker-modal__risk-cell' },
											React.createElement('span', {
												className: 'lc-customer-picker-modal__risk'
													+ (selectable ? ' lc-customer-picker-modal__risk--ok' : ' lc-customer-picker-modal__risk--blocked'),
											}, getLeaseCustomerRiskLevelLabel(customer.riskLevel)),
											!selectable
												? React.createElement('span', { className: 'lc-customer-picker-modal__blocked-hint' }, '不可选')
												: null,
										),
									),
								);
							})
							: React.createElement('tr', null,
								React.createElement('td', { colSpan: 3, className: 'lc-customer-picker-modal__empty' }, '暂无匹配客户'),
							),
					),
				),
			),
			React.createElement('p', { className: 'lc-customer-picker-modal__hint' }, '仅 A/B 级客户可选；C/D 级客户风控等级不符合签约要求。'),
		),
	);
}

function LeaseOrderServiceContentField(props) {
	var selected = props.value || [];
	var onChange = props.onChange;
	var openState = React.useState(false);
	var categoryState = React.useState('');
	var queryState = React.useState('');
	var open = openState[0];
	var setOpen = openState[1];
	var activeCategory = categoryState[0];
	var setActiveCategory = categoryState[1];
	var query = queryState[0];
	var setQuery = queryState[1];
	var serviceNames = getExtraServiceNames(selected);
	var searchText = query.trim();
	var isSearchMode = searchText.length > 0;
	var resolvedCategory = activeCategory || LEASE_EXTRA_SERVICE_TREE[0].category;
	var displayOptions = isSearchMode
		? flattenExtraServiceOptions().filter(function (item) {
			return matchExtraServiceOption(item, searchText);
		})
		: (function () {
			var group = LEASE_EXTRA_SERVICE_TREE.find(function (node) {
				return node.category === resolvedCategory;
			});
			if (!group) return [];
			return group.items.map(function (item) {
				return {
					value: item.value,
					name: item.name,
					category: group.category,
				};
			});
		})();

	function resolveInitialCategory() {
		if (selected.length > 0) {
			var fromSelected = getExtraServiceCategoryByValue(selected[0]);
			if (fromSelected) return fromSelected;
		}
		return LEASE_EXTRA_SERVICE_TREE[0].category;
	}

	function handleOpenChange(nextOpen) {
		setOpen(nextOpen);
		if (nextOpen) {
			setActiveCategory(resolveInitialCategory());
		} else {
			setQuery('');
		}
	}

	function toggleValue(value) {
		var category = getExtraServiceCategoryByValue(value);
		if (category) setActiveCategory(category);
		if (selected.indexOf(value) >= 0) {
			onChange(selected.filter(function (item) { return item !== value; }));
			return;
		}
		onChange(selected.concat([value]));
	}

	function clearAll(event) {
		event.preventDefault();
		event.stopPropagation();
		onChange([]);
		setQuery('');
	}

	function clearSearch(event) {
		event.preventDefault();
		event.stopPropagation();
		setQuery('');
	}

	function handleCategoryChange(nextCategory) {
		setActiveCategory(nextCategory);
		setQuery('');
	}

	var popoverContent = React.createElement('div', {
		className: 'vm-operate-city-edit-body vm-operate-city-picker-panel lc-lease-order-service-popover__panel',
	},
		React.createElement('label', { className: 'vm-operate-city-edit-search' },
			React.createElement(Search, { size: 16, 'aria-hidden': true, className: 'vm-operate-city-edit-search-icon' }),
			React.createElement('input', {
				type: 'text',
				className: 'vm-operate-city-edit-search-input',
				value: query,
				placeholder: '输入类目或服务名称快速筛选',
				'aria-label': '筛选服务内容',
				autoComplete: 'off',
				onChange: function (e) { setQuery(e.target.value); },
			}),
			query
				? React.createElement('button', {
					type: 'button',
					className: 'vm-operate-city-edit-search-clear',
					onClick: clearSearch,
					'aria-label': '清空搜索',
				}, React.createElement(X, { size: 14, 'aria-hidden': true }))
				: null,
		),
		selected.length > 0
			? React.createElement('div', { className: 'vm-operate-city-edit-selected', 'aria-live': 'polite' },
				React.createElement('span', { className: 'vm-operate-city-edit-selected-label' }, '已选'),
				React.createElement('div', { className: 'lc-lease-order-service-popover__selected-tags' },
					serviceNames.map(function (name, index) {
						var value = selected[index];
						return React.createElement('span', {
							key: value || name,
							className: 'lc-lease-order-service-popover__selected-tag',
						},
							name,
							React.createElement('button', {
								type: 'button',
								'aria-label': '移除' + name,
								onMouseDown: function (e) { e.preventDefault(); },
								onClick: function () { toggleValue(value); },
							}, React.createElement(X, { size: 12, 'aria-hidden': true })),
						);
					}),
				),
			)
			: null,
		React.createElement('div', {
			className: 'vm-operate-city-edit-main' + (isSearchMode ? ' is-search' : ''),
		},
			!isSearchMode
				? React.createElement('div', {
					className: 'vm-operate-city-edit-step vm-operate-city-edit-step--province',
				},
					React.createElement('span', { className: 'vm-operate-city-step-label' }, '类目'),
					React.createElement('div', {
						className: 'vm-operate-city-edit-chips',
						role: 'tablist',
						'aria-label': '服务类目',
					},
						LEASE_EXTRA_SERVICE_TREE.map(function (group) {
							var active = resolvedCategory === group.category;
							return React.createElement('button', {
								key: group.category,
								type: 'button',
								role: 'tab',
								'aria-selected': active,
								className: 'vm-operate-city-chip' + (active ? ' active' : ''),
								onClick: function () { handleCategoryChange(group.category); },
							}, group.category);
						}),
					),
				)
				: null,
			React.createElement('div', {
				className: 'vm-operate-city-edit-step vm-operate-city-edit-step--city',
			},
				React.createElement('span', { className: 'vm-operate-city-step-label' },
					isSearchMode ? ('搜索结果（' + displayOptions.length + '）') : '服务内容',
				),
				React.createElement('div', {
					className: 'vm-operate-city-edit-chips',
					role: 'listbox',
					'aria-label': '服务内容列表',
					'aria-multiselectable': true,
				},
					displayOptions.length === 0
						? React.createElement('p', { className: 'vm-operate-city-empty' },
							isSearchMode ? '未找到匹配的服务项，请换个关键词' : '暂无可选服务项',
						)
						: displayOptions.map(function (item) {
							var checked = selected.indexOf(item.value) >= 0;
							return React.createElement('button', {
								key: item.value,
								type: 'button',
								role: 'option',
								'aria-selected': checked,
								className: 'vm-operate-city-chip' + (checked ? ' active' : ''),
								onClick: function () { toggleValue(item.value); },
							}, item.name);
						}),
				),
			),
		),
	);

	return React.createElement('div', { className: 'lc-lease-order-service-field' },
		selected.length > 0
			? React.createElement('p', {
				className: 'lc-lease-order-service-field__summary',
				'aria-live': 'polite',
			}, serviceNames.join('、'))
			: null,
		React.createElement(Popover, {
			trigger: 'click',
			placement: 'bottomLeft',
			open: open,
			onOpenChange: handleOpenChange,
			overlayClassName: 'lc-lease-order-service-popover',
			getPopupContainer: function () { return document.body; },
			content: popoverContent,
		},
			React.createElement('button', {
				type: 'button',
				className: 'lc-lease-order-service-picker__btn',
				'aria-label': '服务内容',
				'aria-expanded': open,
				'data-annotation-id': 'lc-lease-order-service-content',
			}, '选择服务项'),
		),
	);
}

function BusinessDeptOwnerPickerField(props) {
	var businessDept = props.businessDept || '';
	var businessOwner = props.businessOwner || '';
	var onChange = props.onChange;
	var openState = React.useState(false);
	var deptState = React.useState('');
	var queryState = React.useState('');
	var open = openState[0];
	var setOpen = openState[1];
	var activeDept = deptState[0];
	var setActiveDept = deptState[1];
	var query = queryState[0];
	var setQuery = queryState[1];
	var searchText = query.trim();
	var isSearchMode = searchText.length > 0;
	var resolvedDept = activeDept || businessDept || LEASE_BUSINESS_ORG_TREE[0].dept;
	var displayOptions = isSearchMode
		? flattenBusinessOwnerOptions().filter(function (item) {
			return matchBusinessOwnerOption(item, searchText);
		})
		: getBusinessOwnersByDept(resolvedDept).map(function (owner) {
			return { dept: resolvedDept, owner: owner };
		});

	function resolveInitialDept() {
		if (businessDept) return businessDept;
		return LEASE_BUSINESS_ORG_TREE[0].dept;
	}

	function handleOpenChange(nextOpen) {
		setOpen(nextOpen);
		if (nextOpen) {
			setActiveDept(resolveInitialDept());
		} else {
			setQuery('');
		}
	}

	function selectOwner(dept, owner) {
		onChange(dept, owner);
		setActiveDept(dept);
		setOpen(false);
		setQuery('');
	}

	function clearSelection(event) {
		event.preventDefault();
		event.stopPropagation();
		onChange('', '');
		setQuery('');
	}

	function clearSearch(event) {
		event.preventDefault();
		event.stopPropagation();
		setQuery('');
	}

	var summary = formatBusinessAssignmentLabel(businessDept, businessOwner);

	var popoverContent = React.createElement('div', {
		className: 'vm-operate-city-edit-body vm-operate-city-picker-panel lc-lease-order-service-popover__panel',
	},
		React.createElement('label', { className: 'vm-operate-city-edit-search' },
			React.createElement(Search, { size: 16, 'aria-hidden': true, className: 'vm-operate-city-edit-search-icon' }),
			React.createElement('input', {
				type: 'text',
				className: 'vm-operate-city-edit-search-input',
				value: query,
				placeholder: '输入业务员姓名快速筛选',
				'aria-label': '搜索业务员姓名',
				autoComplete: 'off',
				onChange: function (e) { setQuery(e.target.value); },
			}),
			query
				? React.createElement('button', {
					type: 'button',
					className: 'vm-operate-city-edit-search-clear',
					onClick: clearSearch,
					'aria-label': '清空搜索',
				}, React.createElement(X, { size: 14, 'aria-hidden': true }))
				: null,
		),
		summary
			? React.createElement('div', { className: 'vm-operate-city-edit-selected', 'aria-live': 'polite' },
				React.createElement('span', { className: 'vm-operate-city-edit-selected-label' }, '已选'),
				React.createElement('div', { className: 'lc-lease-order-service-popover__selected-tags' },
					React.createElement('span', { className: 'lc-lease-order-service-popover__selected-tag' },
						summary,
						React.createElement('button', {
							type: 'button',
							'aria-label': '清除业务部门及业务人员',
							onMouseDown: function (e) { e.preventDefault(); },
							onClick: clearSelection,
						}, React.createElement(X, { size: 12, 'aria-hidden': true })),
					),
				),
			)
			: null,
		React.createElement('div', {
			className: 'vm-operate-city-edit-main' + (isSearchMode ? ' is-search' : ''),
		},
			!isSearchMode
				? React.createElement('div', {
					className: 'vm-operate-city-edit-step vm-operate-city-edit-step--province',
				},
					React.createElement('span', { className: 'vm-operate-city-step-label' }, '业务部门'),
					React.createElement('div', {
						className: 'vm-operate-city-edit-chips',
						role: 'tablist',
						'aria-label': '业务部门',
					},
						LEASE_BUSINESS_ORG_TREE.map(function (group) {
							var active = resolvedDept === group.dept;
							return React.createElement('button', {
								key: group.dept,
								type: 'button',
								role: 'tab',
								'aria-selected': active,
								className: 'vm-operate-city-chip' + (active ? ' active' : ''),
								onClick: function () {
									setActiveDept(group.dept);
									setQuery('');
								},
							}, group.dept);
						}),
					),
				)
				: null,
			React.createElement('div', {
				className: 'vm-operate-city-edit-step vm-operate-city-edit-step--city',
			},
				React.createElement('span', { className: 'vm-operate-city-step-label' },
					isSearchMode ? ('搜索结果（' + displayOptions.length + '）') : '业务人员',
				),
				React.createElement('div', {
					className: 'vm-operate-city-edit-chips',
					role: 'listbox',
					'aria-label': '业务人员列表',
				},
					displayOptions.length === 0
						? React.createElement('p', { className: 'vm-operate-city-empty' },
							isSearchMode ? '未找到匹配的业务人员，请换个关键词' : '该部门暂无可选业务人员',
						)
						: displayOptions.map(function (item) {
							var checked = businessDept === item.dept && businessOwner === item.owner;
							return React.createElement('button', {
								key: item.dept + '::' + item.owner,
								type: 'button',
								role: 'option',
								'aria-selected': checked,
								className: 'vm-operate-city-chip' + (checked ? ' active' : ''),
								onClick: function () { selectOwner(item.dept, item.owner); },
							}, item.owner);
						}),
				),
			),
		),
	);

	return React.createElement('div', { className: 'lc-business-dept-picker' },
		React.createElement(Popover, {
			trigger: 'click',
			placement: 'bottomLeft',
			open: open,
			onOpenChange: handleOpenChange,
			overlayClassName: 'lc-lease-order-service-popover lc-business-dept-picker-popover',
			getPopupContainer: function () { return document.body; },
			content: popoverContent,
		},
			React.createElement('button', {
				type: 'button',
				className: 'vm-filter-picker-control lc-business-dept-picker__trigger' + (open ? ' open' : ''),
				'aria-label': '业务部门及业务人员',
				'aria-expanded': open,
				'data-annotation-id': 'lc-signing-business-assignment',
			},
				summary
					? React.createElement('span', { className: 'vm-filter-picker-input lc-business-dept-picker__summary' }, summary)
					: React.createElement('span', {
						className: 'vm-filter-picker-input lc-business-dept-picker__summary is-placeholder',
					}, '请选择业务部门及业务人员'),
				React.createElement(ChevronDown, { size: 16, className: 'vm-filter-picker-chevron', 'aria-hidden': true }),
			),
		),
	);
}

function brandModelPairKey(pair) {
	return pair[0] + '::' + pair[1];
}

function LeaseOrderBrandModelField(props) {
	var selected = normalizeBrandModels({ brandModels: props.value });
	var onChange = props.onChange;
	var openState = React.useState(false);
	var brandState = React.useState('');
	var queryState = React.useState('');
	var open = openState[0];
	var setOpen = openState[1];
	var activeBrand = brandState[0];
	var setActiveBrand = brandState[1];
	var query = queryState[0];
	var setQuery = queryState[1];
	var labels = formatBrandModelsDisplay(selected);
	var summary = labels.length <= 2
		? labels.join('、')
		: (labels.length > 0 ? '已选 ' + labels.length + ' 个型号' : '');
	var searchText = query.trim();
	var isSearchMode = searchText.length > 0;
	var resolvedBrand = activeBrand || LEASE_VEHICLE_BRAND_MODEL_CATALOG[0].brand;
	var displayModels = isSearchMode
		? LEASE_VEHICLE_BRAND_MODEL_CATALOG.reduce(function (list, item) {
			return list.concat(item.models.map(function (model) {
				return { brand: item.brand, model: model };
			}));
		}, []).filter(function (item) {
			var label = formatBrandModelPair(item.brand, item.model);
			return label.toLowerCase().indexOf(searchText.toLowerCase()) >= 0
				|| item.brand.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;
		})
		: (function () {
			var group = LEASE_VEHICLE_BRAND_MODEL_CATALOG.find(function (node) {
				return node.brand === resolvedBrand;
			});
			if (!group) return [];
			return group.models.map(function (model) {
				return { brand: group.brand, model: model };
			});
		})();

	function handleOpenChange(nextOpen) {
		setOpen(nextOpen);
		if (nextOpen) {
			setActiveBrand(selected.length > 0 ? selected[0][0] : LEASE_VEHICLE_BRAND_MODEL_CATALOG[0].brand);
		} else {
			setQuery('');
		}
	}

	function togglePair(brand, model) {
		var key = brandModelPairKey([brand, model]);
		var exists = selected.some(function (pair) {
			return brandModelPairKey(pair) === key;
		});
		if (exists) {
			onChange(selected.filter(function (pair) {
				return brandModelPairKey(pair) !== key;
			}));
			return;
		}
		onChange(selected.concat([[brand, model]]));
		setActiveBrand(brand);
	}

	function clearAll(event) {
		event.preventDefault();
		event.stopPropagation();
		onChange([]);
		setQuery('');
	}

	var popoverContent = React.createElement('div', {
		className: 'vm-operate-city-edit-body vm-operate-city-picker-panel lc-lease-order-service-popover__panel',
	},
		React.createElement('label', { className: 'vm-operate-city-edit-search' },
			React.createElement(Search, { size: 16, 'aria-hidden': true, className: 'vm-operate-city-edit-search-icon' }),
			React.createElement('input', {
				type: 'text',
				className: 'vm-operate-city-edit-search-input',
				value: query,
				placeholder: '输入品牌或型号快速筛选',
				'aria-label': '筛选品牌型号',
				autoComplete: 'off',
				onChange: function (e) { setQuery(e.target.value); },
			}),
			query ? React.createElement('button', {
				type: 'button',
				className: 'vm-operate-city-edit-search-clear',
				onClick: function (e) { e.preventDefault(); e.stopPropagation(); setQuery(''); },
				'aria-label': '清空搜索',
			}, React.createElement(X, { size: 14, 'aria-hidden': true })) : null,
		),
		selected.length > 0 ? React.createElement('div', { className: 'vm-operate-city-edit-selected', 'aria-live': 'polite' },
			React.createElement('span', { className: 'vm-operate-city-edit-selected-label' }, '已选'),
			React.createElement('div', { className: 'lc-lease-order-brand-model-picker__selected-list' },
				labels.map(function (label, index) {
					var pair = selected[index];
					return React.createElement('div', {
						key: brandModelPairKey(pair),
						className: 'lc-lease-order-brand-model-picker__selected-line',
					},
						label,
						React.createElement('button', {
							type: 'button',
							'aria-label': '移除' + label,
							onClick: function () { togglePair(pair[0], pair[1]); },
						}, React.createElement(X, { size: 12, 'aria-hidden': true })),
					);
				}),
			),
		) : null,
		React.createElement('div', { className: 'vm-operate-city-edit-main' + (isSearchMode ? ' is-search' : '') },
			!isSearchMode ? React.createElement('div', { className: 'vm-operate-city-edit-step vm-operate-city-edit-step--province' },
				React.createElement('span', { className: 'vm-operate-city-step-label' }, '品牌'),
				React.createElement('div', { className: 'vm-operate-city-edit-chips', role: 'tablist', 'aria-label': '品牌列表' },
					LEASE_VEHICLE_BRAND_MODEL_CATALOG.map(function (item) {
						var active = resolvedBrand === item.brand;
						return React.createElement('button', {
							key: item.brand,
							type: 'button',
							role: 'tab',
							'aria-selected': active,
							className: 'vm-operate-city-chip' + (active ? ' active' : ''),
							onClick: function () { setActiveBrand(item.brand); setQuery(''); },
						}, item.brand);
					}),
				),
			) : null,
			React.createElement('div', { className: 'vm-operate-city-edit-step vm-operate-city-edit-step--city' },
				React.createElement('span', { className: 'vm-operate-city-step-label' },
					isSearchMode ? ('搜索结果（' + displayModels.length + '）') : '型号',
				),
				React.createElement('div', {
					className: 'vm-operate-city-edit-chips',
					role: 'listbox',
					'aria-label': '型号列表',
					'aria-multiselectable': true,
				},
					displayModels.length === 0
						? React.createElement('p', { className: 'vm-operate-city-empty' }, '暂无匹配型号')
						: displayModels.map(function (item) {
							var checked = selected.some(function (pair) {
								return pair[0] === item.brand && pair[1] === item.model;
							});
							return React.createElement('button', {
								key: brandModelPairKey([item.brand, item.model]),
								type: 'button',
								role: 'option',
								'aria-selected': checked,
								className: 'vm-operate-city-chip' + (checked ? ' active' : ''),
								onClick: function () { togglePair(item.brand, item.model); },
							}, item.model);
						}),
				),
			),
		),
	);

	return React.createElement('div', { className: 'vm-operate-city-field lc-lease-order-brand-model-picker' },
		React.createElement(Popover, {
			trigger: 'click',
			placement: 'bottomLeft',
			open: open,
			onOpenChange: handleOpenChange,
			overlayClassName: 'lc-lease-order-service-popover',
			getPopupContainer: function () { return document.body; },
			content: popoverContent,
		},
			React.createElement('div', {
				className: 'vm-filter-picker-control lc-lease-order-brand-model-picker__trigger' + (open ? ' open' : ''),
				role: 'combobox',
				'aria-label': '品牌车型',
				'aria-expanded': open,
				tabIndex: 0,
				'data-annotation-id': 'lc-lease-order-brand-model',
			},
				selected.length > 0
					? React.createElement('div', { className: 'lc-lease-order-brand-model-picker__summary-list' },
						labels.map(function (label) {
							return React.createElement('span', {
								key: label,
								className: 'lc-lease-order-brand-model-picker__summary-line',
							}, label);
						}),
					)
					: React.createElement('span', {
						className: 'vm-filter-picker-input lc-lease-order-brand-model-picker__summary is-placeholder',
					}, '请选择品牌 / 型号'),
				selected.length > 0 ? React.createElement('button', {
					type: 'button',
					className: 'vm-filter-picker-clear',
					onClick: clearAll,
					'aria-label': '清空品牌车型',
					tabIndex: -1,
				}, React.createElement(X, { size: 14, 'aria-hidden': true })) : null,
				React.createElement(ChevronDown, { size: 14, className: 'vm-filter-picker-chevron', 'aria-hidden': true }),
			),
		),
	);
}

function LeaseOrderPlateNoField(props) {
	var selected = normalizePlateNos({ plateNos: props.value });
	var onChange = props.onChange;
	var brandModels = props.brandModels || [];
	var openState = React.useState(false);
	var queryState = React.useState('');
	var bulkState = React.useState('');
	var open = openState[0];
	var setOpen = openState[1];
	var query = queryState[0];
	var setQuery = queryState[1];
	var bulkText = bulkState[0];
	var setBulkText = bulkState[1];
	var plateOptions = getReadyVehiclePlateOptions(brandModels);
	var normalizedQuery = query.trim().toUpperCase();
	var filteredOptions = plateOptions.filter(function (opt) {
		if (!normalizedQuery) return true;
		return opt.label.toUpperCase().indexOf(normalizedQuery) >= 0;
	});

	function handleOpenChange(nextOpen) {
		setOpen(nextOpen);
		if (!nextOpen) {
			setQuery('');
			setBulkText('');
		}
	}

	function togglePlate(plate) {
		if (plate === PLATE_ACTUAL_DELIVERY) {
			onChange([PLATE_ACTUAL_DELIVERY]);
			return;
		}
		var next = selected.filter(function (item) { return item !== PLATE_ACTUAL_DELIVERY; });
		if (next.indexOf(plate) >= 0) {
			onChange(next.filter(function (item) { return item !== plate; }));
			return;
		}
		onChange(next.concat([plate]));
	}

	function applyBulkPlates() {
		var parsed = parsePlateSearchText(bulkText);
		if (!parsed.length) return;
		var next = selected.filter(function (item) { return item !== PLATE_ACTUAL_DELIVERY; });
		parsed.forEach(function (plate) {
			if (next.indexOf(plate) < 0) next.push(plate);
		});
		onChange(next.length ? next : [PLATE_ACTUAL_DELIVERY]);
		setBulkText('');
	}

	function clearAll(event) {
		event.preventDefault();
		event.stopPropagation();
		onChange([PLATE_ACTUAL_DELIVERY]);
	}

	var popoverContent = React.createElement('div', {
		className: 'vm-operate-city-edit-body lc-lease-order-plate-popover__panel',
	},
		React.createElement('label', { className: 'vm-operate-city-edit-search' },
			React.createElement(Search, { size: 16, 'aria-hidden': true, className: 'vm-operate-city-edit-search-icon' }),
			React.createElement('input', {
				type: 'text',
				className: 'vm-operate-city-edit-search-input',
				value: query,
				placeholder: '搜索车牌号',
				'aria-label': '搜索车牌号',
				autoComplete: 'off',
				onChange: function (e) { setQuery(e.target.value); },
			}),
		),
		React.createElement('div', { className: 'lc-lease-order-plate-popover__bulk' },
			React.createElement('span', { className: 'lc-lease-order-plate-popover__bulk-label' }, '批量输入（每行一个车牌）'),
			React.createElement('textarea', {
				className: 'lc-lease-order-plate-popover__bulk-input',
				value: bulkText,
				rows: 3,
				placeholder: '粤A12345\n粤B67890',
				'aria-label': '批量输入车牌号',
				onChange: function (e) { setBulkText(e.target.value); },
			}),
			React.createElement('button', {
				type: 'button',
				className: 'vm-btn vm-btn-primary lc-lease-order-plate-popover__bulk-btn',
				onClick: applyBulkPlates,
			}, '确认添加'),
		),
		React.createElement('button', {
			type: 'button',
			className: 'vm-operate-city-chip lc-lease-order-plate-popover__actual' + (selected.length === 1 && selected[0] === PLATE_ACTUAL_DELIVERY ? ' active' : ''),
			onClick: function () { onChange([PLATE_ACTUAL_DELIVERY]); },
		}, PLATE_ACTUAL_DELIVERY),
		React.createElement('div', { className: 'vm-operate-city-edit-chips', role: 'listbox', 'aria-label': '车牌号列表', 'aria-multiselectable': true },
			filteredOptions.length === 0
				? React.createElement('p', { className: 'vm-operate-city-empty' }, '暂无匹配车牌，可批量输入')
				: filteredOptions.map(function (opt) {
					var checked = selected.indexOf(opt.value) >= 0;
					return React.createElement('button', {
						key: opt.value,
						type: 'button',
						role: 'option',
						'aria-selected': checked,
						className: 'vm-operate-city-chip' + (checked ? ' active' : ''),
						onClick: function () { togglePlate(opt.value); },
					}, opt.label);
				}),
		),
	);

	return React.createElement('div', { className: 'vm-operate-city-field lc-lease-order-plate-picker' },
		React.createElement(Popover, {
			trigger: 'click',
			placement: 'bottomLeft',
			open: open,
			onOpenChange: handleOpenChange,
			overlayClassName: 'lc-lease-order-service-popover',
			getPopupContainer: function () { return document.body; },
			content: popoverContent,
		},
			React.createElement('div', {
				className: 'vm-filter-picker-control lc-lease-order-plate-picker__trigger' + (open ? ' open' : ''),
				role: 'combobox',
				'aria-label': '车牌号',
				'aria-expanded': open,
				tabIndex: 0,
				'data-annotation-id': 'lc-lease-order-plate-no',
			},
				React.createElement('div', { className: 'lc-lease-order-plate-picker__summary-list' },
					selected.map(function (plate) {
						return React.createElement('span', {
							key: plate,
							className: 'lc-lease-order-plate-picker__summary-line',
						}, plate);
					}),
				),
				!(selected.length === 1 && selected[0] === PLATE_ACTUAL_DELIVERY) ? React.createElement('button', {
					type: 'button',
					className: 'vm-filter-picker-clear',
					onClick: clearAll,
					'aria-label': '重置车牌号',
					tabIndex: -1,
				}, React.createElement(X, { size: 14, 'aria-hidden': true })) : null,
				React.createElement(ChevronDown, { size: 14, className: 'vm-filter-picker-chevron', 'aria-hidden': true }),
			),
		),
	);
}

function LeaseOrderAmountField(props) {
	return React.createElement('div', { className: 'lc-form-inline-sentence lc-lease-order-table__amount' },
		React.createElement('div', { className: 'lc-lease-order-table__amount-field' }, props.children),
		React.createElement('span', { className: 'lc-form-inline-sentence__text' }, '元'),
	);
}

function LeaseOrderRowActions(props) {
	return React.createElement('div', { className: 'lc-lease-order-editor__actions' },
		React.createElement('button', {
			type: 'button',
			className: 'lc-lease-order-editor__action-btn lc-lease-order-editor__remove-btn',
			onClick: function () { props.onRemove(props.rowId); },
			'aria-label': '删除该行',
		}, React.createElement(Trash2, { size: 14, 'aria-hidden': true })),
	);
}

function LeaseOrderEditor(props) {
	var order = props.order || createDefaultLeaseOrderState();
	var onChange = props.onChange;
	var rows = order.rows || [];

	function patchOrder(patch) {
		var next = Object.assign({}, order, patch);
		if (!isInsuredVehicleCountEditable(next)) {
			next.insuredVehicleCount = calcInsuredVehicleCount(next);
		}
		if ('insuredVehicleCount' in patch || 'rows' in patch) {
			next.rows = (next.rows || rows).map(function (row) {
				var subtotal = calcRentServiceSubtotal(
					row.rent,
					row.serviceFee,
					getRowVehicleCountForPricing(row, next),
				);
				return Object.assign({}, row, { rentServiceSubtotal: subtotal });
			});
		}
		onChange(next);
	}

	function updateRows(nextRows) {
		patchOrder({ rows: nextRows });
	}

	function updateRow(id, patch) {
		updateRows(rows.map(function (row) {
			if (row.id !== id) return row;
			var next = Object.assign({}, row, patch);
			if ('rent' in patch || 'serviceFee' in patch || 'plateNos' in patch || 'brandModels' in patch) {
				next.rentServiceSubtotal = calcRentServiceSubtotal(
					next.rent,
					next.serviceFee,
					getRowVehicleCountForPricing(next, Object.assign({}, order, { rows: rows })),
				);
			}
			return next;
		}));
	}

	function removeRow(id) {
		if (rows.length <= 1) {
			updateRows([createEmptyLeaseOrderRow()]);
			return;
		}
		updateRows(rows.filter(function (row) { return row.id !== id; }));
	}

	var deliveryDateValue = order.deliveryDate ? dayjs(order.deliveryDate) : null;
	var insuredVehicleCount = calcInsuredVehicleCount(order);
	var insuredCountEditable = isInsuredVehicleCountEditable(order);
	var orderKpis = calcLeaseOrderKpis(rows, order);

	return React.createElement('div', { className: 'lc-lease-order-editor' },
		React.createElement('div', { className: 'lc-lease-order-kpi-row vm-kpi-row', role: 'group', 'aria-label': '订单费用汇总' },
			React.createElement('div', { className: 'vm-kpi-card lc-lease-order-kpi-card lc-lease-order-kpi-card--rent' },
				React.createElement('span', { className: 'lc-lease-order-kpi-card__icon', 'aria-hidden': true }, '¥'),
				React.createElement('span', { className: 'vm-kpi-main' },
					React.createElement('span', { className: 'vm-kpi-eyebrow' }, '租金及服务费含税总价'),
					React.createElement('span', { className: 'vm-kpi-val tabular-nums' }, formatKpiAmount(orderKpis.rentServiceTaxTotal)),
				),
			),
			React.createElement('div', { className: 'vm-kpi-card lc-lease-order-kpi-card lc-lease-order-kpi-card--deposit' },
				React.createElement('span', { className: 'lc-lease-order-kpi-card__icon', 'aria-hidden': true }, '保'),
				React.createElement('span', { className: 'vm-kpi-main' },
					React.createElement('span', { className: 'vm-kpi-eyebrow' }, '保证金总计'),
					React.createElement('span', { className: 'vm-kpi-val tabular-nums' }, formatKpiAmount(orderKpis.depositTotal)),
				),
			),
			React.createElement('div', { className: 'vm-kpi-card lc-lease-order-kpi-card lc-lease-order-kpi-card--first' },
				React.createElement('span', { className: 'lc-lease-order-kpi-card__icon', 'aria-hidden': true }, '首'),
				React.createElement('span', { className: 'vm-kpi-main' },
					React.createElement('span', { className: 'vm-kpi-eyebrow' }, '首期租金及服务费含税'),
					React.createElement('span', { className: 'vm-kpi-val tabular-nums' }, formatKpiAmount(orderKpis.firstPeriodRentService)),
				),
			),
		),
		React.createElement('div', { className: 'lc-lease-order-editor__summary lc-form-grid lc-form-grid--pair' },
			React.createElement(FormField, { label: '租赁车辆数' },
				React.createElement('div', { className: 'lc-form-inline-sentence' },
					React.createElement('span', { className: 'lc-form-inline-sentence__text' }, '租赁车辆含保险总计'),
					insuredCountEditable
						? React.createElement(InputNumber, {
							className: 'lc-form-number lc-form-inline-sentence__input vm-focus-border',
							controls: false,
							min: 1,
							step: 1,
							precision: 0,
							value: order.insuredVehicleCount != null ? order.insuredVehicleCount : insuredVehicleCount,
							onChange: function (v) { patchOrder({ insuredVehicleCount: v }); },
							'aria-label': '租赁车辆含保险总计',
							'data-annotation-id': 'lc-lease-order-insured-count',
						})
						: React.createElement('div', { className: 'lc-form-inline-sentence__readonly' },
							React.createElement(ReadonlyValue, {
								value: insuredVehicleCount > 0 ? String(insuredVehicleCount) : '',
								label: '租赁车辆含保险总计',
							}),
						),
					React.createElement('span', { className: 'lc-form-inline-sentence__text' }, '辆'),
				),
			),
			React.createElement(FormField, {
				label: '保险金额/辆',
				labelHint: React.createElement(FormFieldLabelHint, {
					annotationId: 'lc-lease-order-third-party-hint',
					text: '仅记录保额并同步至右侧预览，不计入本卡片及其他费用计算。',
				}),
			},
				React.createElement('div', { className: 'lc-form-inline-sentence' },
					React.createElement('span', { className: 'lc-form-inline-sentence__text' }, '三者责任险'),
					React.createElement(InputNumber, {
						className: 'lc-form-number lc-form-inline-sentence__input vm-focus-border',
						controls: false,
						min: 0,
						step: 0.01,
						precision: 2,
						value: order.thirdPartyLiabilityMillion,
						onChange: function (v) { patchOrder({ thirdPartyLiabilityMillion: v }); },
						'aria-label': '三者责任险金额',
						'data-annotation-id': 'lc-lease-order-third-party',
					}),
					React.createElement('span', { className: 'lc-form-inline-sentence__text' }, '万元、车损'),
				),
			),
		),
		React.createElement('div', {
			className: 'lc-lease-order-editor__clause-hint',
			id: 'lc-brand-clause-hint-order',
			'data-annotation-id': 'lc-brand-clause-hint-order',
		},
			React.createElement(BrandModelsClauseHint, { brandModels: aggregateOrderBrandModels(rows) }),
		),
		React.createElement('div', { className: 'lc-lease-order-editor__table-wrap', role: 'region', 'aria-label': '租赁订单车辆列表' },
			React.createElement('table', { className: 'lc-lease-order-editor__table' },
				React.createElement('thead', null,
					React.createElement('tr', { className: 'lc-lease-order-editor__head-row' },
						React.createElement('th', { rowSpan: 2, scope: 'col', className: 'lc-lease-order-editor__th-brand' }, '品牌 / 车型'),
						React.createElement('th', { rowSpan: 2, scope: 'col' }, '车牌号'),
						React.createElement('th', { rowSpan: 2, scope: 'col', className: 'lc-lease-order-editor__th-subtotal' }, '租金及服务费小计（元/月/辆，含税）'),
						React.createElement('th', { colSpan: 3, scope: 'colgroup', className: 'lc-lease-order-editor__th-group' }, '价格及服务内容'),
						React.createElement('th', { rowSpan: 2, scope: 'col' }, '保证金（元/辆）'),
						React.createElement('th', { rowSpan: 2, scope: 'col', className: 'lc-lease-order-editor__th-period' }, '租赁期限（月）'),
						React.createElement('th', { rowSpan: 2, scope: 'col', className: 'lc-lease-order-editor__actions-col' }, '操作'),
					),
					React.createElement('tr', { className: 'lc-lease-order-editor__head-row lc-lease-order-editor__head-row--sub' },
						React.createElement('th', { scope: 'col' }, '车辆租金（元/月/辆，含税）'),
						React.createElement('th', { scope: 'col' }, '服务费（含税）'),
						React.createElement('th', { scope: 'col' }, '服务内容'),
					),
				),
				React.createElement('tbody', null,
					rows.map(function (row) {
						var extraServices = normalizeExtraServices(row);
						var brandModels = normalizeBrandModels(row);
						var plateNos = normalizePlateNos(row);
						var vehicleCount = getRowVehicleCountForPricing(row, order);
						var subtotal = calcRentServiceSubtotal(row.rent, row.serviceFee, vehicleCount);
						return React.createElement('tr', { key: row.id },
							React.createElement('td', { className: 'lc-lease-order-editor__brand-cell' },
								React.createElement(LeaseOrderBrandModelField, {
									value: brandModels,
									onChange: function (values) {
										updateRow(row.id, { brandModels: values || [] });
									},
								}),
							),
							React.createElement('td', null,
								React.createElement(LeaseOrderPlateNoField, {
									value: plateNos,
									brandModels: brandModels,
									onChange: function (values) {
										updateRow(row.id, { plateNos: values && values.length ? values : [PLATE_ACTUAL_DELIVERY] });
									},
								}),
							),
							React.createElement('td', null,
								React.createElement(LeaseOrderAmountField, null,
									React.createElement(ReadonlyValue, {
										value: subtotal != null ? String(subtotal) : '',
										label: '租金及服务费小计',
									}),
								),
							),
							React.createElement('td', null,
								React.createElement(LeaseOrderAmountField, null,
									React.createElement(InputNumber, {
										className: 'lc-form-number vm-focus-border',
										controls: false,
										min: 0,
										step: 0.01,
										precision: 2,
										value: row.rent,
										onChange: function (v) { updateRow(row.id, { rent: v }); },
										placeholder: '车辆租金',
										style: { width: '100%' },
										'aria-label': '车辆租金',
									}),
								),
							),
							React.createElement('td', null,
								React.createElement(LeaseOrderAmountField, null,
									React.createElement(InputNumber, {
										className: 'lc-form-number vm-focus-border',
										controls: false,
										min: 0,
										max: 99,
										step: 1,
										precision: 0,
										value: row.serviceFee,
										onChange: function (v) { updateRow(row.id, { serviceFee: v }); },
										placeholder: '服务费',
										style: { width: '100%' },
										'aria-label': '服务费',
									}),
								),
							),
							React.createElement('td', null,
								React.createElement(LeaseOrderServiceContentField, {
									value: extraServices,
									onChange: function (values) {
										updateRow(row.id, { extraServices: values || [] });
									},
								}),
							),
							React.createElement('td', null,
								React.createElement(LeaseOrderAmountField, null,
									React.createElement(InputNumber, {
										className: 'lc-form-number vm-focus-border',
										controls: false,
										min: 0,
										step: 0.01,
										precision: 2,
										value: row.deposit,
										onChange: function (v) { updateRow(row.id, { deposit: v }); },
										style: { width: '100%' },
										'aria-label': '保证金',
									}),
								),
							),
							React.createElement('td', { className: 'lc-lease-order-editor__period-cell' },
								React.createElement(InputNumber, {
									className: 'lc-form-number lc-lease-order-period-input vm-focus-border',
									controls: false,
									min: 1,
									step: 1,
									precision: 0,
									value: row.leasePeriodMonths,
									onChange: function (v) {
										updateRow(row.id, {
											leasePeriodMonths: v,
											leasePeriodStart: null,
											leasePeriodEnd: null,
										});
									},
									placeholder: '月数',
									'aria-label': '车辆租赁期限',
									'data-annotation-id': 'lc-lease-order-lease-period',
								}),
							),
							React.createElement('td', { className: 'lc-lease-order-editor__actions-col' },
								React.createElement(LeaseOrderRowActions, {
									rowId: row.id,
									onRemove: removeRow,
								}),
							),
						);
					}),
				),
			),
		),
		React.createElement('div', { className: 'lc-lease-order-editor__delivery lc-form-grid lc-form-grid--pair' },
			React.createElement(FormField, {
				label: '车辆交付（交还）地点',
				labelHint: React.createElement(FormFieldLabelHint, {
					annotationId: 'lc-lease-order-delivery-region-hint',
					text: '交还地点决定由哪个区域运维负责交车与还车。',
				}),
			},
				React.createElement(Cascader, {
					className: 'lc-form-cascader vm-focus-border',
					options: PROVINCE_CITY_CASCADER_OPTIONS,
					value: order.deliveryRegion && order.deliveryRegion.length ? order.deliveryRegion : undefined,
					onChange: function (value) { patchOrder({ deliveryRegion: value || [] }); },
					placeholder: '请选择省 / 市',
					showSearch: true,
					'aria-label': '车辆交付交还地点',
					'data-annotation-id': 'lc-lease-order-delivery-region',
				}),
			),
			React.createElement(FormField, {
				label: '车辆交付时间',
				labelHint: React.createElement(FormFieldLabelHint, {
					annotationId: 'lc-lease-order-delivery-date-hint',
					text: '用于生成交车任务时，提示运维何时交车。',
				}),
			},
				React.createElement(DatePicker, {
					className: 'lc-form-datepicker vm-focus-border',
					style: { width: '100%' },
					placeholder: '请选择日期',
					value: deliveryDateValue,
					onChange: function (_date, dateString) {
						patchOrder({ deliveryDate: dateString || null });
					},
					'aria-label': '车辆交付时间',
					'data-annotation-id': 'lc-lease-order-delivery-date',
				}),
			),
		),
	);
}

function PowerOfAttorneyEditor(props) {
	var poa = props.poa || createDefaultPowerOfAttorneyState();
	var onChange = props.onChange;
	var delegates = poa.delegates || [];

	function patchPoa(patch) {
		onChange(Object.assign({}, poa, patch));
	}

	function updateDelegates(nextDelegates) {
		patchPoa({ delegates: nextDelegates });
	}

	function updateDelegate(id, patch) {
		updateDelegates(delegates.map(function (row) {
			if (row.id !== id) return row;
			return Object.assign({}, row, patch);
		}));
	}

	function addDelegate() {
		if (delegates.length >= POA_MAX_DELEGATES) {
			message.warning('一份授权委托书最多添加 ' + POA_MAX_DELEGATES + ' 个受托人');
			return;
		}
		updateDelegates(delegates.concat([createEmptyDelegateRow()]));
	}

	function removeDelegate(id) {
		if (delegates.length <= 1) {
			updateDelegates([createEmptyDelegateRow()]);
			return;
		}
		updateDelegates(delegates.filter(function (row) { return row.id !== id; }));
	}

	var hasStartedDelegate = delegates.some(isDelegateRowStarted);

	return React.createElement('div', { className: 'lc-poa-editor' },
		delegates.map(function (row, index) {
			var started = isDelegateRowStarted(row);
			return React.createElement('div', {
				key: row.id,
				className: 'lc-poa-editor__row',
				role: 'group',
				'aria-label': '受托人 ' + (index + 1),
			},
				delegates.length > 1 ? React.createElement('div', { className: 'lc-poa-editor__row-head' },
					React.createElement('span', { className: 'lc-poa-editor__row-index' }, '受托人 ' + (index + 1)),
				) : null,
				React.createElement('div', { className: 'lc-poa-editor__fields lc-poa-editor__fields--inline' },
					React.createElement(FormField, { label: '姓名', required: started },
						React.createElement(Input, {
							className: 'lc-form-input vm-focus-border',
							value: row.name,
							onChange: function (e) { updateDelegate(row.id, { name: e.target.value }); },
							placeholder: '请输入姓名',
							allowClear: true,
							'aria-label': '受托人姓名',
						}),
					),
					React.createElement(FormField, { label: '联系方式', required: started },
						React.createElement(Input, {
							className: 'lc-form-input vm-focus-border',
							value: row.contact,
							onChange: function (e) { updateDelegate(row.id, { contact: e.target.value }); },
							placeholder: '请输入联系方式',
							allowClear: true,
							'aria-label': '受托人联系方式',
						}),
					),
					React.createElement(FormField, { label: '证件号码', required: started },
						React.createElement(Input, {
							className: 'lc-form-input vm-focus-border',
							value: row.idNumber,
							onChange: function (e) { updateDelegate(row.id, { idNumber: e.target.value }); },
							placeholder: '请输入证件号码',
							allowClear: true,
							'aria-label': '受托人证件号码',
						}),
					),
					React.createElement('div', { className: 'lc-poa-editor__row-action lc-poa-editor__row-action--ops' },
						React.createElement('span', { className: 'lc-poa-editor__ops-label' }, '操作'),
						React.createElement('button', {
							type: 'button',
							className: 'lc-poa-editor__remove-btn',
							onClick: function () { removeDelegate(row.id); },
							'aria-label': '删除受托人 ' + (index + 1),
							title: '删除',
						}, React.createElement(Trash2, { size: 14, 'aria-hidden': true })),
					),
				),
			);
		}),
		React.createElement('div', { className: 'lc-poa-editor__toolbar' },
			React.createElement(Button, {
				type: 'dashed',
				className: 'lc-poa-editor__add-btn',
				onClick: addDelegate,
				disabled: delegates.length >= POA_MAX_DELEGATES,
				icon: React.createElement(Plus, { size: 14, 'aria-hidden': true }),
			}, hasStartedDelegate && delegates.length < POA_MAX_DELEGATES ? '新增受托人' : '新增受托人（' + delegates.length + '/' + POA_MAX_DELEGATES + '）'),
		),
	);
}

function CustomerCredentialThumb(props) {
	var label = props.label;
	var previewUrl = props.previewUrl;
	return React.createElement('div', { className: 'lc-attach-thumb' },
		React.createElement(Image, {
			className: 'lc-attach-thumb__img',
			src: previewUrl,
			alt: label,
			preview: { src: previewUrl },
			fallback: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240"><rect width="100%" height="100%" fill="#f1f5f9"/></svg>'),
		}),
		React.createElement('div', { className: 'lc-attach-thumb__meta' },
			React.createElement('span', { className: 'lc-attach-thumb__label' }, label),
		),
	);
}

function FormFieldLabelHint(props) {
	if (!props.text) return null;

	return React.createElement('span', {
		className: 'lc-form-card__hint lc-form-field__inline-hint',
		role: 'note',
		id: props.id,
		'data-annotation-id': props.annotationId || undefined,
	},
		React.createElement(Info, {
			size: 13,
			className: 'lc-form-card__hint-icon',
			'aria-hidden': true,
		}),
		React.createElement('span', { className: 'lc-form-card__hint-text' }, props.text),
	);
}

function FormField(props) {
	var labelContent = [
		props.required ? React.createElement('span', { className: 'lc-form-field__required', 'aria-hidden': 'true' }, '*') : null,
		props.label,
	];
	var labelEl = props.labelHint
		? React.createElement('span', { className: 'lc-form-field__label-row' },
			React.createElement('span', { className: 'lc-form-field__label' }, labelContent),
			props.labelHint,
		)
		: React.createElement('span', { className: 'lc-form-field__label' }, labelContent);

	return React.createElement('label', { className: 'lc-form-field' },
		labelEl,
		props.children,
	);
}

function ReadonlyValue(props) {
	var hasValue = props.value != null && String(props.value).trim() !== '';
	return React.createElement('div', {
		className: 'lc-form-readonly lc-form-readonly--synced',
		'aria-readonly': 'true',
		'aria-label': props.label,
	},
		hasValue
			? props.value
			: React.createElement('span', { className: 'lc-form-readonly__empty' }, props.emptyHint || '—'),
	);
}

function ReadonlyPanel(props) {
	return React.createElement('div', {
		className: 'lc-readonly-panel',
		role: 'region',
		'aria-labelledby': props.titleId,
		'aria-readonly': 'true',
	},
		React.createElement('div', { className: 'lc-readonly-panel__head' },
			React.createElement('h3', { id: props.titleId, className: 'lc-readonly-panel__title' }, props.title),
			React.createElement('span', { className: 'lc-readonly-panel__badge' }, props.badge || '只读 · 档案同步'),
		),
		React.createElement('div', { className: 'lc-readonly-panel__body' }, props.children),
	);
}

function FormCardHint(props) {
	if (!props.text) return null;

	return React.createElement('span', {
		className: 'lc-form-card__hint',
		role: 'note',
		id: props.id,
	},
		React.createElement(Info, {
			size: 13,
			className: 'lc-form-card__hint-icon',
			'aria-hidden': true,
		}),
		React.createElement('span', { className: 'lc-form-card__hint-text' }, props.text),
	);
}

function EditorCard(props) {
	var collapsible = props.collapsible;
	var expanded = collapsible ? props.expanded !== false : true;
	var hintId = props.titleId + '-hint';
	var hintEl = props.desc && expanded
		? React.createElement(FormCardHint, { text: props.desc, id: hintId })
		: null;
	var titleRowEl = React.createElement('div', { className: 'lc-form-card__title-row' },
		React.createElement('h3', { id: props.titleId, className: 'vm-section-title' }, props.title),
		hintEl,
	);
	var toggleEl = collapsible ? React.createElement('button', {
		type: 'button',
		className: 'lc-form-card__toggle',
		onClick: props.onToggle,
		'aria-expanded': expanded,
		'aria-controls': props.bodyId,
	},
		React.createElement('span', null, expanded ? '收起' : '展开'),
		React.createElement(ChevronDown, {
			size: 14,
			className: 'lc-form-card__toggle-icon' + (expanded ? ' is-expanded' : ''),
			'aria-hidden': true,
		}),
	) : null;

	return React.createElement('section', {
		className: 'vm-detail-card lc-form-card' + (collapsible && !expanded ? ' is-collapsed' : ''),
		'aria-labelledby': props.titleId,
		'aria-describedby': hintEl ? hintId : undefined,
	},
		collapsible
			? React.createElement('div', { className: 'lc-form-card__header' }, titleRowEl, toggleEl)
			: titleRowEl,
		expanded ? React.createElement('div', {
			id: props.bodyId,
			className: collapsible ? 'lc-form-card__body' : 'lc-form-card__body lc-form-card__body--static',
		}, props.children) : null,
	);
}

export default function LeaseContractEditorForm(props) {
	var lessorId = props.lessorId;
	var customerId = props.customerId;
	var contractCode = props.contractCode || '';
	var businessDept = props.businessDept || '';
	var businessOwner = props.businessOwner || '';
	var mileage = props.mileage || DEFAULT_MILEAGE_STANDARD;
	var feeInfo = props.feeInfo || DEFAULT_FEE_INFO;
	var onLessorChange = props.onLessorChange;
	var onCustomerChange = props.onCustomerChange;
	var onContractCodeChange = props.onContractCodeChange;
	var onBusinessAssignmentChange = props.onBusinessAssignmentChange;
	var onMileageChange = props.onMileageChange;
	var onFeeInfoChange = props.onFeeInfoChange;

	var lessorCompanies = getLessorCompanies();
	var selectedLessor = getLessorCompanyById(lessorId);
	var selectedCustomer = getLeaseCustomerById(customerId);
	var invoice = getCustomerInvoicePreview(selectedCustomer);
	var lessorAccount = getLessorAccountPreview(selectedLessor);
	var lessorContact = getLessorContactPreview(selectedLessor);
	var customerContact = getCustomerContactPreview(selectedCustomer);
	var lessorEmptyHint = lessorId ? undefined : '请先选择甲方签约主体';
	var customerEmptyHint = customerId ? undefined : '请先选择乙方客户';
	var showPrepayAmount = feeInfo.hydrogenPaymentMethod === 'prepay';

	function patchMileage(patch) {
		onMileageChange(Object.assign({}, mileage, patch));
	}

	function patchFeeInfo(patch) {
		onFeeInfoChange(Object.assign({}, feeInfo, patch));
	}

	var signingExpandedState = React.useState(true);
	var signingExpanded = signingExpandedState[0];
	var setSigningExpanded = signingExpandedState[1];
	var mileageExpandedState = React.useState(true);
	var mileageExpanded = mileageExpandedState[0];
	var setMileageExpanded = mileageExpandedState[1];
	var feeExpandedState = React.useState(true);
	var feeExpanded = feeExpandedState[0];
	var setFeeExpanded = feeExpandedState[1];

	return React.createElement('div', { className: 'lc-main-contract-form' },
		React.createElement(EditorCard, {
			titleId: 'lc-card-signing',
			title: '签约信息',
			desc: '填写合同编号并选择甲乙双方；下方将自动带出档案信息。',
			collapsible: true,
			expanded: signingExpanded,
			onToggle: function () { setSigningExpanded(!signingExpanded); },
			bodyId: 'lc-card-signing-body',
		},
			React.createElement('div', { className: 'lc-signing-core' },
				React.createElement('div', { className: 'lc-form-grid' },
					React.createElement(FormField, { label: '合同编号', required: true },
						React.createElement(Input, {
							className: 'lc-form-input lc-contract-code-input vm-focus-border',
							addonBefore: CONTRACT_CODE_PREFIX,
							value: contractCode,
							onChange: function (e) { onContractCodeChange(e.target.value); },
							placeholder: '请输入合同编号',
							allowClear: true,
							'aria-label': '合同编号',
						}),
					),
					React.createElement(FormField, {
						label: '业务部门 / 业务人员',
						required: true,
					},
						React.createElement(BusinessDeptOwnerPickerField, {
							businessDept: businessDept,
							businessOwner: businessOwner,
							onChange: function (dept, owner) {
								if (onBusinessAssignmentChange) onBusinessAssignmentChange(dept, owner);
							},
						}),
					),
					React.createElement('div', { className: 'lc-form-grid lc-form-grid--pair' },
						React.createElement(FormField, {
							label: '甲方',
							required: true,
							labelHint: lessorId
								? React.createElement(FormFieldLabelHint, {
									annotationId: 'lc-lessor-select-hint',
									text: '将使用该公司用章进行电子签章',
								})
								: null,
						},
							React.createElement(Select, {
								className: 'lc-form-select vm-focus-border',
								placeholder: '请选择甲方签约主体',
								value: lessorId || undefined,
								allowClear: true,
								onChange: function (value) { onLessorChange(value || ''); },
								options: lessorCompanies.map(function (c) {
									return { value: c.id, label: c.legalName };
								}),
								'aria-label': '甲方签约主体',
							}),
						),
						React.createElement(FormField, {
							label: '乙方',
							required: true,
						},
							React.createElement(LeaseCustomerPickerField, {
								value: customerId,
								onChange: function (value) { onCustomerChange(value || ''); },
							}),
						),
					),
				),
			),
			lessorId || customerId
				? React.createElement('div', { className: 'lc-party-profiles' },
					lessorId ? React.createElement(ReadonlyPanel, {
						titleId: 'lc-lessor-account-title',
						title: '甲方信息',
						badge: '只读 · 甲方档案',
					},
						React.createElement('div', {
							id: 'lc-lessor-account-panel',
							className: 'lc-form-grid lc-form-grid--cols-2 lc-form-grid--readonly lc-invoice-readonly-panel lc-lessor-account-readonly-panel',
							'aria-label': '甲方信息，来自甲方档案只读',
						},
							React.createElement(FormField, { label: '户名' }, React.createElement(ReadonlyValue, { value: lessorAccount.accountName, emptyHint: lessorEmptyHint })),
							React.createElement(FormField, { label: '开户行' }, React.createElement(ReadonlyValue, { value: lessorAccount.bankName, emptyHint: lessorEmptyHint })),
							React.createElement(FormField, { label: '账号' }, React.createElement(ReadonlyValue, { value: lessorAccount.bankAccount, emptyHint: lessorEmptyHint })),
							React.createElement(FormField, { label: '通讯地址' }, React.createElement(ReadonlyValue, { value: lessorContact.mailAddress, emptyHint: lessorEmptyHint })),
							React.createElement(FormField, { label: '联系人姓名及电话' },
								React.createElement('div', { className: 'lc-form-contact-pair' },
									React.createElement(ReadonlyValue, { value: lessorContact.contactName, emptyHint: lessorEmptyHint }),
									React.createElement(ReadonlyValue, { value: lessorContact.contactPhone, emptyHint: lessorEmptyHint }),
								),
							),
							React.createElement(FormField, { label: '邮箱' }, React.createElement(ReadonlyValue, { value: lessorContact.email, emptyHint: lessorEmptyHint })),
						),
					) : null,
					customerId ? React.createElement(ReadonlyPanel, {
						titleId: 'lc-invoice-info-title',
						title: '乙方信息',
						badge: '只读 · 客户档案',
					},
						React.createElement('div', {
							id: 'lc-invoice-info-panel',
							className: 'lc-form-grid lc-form-grid--cols-2 lc-form-grid--readonly lc-invoice-readonly-panel',
							'aria-label': '乙方信息，来自客户表只读',
						},
							React.createElement(FormField, { label: '企业名称' }, React.createElement(ReadonlyValue, { value: invoice.companyName, emptyHint: customerEmptyHint })),
							React.createElement(FormField, { label: '开户银行' }, React.createElement(ReadonlyValue, { value: invoice.bank, emptyHint: customerEmptyHint })),
							React.createElement(FormField, { label: '银行账号' }, React.createElement(ReadonlyValue, { value: invoice.bankAccount, emptyHint: customerEmptyHint })),
							React.createElement(FormField, { label: '纳税人识别号' }, React.createElement(ReadonlyValue, { value: invoice.taxId, emptyHint: customerEmptyHint })),
							React.createElement(FormField, { label: '企业地址' }, React.createElement(ReadonlyValue, { value: invoice.mailingAddress, emptyHint: customerEmptyHint })),
							React.createElement(FormField, { label: '企业电话' }, React.createElement(ReadonlyValue, { value: invoice.companyPhone, emptyHint: customerEmptyHint })),
							React.createElement(FormField, { label: '通讯地址' }, React.createElement(ReadonlyValue, { value: customerContact.mailAddress, emptyHint: customerEmptyHint })),
							React.createElement(FormField, { label: '联系人姓名及电话' },
								React.createElement('div', { className: 'lc-form-contact-pair' },
									React.createElement(ReadonlyValue, { value: customerContact.contactName, emptyHint: customerEmptyHint }),
									React.createElement(ReadonlyValue, { value: customerContact.contactPhone, emptyHint: customerEmptyHint }),
								),
							),
							React.createElement(FormField, { label: '邮箱' }, React.createElement(ReadonlyValue, { value: customerContact.email, emptyHint: customerEmptyHint })),
						),
					) : null,
					customerId ? React.createElement('div', { className: 'lc-credentials-block' },
						React.createElement('div', { className: 'lc-credentials-block__head' },
							React.createElement('h4', { className: 'lc-credentials-block__title' }, '客户资质证照'),
							React.createElement('span', { className: 'lc-credentials-block__hint' }, '点击缩略图可放大预览'),
						),
						React.createElement('div', {
							className: 'lc-attach-gallery',
							'aria-label': '客户资质证照预览',
						},
							CUSTOMER_CREDENTIAL_ITEMS.map(function (item) {
								var previewUrl = getCustomerAttachmentPreviewUrl(selectedCustomer, item.key, item.label);
								return React.createElement(CustomerCredentialThumb, {
									key: item.key,
									label: item.label,
									previewUrl: previewUrl,
								});
							}),
						),
					) : null,
				)
				: React.createElement('div', { className: 'lc-party-profiles-empty', role: 'status' },
					React.createElement('p', { className: 'lc-party-profiles-empty__title' }, '选择签约双方后展示档案'),
					React.createElement('p', { className: 'lc-party-profiles-empty__desc' },
						'甲方、乙方的账户、联系人与资质证照将从档案自动同步，无需重复填写。',
					),
				),
		),
		React.createElement(EditorCard, {
			titleId: 'lc-card-mileage',
			title: '里程标准',
			desc: '对应合同正文中的最低里程与租金减免条款。',
			collapsible: true,
			expanded: mileageExpanded,
			onToggle: function () { setMileageExpanded(!mileageExpanded); },
			bodyId: 'lc-card-mileage-body',
		},
			React.createElement('div', { className: 'lc-form-grid' },
				React.createElement(FormField, { label: '是否有里程要求', required: true },
					React.createElement(Select, {
						className: 'lc-form-select vm-focus-border',
						value: mileage.hasRequirement ? 'yes' : 'no',
						onChange: function (value) {
							patchMileage({ hasRequirement: value === 'yes' });
						},
						options: [
							{ value: 'yes', label: '是' },
							{ value: 'no', label: '否' },
						],
						'aria-label': '是否有里程要求',
					}),
				),
				mileage.hasRequirement ? React.createElement('div', { className: 'lc-mileage-types-wrap' },
					React.createElement('span', { className: 'lc-mileage-types-wrap__label' }, '里程要求类型'),
					React.createElement('div', {
						className: 'lc-mileage-types',
						role: 'radiogroup',
						'aria-label': '里程要求类型',
					},
					MILEAGE_PERIOD_OPTIONS.map(function (option) {
						var checked = mileage.period === option.value;
						return React.createElement('label', {
							key: option.value,
							className: 'lc-mileage-type' + (checked ? ' is-active' : ''),
						},
							React.createElement('input', {
								type: 'radio',
								name: 'lc-mileage-period',
								className: 'lc-mileage-type__radio',
								checked: checked,
								onChange: function () { patchMileage({ period: option.value }); },
							}),
							React.createElement('span', { className: 'lc-mileage-type__text' }, option.labelBefore),
							React.createElement(InputNumber, {
								className: 'lc-form-number lc-mileage-type__input vm-focus-border',
								min: 0,
								step: 100,
								disabled: !checked,
								value: checked ? mileage.targetKm : null,
								onChange: function (v) {
									if (checked) {
										patchMileage({ targetKm: v != null ? v : DEFAULT_MILEAGE_STANDARD.targetKm });
									}
								},
								'aria-label': option.labelBefore + '里程',
							}),
							React.createElement('span', { className: 'lc-mileage-type__text' }, option.labelAfter),
						);
					}),
					),
				) : null,
			),
		),
		React.createElement(EditorCard, {
			titleId: 'lc-card-fee',
			title: '费用信息',
			desc: '付款周期、氢费支付方式与还车结算单价。',
			collapsible: true,
			expanded: feeExpanded,
			onToggle: function () { setFeeExpanded(!feeExpanded); },
			bodyId: 'lc-card-fee-body',
		},
			React.createElement('div', { className: 'lc-form-grid lc-form-grid--pair' },
				React.createElement(FormField, { label: '付款周期', required: true },
					React.createElement(Select, {
						className: 'lc-form-select vm-focus-border',
						value: feeInfo.paymentPeriod,
						onChange: function (value) {
							patchFeeInfo({ paymentPeriod: value != null ? value : DEFAULT_FEE_INFO.paymentPeriod });
						},
						options: PAYMENT_PERIOD_OPTIONS,
						'aria-label': '付款周期',
					}),
				),
				React.createElement(FormField, { label: '氢费支付方式', required: true },
					React.createElement(Select, {
						className: 'lc-form-select vm-focus-border',
						value: feeInfo.hydrogenPaymentMethod,
						onChange: function (value) {
							var next = value || DEFAULT_FEE_INFO.hydrogenPaymentMethod;
							patchFeeInfo({
								hydrogenPaymentMethod: next,
								prepayAmount: next === 'prepay' ? feeInfo.prepayAmount : null,
							});
						},
						options: HYDROGEN_PAYMENT_METHOD_OPTIONS,
						'aria-label': '氢费支付方式',
					}),
				),
				showPrepayAmount ? React.createElement(FormField, { label: '预付款金额', required: true },
					React.createElement(InputNumber, {
						className: 'lc-form-number vm-focus-border',
						controls: false,
						min: 0,
						step: 0.01,
						precision: 2,
						value: feeInfo.prepayAmount,
						onChange: function (v) { patchFeeInfo({ prepayAmount: v }); },
						addonAfter: '元',
						style: { width: '100%' },
						'aria-label': '预付款金额',
					}),
				) : null,
				showPrepayAmount ? React.createElement(FormField, { label: '支付时间', required: true },
					React.createElement('div', { className: 'lc-form-inline-sentence' },
						React.createElement('span', { className: 'lc-form-inline-sentence__text' }, '提前'),
						React.createElement(InputNumber, {
							className: 'lc-form-number lc-form-inline-sentence__input vm-focus-border',
							controls: true,
							min: 1,
							step: 1,
							precision: 0,
							value: feeInfo.payAheadWorkdays,
							onChange: function (v) {
								patchFeeInfo({
									payAheadWorkdays: v != null ? v : DEFAULT_FEE_INFO.payAheadWorkdays,
								});
							},
							'aria-label': '提前支付工作日天数',
						}),
						React.createElement('span', { className: 'lc-form-inline-sentence__text' }, '个工作日支付'),
					),
				) : null,
				React.createElement(FormField, { label: '还车氢量差单价', required: true },
					React.createElement(InputNumber, {
						className: 'lc-form-number vm-focus-border',
						controls: false,
						min: 0,
						step: 0.01,
						precision: 2,
						value: feeInfo.returnHydrogenDiffUnitPrice,
						onChange: function (v) { patchFeeInfo({ returnHydrogenDiffUnitPrice: v }); },
						addonAfter: '元',
						style: { width: '100%' },
						'aria-label': '还车氢量差单价',
					}),
				),
			),
		),
	);
}

export function LeaseContractLeaseOrderSection(props) {
	var leaseOrder = props.leaseOrder;
	var onLeaseOrderChange = props.onLeaseOrderChange;

	return React.createElement('div', { className: 'lc-create-editor-scroll lc-create-editor-scroll--section' },
		React.createElement(LeaseOrderEditor, {
			order: leaseOrder || createDefaultLeaseOrderState(),
			onChange: onLeaseOrderChange,
		}),
	);
}

export function LeaseContractPowerOfAttorneySection(props) {
	var powerOfAttorney = props.powerOfAttorney;
	var onPowerOfAttorneyChange = props.onPowerOfAttorneyChange;
	var contractRemark = props.contractRemark;
	var onContractRemarkChange = props.onContractRemarkChange;

	return React.createElement('div', { className: 'lc-create-editor-scroll lc-create-editor-scroll--section' },
		React.createElement(PowerOfAttorneyEditor, {
			poa: powerOfAttorney || createDefaultPowerOfAttorneyState(),
			onChange: onPowerOfAttorneyChange,
		}),
		React.createElement('div', {
			className: 'lc-contract-remark',
			'data-annotation-id': 'lc-create-contract-remark',
		},
			React.createElement(FormField, { label: '合同备注' },
				React.createElement(Input.TextArea, {
					className: 'lc-contract-remark__textarea vm-focus-border',
					rows: 4,
					maxLength: 500,
					showCount: true,
					value: contractRemark || '',
					onChange: function (e) {
						if (onContractRemarkChange) onContractRemarkChange(e.target.value);
					},
					placeholder: '请输入合同备注（选填）',
					'aria-label': '合同备注',
				}),
			),
		),
	);
}
