<%@ page language="java" pageEncoding="UTF-8" %>
	<%@ taglib uri="/ssTag" prefix="ss" %>

		<!DOCTYPE html>
		<html lang="en" style="font-size: 16px;">

		<head>
			<title>录入来访信息</title>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
			<link rel="stylesheet" href="/skin/easy/Main.css">
			<link rel="stylesheet" href="/skin/easy/mobiscroll.custom.css">
			<script type="text/javascript" src="/ss/jquery/jquery-1.7.2.min.js"></script>
			<script type="text/javascript" src="/ss/js/base.js"></script>
			<script type="text/javascript" src="/ss/js/common.js"></script>
			<script type="text/javascript" src="/ss/js/display.js"></script>
			<script type="text/javascript" src="/ss/js/edit.js"></script>
			<script type="text/javascript" src="/ss/js/mobiscroll.custom.js"></script>
			<script type="text/javascript" src="/ss/js/file.js"></script>
			<!-- <script type="text/javascript" src="/ss/js/objectPicker.js"></script> -->

			<style>
				th,
				td {
					border: 1px solid black;
					border-collapse: collapse;
				}

				table {
					table-layout: fixed;
					width: 100%;
					/* 确保表格占满容器宽度 */
				}

				.mobileForm table th {
					width: 8rem;
				}

				.mobileForm table td {
					font-size: 1rem;
				}

				.mobileDelete-button,
				.mobileAdd-button {
					margin-right: 5px;
				}

				.carNumberAdd {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.carNumberTd {
					padding: 5px !important;
				}

				.carNumberTd>div {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.carNumberTd>div>div {
					flex: 1;
				}

				.carNumberTd .mobileDelete-button {
					margin: 0 0 0 5px !important;
				}

				input[type='text'] {
					width: 100%;
				}

				.hidden {
					display: none;
				}
			</style>
		</head>

		<body>
		<%--
		来访对象：<%=request.getAttribute("lf")  %>
		姓名：<%=((base.po.LfPo)(request.getAttribute("lf"))).getXm() %>
		姓别码：${lf.xbm}
		--%>
		
			<!-- lfid - ${lf.lfid}
			1. lflbm - ${lf.lflbm}         // 来访类别
			2. jfrxm - ${lf.jfrxm}         // 受访人姓名
			3. jfrgrdh - ${lf.jfrgrdh}     // 个人电话
			4. jfxiaoqid - ${lf.jfxiaoqid} // 到访校区
			5. dwmc - ${lf.dwmc}           // 来访人单位
			6. jfbmid - ${lf.jfbmid}       // 酒店名
			7. rs - ${lf.rs}               // 来访人数
			8. yykssj - ${lf.yykssj}       // 预约开始时间
			9. yyjssj - ${lf.yyjssj}       // 预约结束时间
			10. jfryid - ${lf.jfryid}      // 受访人ID

			xm - ${lf.xm}
			xbm - ${lf.xbm}
			sfzjlbm - ${lf.sfzjlbm}
			sfzh - ${lf.sfzh}
			grdh - ${lf.grdh}
			clh - ${lf.clh} -->
		
		
			<div style="height: calc(100% - 3.5rem); overflow: auto" class="mobileForm">
				 
				<form action="/extRoot?type=3&token=${token}" method="post" id="myForm">
					<table>
						<tr>
							<th>来访类别</th>
							<td>
								<div class="ss-select-container" id="lflbm" value="${lf.lflbm}">
									<div class="ss-select">请选择</div>
									<div class="ss-options">
									</div>
									<input type="hidden" name="lflbm">
								</div>
							</td>
						</tr>
					</table>

					<table id="formSection2" class="hidden">
						<tr id="tr-jfrxm" class="hidden">
							<th>接访人姓名</th>
							<td>
								
								<input name="jfrxm" type="text" value="${lf.jfrxm}" />
							</td>
						</tr>
						
						<tr id="tr-jfrgrdh" class="hidden">
							<th>个人电话</th>
							<td>
								
								<input name="jfrgrdh" type="text"  value="${lf.jfrgrdh}"/>
							</td>
						</tr>
					</table>

					<div class="mobileForm-title hidden">来访信息</div>
					<table id="formSection3" class="hidden">
						<tr id="tr-jfxiaoqid" class="hidden">
							<th>到访校区</th>
							<td>
								<div class="ss-select-container" id="jfxiaoqid" value="${lf.jfxiaoqid}">
									<div class="ss-select">请选择校区</div>
									<div class="ss-options">

									</div>
									<input type="hidden" name="jfxiaoqid">
								</div>
							</td>
						</tr>
						
						
						<tr id="tr-jfbmid" class="hidden">
							<th>酒店名</th>
							<td>
								<div class="ss-select-container" id="jfbmid" value="${lf.jfbmid}">
									<div class="ss-select">请选择</div>
									<div class="ss-options">

									</div>
									<input type="hidden" name="jfbmid">
								</div>

							</td>
						</tr>
						<tr id="tr-dwmc" class="hidden">
							<th>来访人单位</th>
							<td>
								
								<input name="dwmc" type="text"  value="${lf.dwmc}"/>
							</td>
						</tr>
						<tr id="tr-sy" class="hidden">
							<th>事由</th>
							<td>
								
								<input name="sy" type="text"  value="${lf.sy}"/>
							</td>
						</tr>
						<tr id="tr-rs" class="hidden">
							<th>来访人数</th>
							<td>
								<input name="rs" type="text"  value="${lf.rs}"/>
							</td>
						</tr>
						<tr id="tr-yykssj" class="hidden">
							<th>预约日期</th>
							<td>
								<input name="yykssj" type="text" id="yykssj"  value="${lf.yykssj}"/>
							</td>
						</tr>
						<tr id="tr-yyjssj" class="hidden" style="display: none;">
							<th>预约结束时间</th>
							<td>
								<input name="yyjssj" type="text" id="yyjssj"  value="${lf.yyjssj}"/>
							</td>
						</tr>

					</table>


					<div class="mobileForm-title hidden">
						<span></span> <span class="mobileAdd-button" id="visitorAdd"></span>
					</div>
					<p style="margin: 1rem 0.5rem 0;">
						<span>申请入校免责声明</span>
						<br />
						<span>来访人员进校需申请报备，不得携带管制刀具、危化品、毒品等违法危险品进校，并如实声明所携带物品清单及合法性，若未如实告知，来访者和受访者需承担相关法律责任。</span>
					</p>
					<input type="hidden" id="sxry_num" name="sxry_num" value="" />
					<input type="hidden" name="lfsxry">
					<input type="hidden" name="jfryid" value="${lf.jfryid}">
				</form>
			</div>
			<div class="mobileBottom-div hidden">
				<div class="mobileBottom-down-div">
					<button class="mobileBottom-button" onclick="closePage()">取消</button>
					<button class="mobileBottom-button" onclick="submitForm()">
						保存并提交
					</button>
				</div>
			</div>
		</body>
		<script type="text/javascript" src="/ss/validation/validation.js"></script>
		<script type="text/javascript" src="/ss/js/licensePlateNumInp.js"></script>
		<script type="text/javascript" src="/ss/validator/commonValidator.js"></script>
		<script>
			let carNumberInstances = {}; // 以随行人员编号为键，存储每个随行人员的车牌号实例数组
			let uniqueVisitorIdCounter = 1; // 用于生成唯一的随行人员 ID
			let visitorCount = 0; // 当前有效随行人员计数
			let sxry_num = [];
			let initSelectData; // 用于存储初始的 select 数据
			// 校验器
			var wdVm = window.wdVm || new ValidationManager();
			wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
			wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
			wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
			wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
			// 通用的日期格式化函数
			function formatDateTime(date) {
				return (
					date.getFullYear() +
					"-" +
					("0" + (date.getMonth() + 1)).slice(-2) +
					"-" +
					("0" + date.getDate()).slice(-2) 
					//" " +
					// ("0" + date.getHours()).slice(-2) +
					// ":" +
					// ("0" + date.getMinutes()).slice(-2) +
					// ":" +
					// ("0" + date.getSeconds()).slice(-2)
				);
			}
			
			// 带时间的日期格式化函数
			function formatDateTimeWithTime(date, withTime) {
				const datePart = date.getFullYear() +
					"-" +
					("0" + (date.getMonth() + 1)).slice(-2) +
					"-" +
					("0" + date.getDate()).slice(-2);
					
				if (withTime) {
					return datePart + " " +
						("0" + date.getHours()).slice(-2) +
						":" +
						("0" + date.getMinutes()).slice(-2) +
						":" +
						("0" + date.getSeconds()).slice(-2);
				}
				
				return datePart;
			}
			// 创建分隔线和错误提示的函数
			function createValidation(container) {
				const parent = container.parentNode;

				// 生成分隔线
				let lineSpan = document.getElementById(container.id + 'Span');
				if (!lineSpan) {
					lineSpan = document.createElement('span'); // 创建线的 span
					lineSpan.id = container.id + 'Span'; // 使用指定格式的 id
					lineSpan.className = 'border-input-error vLine-leftWarning'; // 设置样式
					lineSpan.style.display = 'block'; // 初始状态隐藏分隔线
					parent.insertBefore(lineSpan, container.nextSibling); // 插入到 container 之后
				}

				// 生成错误提示
				let errorDiv = document.getElementById(container.id + 'ErrorDiv');
				if (!errorDiv) {
					errorDiv = document.createElement('div'); // 创建错误提示的 div
					errorDiv.id = container.id + 'ErrorDiv'; // 使用指定格式的 id
					errorDiv.className = 'error-message'; // 设置样式
					errorDiv.style.position = 'absolute';
					errorDiv.style.left = '0px';
					errorDiv.style.bottom = '0px';
					errorDiv.style.color = 'red';
					errorDiv.style.fontSize = '12px';
					errorDiv.style.width = '100%';
					errorDiv.style.textAlign = 'right';
					errorDiv.style.lineHeight = '18px';
					errorDiv.style.height = '18px';
					errorDiv.style.display = 'none'; // 初始状态隐藏
					parent.insertBefore(errorDiv, lineSpan ? lineSpan.nextSibling : container.nextSibling); // 插入到分隔线之后
				}
			}
			// 移除校验元素的函数
			function removeValidation(container) {
				const lineSpan = document.getElementById(container.id + 'Span');
				const errorDiv = document.getElementById(container.id + 'ErrorDiv');

				if (lineSpan) {
					lineSpan.remove(); // 删除分隔线
				}

				if (errorDiv) {
					errorDiv.remove(); // 删除错误提示
				}
			}
			// 更新错误提示信息的函数
			function updateMsg(container, msg) {
				let errorDiv = document.getElementById(container.id + 'ErrorDiv');
				// 如果未找到 errorDiv，先调用 createValidation 创建它
				if (!errorDiv) {
					createValidation(container);
					errorDiv = document.getElementById(container.id + 'ErrorDiv');
				}
				if (errorDiv) {
					errorDiv.textContent = msg; // 设置错误提示信息
					errorDiv.style.display = 'block'; // 显示错误提示
				}
			}
			
			let isValidStartTime = true;
			// let isValidEndTime = true;
			// 动态设置开始和结束时间
			function setInitialTime() {
				const yykssj = document.querySelector('#yykssj');
				const yyjssj = document.querySelector('#yyjssj');
				// 初始化开始时间
				var now = new Date();
				var oneHourLater = formatDateTime(new Date(now.getTime() + 3600 * 1000));
				
				// 设置结束时间为开始时间的 23:59:59
				var endDate = new Date(now.getTime() + 3600 * 1000);
				var endDateFormatted = endDate + ' 23:59:59';
				console.log('初始化的结束时间:',endDateFormatted)
				$("#yykssj")
					.mobiscroll()
					.datetime({
						display: "modal", // 弹出框显示
						dateFormat: "yy-mm-dd", // 日期格式：年-月-日
						dateOrder: "yyMMdd", // 设置为年-月-日顺序
						timeFormat: "", // 不显示时间选择器
						timeWheels: "", // 不显示时间滚轮
						lang: "zh", // 设置为中文
						onSelect:function(event,inst){
							console.log(event)
							// 解析 event 为 Date 对象
							// const selectedDate = new Date(event);
							// 设置时分秒为0:0:0
							// selectedDate.setHours(0, 0, 0, 0);
							removeValidation(yykssj);
							// isValidStartTime = true;
							yykssj.value = event;
							const endDate = event + ' 23:59:59';
							yyjssj.value = endDate; 
							// 获取当前时间
							// const currentDate = new Date();
							// currentDate.setHours(0,0,0,0);
							// if (selectedDate.getTime() >= currentDate.getTime()) {
							// 	console.log('selectedDate:',selectedDate.getTime())
							// 	console.log('currentDate:',currentDate.getTime())
							// 	console.log('selectedDate.getTime() >= currentDate.getTime():',selectedDate.getTime() >= currentDate.getTime())
							// 	removeValidation(yykssj);
							// 	isValidStartTime = true;

							// 	// 获取结束时间
							// 	const endTime = new Date(yyjssj.value);

							// 	// 设置开始时间的值为不带时间的日期格式，用于显示
							// 	yykssj.value = formatDateTime(selectedDate);
								
							// 	// 设置结束时间为当天的 23:59:59
							// 	const endDate = selectedDate + ' 23:59:59';
							// 	yyjssj.value = endDate; 
							// } else {
							// 	updateMsg(yykssj, "预约日期不能早于当前日期");
							// 	// yykssj.value = formatDateTime(new Date(now.getTime() + 3600 * 1000));
							// 	isValidStartTime = false;
							// }
						}
					}).val(oneHourLater);
				// 设置开始时间的显示格式（不带时间）
				yykssj.value = oneHourLater;
				// 设置结束时间的初始值为开始时间的 23:59:59
				yyjssj.value = endDateFormatted;
			}
			function closePage() {

				// 定义关闭页面的函数
				function closeWindow() {
					if (typeof WeixinJSBridge == "undefined") {
						// 监听WeixinJSBridgeReady事件
						document.addEventListener('WeixinJSBridgeReady', function () {
							WeixinJSBridge.call('closeWindow');
						}, false);
					} else {
						// 如果是微信浏览器，直接调用
						WeixinJSBridge.call('closeWindow');
					}
				}

				// 调用关闭页面函数
				closeWindow();
				
				// 如果不是微信浏览器，尝试使用window.close()关闭
				if (!/MicroMessenger/i.test(navigator.userAgent)) {
					window.close();
					window.history.back();
					
				}
			}
			var submitCount = 0;
			// 提交表单
			function submitForm() {
				// 处理开始时间，添加 00:00:00
				if(submitCount){
					alert('请勿重复提交')
					return false
				}
				const form = $("#myForm");
				const lflbm = $("input[name='lflbm']").val();
				let valid = false;
				const jfbmid = $("input[name='jfbmid']").val();
				const jfxiaoqid = $("input[name='jfxiaoqid']").val();
				const jfryid = $("input[name='jfryid']").val();
				const xbm = $("input[name='xbm']").val();
				const yykssj = document.querySelector('#yykssj');
				const yyjssj = document.querySelector('#yyjssj');
				if (!form[0].checkOnly(false)) { // 获取原生DOM元素并调用checkOnly
					// alert('原来的校验器,checkOnly不通过')
					valid = true;
				}
				// if (yykssj && yykssj.value) {
				// 	const newYykssj = yykssj.value + ' 00:00:00';
				// 	console.log('提交的时候一开始获取到的newYykssj:',newYykssj)
				// 	yykssj.value = newYykssj;
				// }
				// 
				
				// 校验时间是否有效
				if (!isValidStartTime) {
					alert("预约日期不能早于当前日期")
					valid = true;
				}
				if (xbm === '') {
					valid = true;
				}
				if(((lflbm!='61')&&(lflbm!='161')&&(lflbm!='71'))&&jfryid === '' ) {
					valid = true;
					alert('未查询到该受访人信息，请重新输入！');
				}
				// 校验校区
				if (jfxiaoqid === '' ) {
					valid = true;
				}
				
				// 如果随行人员不为0
				if (sxry_num.length > 0) {
					$("input[name='sxry_num']").val(sxry_num.join(','));
					// 用来存储所有对象
					var dataArray = [];
					// 遍历数组
					sxry_num.forEach(function(num) {
						if($('input[name="xbm_' + num + '"]').val() === ''){
							valid = true;
							alert("请选择随行人员"+ num +"的性别")
							return false;
						}

						// 获取每个字段的值，如果为空则赋值为 ""
						var entry = {
							xbm: $('input[name="xbm_' + num + '"]').val() || "",
							sfzjlbm: $('input[name="sfzjlbm_' + num + '"]').val() || "",
							xm: $('input[name="xm_' + num + '"]').val() || "",
							sfzh: $('input[name="sfzh_' + num + '"]').val() || "",
							grdh: $('input[name="grdh_' + num + '"]').val() || "",
							clh: $('input[name="clh_' + num + '"]').val() || "", // 车辆号
							// syfjid: $('input[name="syfjid_' + num + '"]').val() || ""
						};
					
						// 将每个对象添加到数组中
						dataArray.push(entry);
					});
					$('input[name="lfsxry"]').val(JSON.stringify(dataArray));
				}

				if (valid){
					console.log('提交的校验不通过')
					return;
				}
				if (yykssj && yykssj.value) {
					const newYykssj = yykssj.value + ' 00:00:00';
					console.log('yykssj.value:',newYykssj)
					yykssj.value = newYykssj;
				}
				yyjssj.value = yykssj.value.replace(' 00:00:00', ' 23:59:59');
				console.log(yykssj.value,yyjssj.value)
				submitCount = 1;

				// alert('预约结束时间yyjssj:'+yyjssj.value);
				// return ;
				form.submit();

			}


			// 生成随行人员
			function addVisitor(visitorId, visitorNumber, title) {
				// console.log(`当前访客id是` + visitorId, `当前访客编号是` + visitorNumber);
				const inputNum = (visitorId === 1 ? '' : '_' + (visitorId - 1)) // 提交给后端的后缀，如果是第一个证明是访客 不用加后缀；第二个开始变随行人员，加后缀1开始
				// console.log(`当前随行人员编号是` + (!inputNum ? ':访客不需要编号' : '_' + (visitorId - 1)));
				carNumberInstances[visitorId] = []; // 初始化新随行人员的车牌号实例数组
				let newFormHtml = `
			<div class="mobileForm-container" data-visitor-id="` + visitorId + `">
				<div class="mobileForm-title">
					<span>` + (title ? title : '随行人员' + visitorNumber) + `</span>
					<span class="mobileDelete-button"></span>
				</div>
				<table>
					
					<tr>
						<th>姓名</th>
						<td><input name="xm`+ inputNum + `" value="" type="text"/></td>
					</tr>
					<tr>
						<th>性别</th>
						<td>

							<div class="ss-select-container" id="xbm`+ inputNum + `" value="">
								<div class="ss-select">请选择</div>
								<div class="ss-options">
									<div data-value="1">男</div>
									<div data-value="2">女</div>
								</div>
								<input type="hidden" name="xbm`+ inputNum + `" >
							</div>
						<%--
						<input name="xbmName" style="width:90px;" type="text" />
						<ss:objp name='xbm' inp='false' cb='xb'/>
						--%>
						</td>
					</tr>
					
					<tr>
						<th>证件类别</th>
						<td>
							<div class="ss-select-container" id="sfzjlbm`+ inputNum + `" value="1">
								<div class="ss-select">请选择</div>
								<div class="ss-options">
									<div data-value="1">身份证</div>
								</div>
								<input type="hidden" name="sfzjlbm`+ inputNum + `" >
							</div>
						</td>
					</tr>
					<tr>
						<th>证件号</th>
						<td><input name="sfzh`+ inputNum + `" value="" type="text"/></td>
					</tr>
					<tr>
						<th>个人电话</th>
						<td><input name="grdh`+ inputNum + `" type="text"/></td>
					</tr>`
					+
					(visitorNumber === 0 ? `<tr><th>附件</th><td><div id="sywjlp"></div></td></tr>`:``) 
					+
					`
					<tr>
						<td colspan="2" style="text-align: center">
							车辆号
							<!-- <span class="mobileAdd-button carNumberAdd"></span> -->
						</td>
					</tr>
					<tr>
						<td colspan="2" class="carNumberTd">
							<div>
								<div id="carNumberInput` + visitorId + `-1"></div>
								<span class="mobileDelete-button carNumberDelete" style="visibility: hidden"></span>
							</div>
						</td>
					</tr>
				</table>
			</div>
		`;


				// 如果是第一个随行人员，访客
				if (visitorNumber === 0) {

					newFormHtml = `
			<div class="mobileForm-container" data-visitor-id="` + visitorId + `">
				<div class="mobileForm-title">
					<span>` + (title ? title : '随行人员' + visitorNumber) + `</span>
					<span class="mobileDelete-button"></span>
				</div>
				<table>
					
					<tr>
						<th>姓名</th>
						<td><input name="xm" value="${lf.xm}" type="text"/></td>
					</tr>
					<tr>
						<th>性别</th>
						<td>

							<div class="ss-select-container" id="xbm" value="${lf.xbm}">
								<div class="ss-select">请选择</div>
								<div class="ss-options">
									<div data-value="1">男</div>
									<div data-value="2">女</div>
								</div>
								<input type="hidden" name="xbm" >
							</div>
						<%--
						<input name="xbmName" style="width:90px;" type="text" />
						<ss:objp name='xbm' inp='false' cb='xb'/>
						--%>
						</td>
					</tr>
					
					<tr>
						<th>证件类别</th>
						<td>
							<div class="ss-select-container" id="sfzjlbm" value="${lf.sfzjlbm}">
								<div class="ss-select">请选择</div>
								<div class="ss-options">
									<div data-value="1">身份证</div>
								</div>
								<input type="hidden" name="sfzjlbm" >
							</div>
						</td>
					</tr>
					<tr>
						<th>证件号</th>
						<td><input name="sfzh" value="${lf.sfzh}" type="text"/></td>
					</tr>
					<tr>
						<th>个人电话</th>
						<td><input name="grdh" value="${lf.grdh}" type="text"/></td>
					</tr>`
					+
					(visitorNumber === 0 ? `<tr><th>附件</th><td><div id="sywjlp"></div></td></tr>`:``) 
					+
					`
					<tr>
						<td colspan="2" style="text-align: center">
							车辆号
							<!-- <span class="mobileAdd-button carNumberAdd"></span> -->
						</td>
					</tr>
					<tr>
						<td colspan="2" class="carNumberTd">
							<div>
								<div id="carNumberInput1-1"></div>
								<span class="mobileDelete-button carNumberDelete" style="visibility: hidden"></span>
							</div>
						</td>
					</tr>
				</table>
			</div>
		`;



					newFormHtml = newFormHtml.replace(
						'class="mobileDelete-button"',
						'class="mobileDelete-button" style="visibility: hidden"'
					);
					$(".mobileForm .mobileForm-title").last().before(newFormHtml);
					const uploadUrl = '<ss:serv name="lf_uploadFile"/>';
					const loadUrl = "<ss:serv name='lf_loadFile'/>";
					// 选择并上传文件，并生成预览
					mobileFileUpload('sywjlp', {
						uploadUrl,
						loadUrl,
						maxSize: 1, // 
						acceptedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'pdf','xlsx', 'docx', 'pptx', 'doc', 'ppt', 'xls','zip', 'rar', '7z'], // 限制文件类型
						maxFileSize: 20 * 1024 * 1024 // 单个文件最大为 5 MB
					});

				} else {
					// 新增随行人员时，追加到最后一个随行人员后面
					$(".mobileForm-container").last().after(newFormHtml);
				}
				// 初始化对应的随行人员的下拉信息
				const xbm = initSSSelect(`#xbm` + inputNum, initSelectData.XB, { text: 'mc', value: 'xbm' }, { enable: true });
				const sfzjlbm = initSSSelect('#sfzjlbm' + inputNum, initSelectData.SFZJLB, { text: 'mc', value: 'sfzjlbm' }, { enable: true });
				// 初始化对应的随行人员的校验
				wdVm.add("wd.commonValidator.notNull", [`xm` + inputNum], { msgPrfx: "姓名" }, 1);
				wdVm.add('wd.commonValidator.notNull', [`sfzjlbm` + inputNum], { 'msgPrfx': '身份证件类别' }, 1);
				// wdVm.add('wd.commonValidator.idCard',[`sfzh`+ inputNum],{'relField':`sfzh`+ inputNum+`,`+`sfzjlbm`+ inputNum,'msgPrfx':'身份证号'},1);
				wdVm.add("wd.commonValidator.idCard", ["sfzh" + inputNum], { msgPrfx: "证件号", notBlank: true, sfzjlbmName: `sfzjlbm` + inputNum }, 1);
				wdVm.add("wd.commonValidator.int", [`grdh` + inputNum], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);

				let carInput;
				// 处理第一个访客
				if (visitorId === 1) {
					carInput = new CarNumberInput('carNumberInput' + visitorId + '-1', 'clh', '粤')
					xbm.setValue('${lf.xbm}')
					sfzjlbm.setValue('${lf.sfzjlbm}')
				} else {
					carInput = new CarNumberInput('carNumberInput' + visitorId + '-1', 'clh' + inputNum, '粤')
				}
				carNumberInstances[visitorId].push(carInput);
				
			}
			/**
			 * 初始化自定义下拉框，支持设置默认值、回调函数、自定义选项数组和校验功能
			 * @param {string} containerSelector - 下拉框容器的CSS选择器
			 * @param {Array} optionsArray - 包含选项的数组对象 [{...}]（可选）
			 * @param {object} mapping - 映射对象，定义选项中用于显示文本和作为值的字段名 {text: '字段名', value: '字段名'}（可选）
			 * @param {object} validation - 校验对象，包含校验设置 {enable: true/false, message: '报错信息'}（可选）
			 * @param {function|null} callback - 选中后的回调函数（可选）
			 */
			function initSSSelect(containerSelector, optionsArray = [], mapping = { text: 'n', value: 'v' }, validation = { enable: false, message: '' }, callback = null) {
				
				const container = document.querySelector(containerSelector); // 获取容器
				if (!container) {
					console.error('容器未找到');
					return;
				}

				const ssSelect = container.querySelector('.ss-select'); // 获取显示区域
				const optionsContainer = container.querySelector('.ss-options'); // 获取选项容器
				const hiddenInput = container.querySelector('input[type="hidden"]'); // 隐藏的输入框

				// 获取容器的父级元素，以便插入错误提示
				const parent = container.parentNode;

				// 创建并插入分隔线 span
				let lineSpan = document.getElementById(containerSelector.replace(/[#.]/g, '') + 'Span');
				if (!lineSpan) {
					lineSpan = document.createElement('span'); // 创建线的 span
					lineSpan.id = containerSelector.replace(/[#.]/g, '') + 'Span'; // 使用指定格式的 id
					lineSpan.className = 'border-input-error vLine-leftWarning'; // 设置样式
					lineSpan.style.display = 'none'; // 显示分隔线
					parent.insertBefore(lineSpan, container.nextSibling); // 插入到 container 之后
				}
				if (validation.enable) {
					lineSpan.style.display = 'block'; // 显示分隔线
				}

				// 创建并插入错误提示的 div
				let errorDiv = document.getElementById(containerSelector.replace(/[#.]/g, '') + 'ErrorDiv');
				if (!errorDiv) {
					errorDiv = document.createElement('div'); // 创建错误提示的 div
					errorDiv.id = containerSelector.replace(/[#.]/g, '') + 'ErrorDiv'; // 使用指定格式的 id
					errorDiv.className = 'error-message'; // 设置样式
					errorDiv.style.position = 'absolute';
					errorDiv.style.left = '0px';
					errorDiv.style.bottom = '0px';
					errorDiv.style.color = 'red';
					errorDiv.style.fontSize = '12px';
					errorDiv.style.width = '100%';
					errorDiv.style.textAlign = 'right';
					errorDiv.style.lineHeight = '18px';
					errorDiv.style.height = '18px';
					errorDiv.style.display = 'none'; // 初始状态隐藏
					parent.insertBefore(errorDiv, lineSpan ? lineSpan.nextSibling : container.nextSibling); // 插入到分隔线之后
				}

				
				
				// 如果传入了选项数组，动态生成选项 DOM
				if (optionsArray.length > 0) {
					optionsContainer.innerHTML = ''; // 清空原有选项
					optionsArray.forEach(option => {
						const optionDiv = document.createElement('div');
						optionDiv.setAttribute('data-value', option[mapping.value]); // 使用映射的 value 作为选项值
						optionDiv.textContent = option[mapping.text]; // 使用映射的 text 作为显示文本
						optionsContainer.appendChild(optionDiv);
					});
				}else {
				    optionsContainer.innerHTML = '<div class="padding">无选项</div>';
				}

				// 点击下拉框时，打开或关闭选项列表
				ssSelect.addEventListener('click', function (event) {
					// 关闭其他所有下拉框
					document.querySelectorAll('.ss-select-container').forEach(cont => {
						if (cont !== container) {
							cont.classList.remove('open');
						}
					});

					// 切换当前下拉框的状态
					container.classList.add('open');
					event.stopPropagation(); // 阻止事件冒泡，防止点击下拉框时触发 document 的点击事件

					// 如果启用了校验且没有选中内容，则显示错误提示
					if (validation.enable && (!hiddenInput.value || hiddenInput.value === "")) {
						errorDiv.textContent = validation.message || ''; // 设置错误提示文字
						errorDiv.style.display = 'block'; // 显示错误提示
					}
				});

				// 处理选项点击事件
				optionsContainer.querySelectorAll('div').forEach(option => {
					option.addEventListener('click', function () {
						const value = this.getAttribute('data-value'); // 获取选项的值
						const text = this.textContent; // 获取选项的文本

						// 设置下拉框显示文本和隐藏输入框的值
						ssSelect.textContent = text;
						hiddenInput.value = value;

						// 移除所有其他选项的选中状态
						optionsContainer.querySelectorAll('div').forEach(opt => opt.classList.remove('selected'));

						// 为当前选中的选项添加选中状态
						this.classList.add('selected');

						// 关闭下拉框
						container.classList.remove('open');

						// 隐藏错误提示
						errorDiv.style.display = 'none';
						// 隐藏分隔线
						lineSpan.style.display = 'none';
						// parent.style.borderBottom = 'none';
						// 如果有回调函数，调用并传递选中的值
						if (callback && typeof callback === 'function') {
							callback(value);
						}
					});
				});

				// 从容器的 value 属性获取默认值
				const defaultValue = container.getAttribute('value');

				// 设置默认选中值
				if (defaultValue !== null && defaultValue !== "") {
					const defaultOption = optionsContainer.querySelector(`div[data-value="`+defaultValue+`"]`);
					if (defaultOption) {
						console.log('defaultOption',defaultOption.textContent)
						ssSelect.textContent = defaultOption.textContent; // 设置下拉框的默认文本
						hiddenInput.value = defaultOption.getAttribute('data-value'); // 设置隐藏输入框的默认值
						defaultOption.classList.add('selected'); // 设置选中状态
						// 隐藏错误提示
						errorDiv.style.display = 'none';
						// 隐藏分隔线
						lineSpan.style.display = 'none';
						
						// 如果有回调函数，执行回调
						if (callback && typeof callback === 'function') {
							callback(defaultValue);
						}
					}
				}

				// 点击其他地方关闭所有下拉框
				document.addEventListener('click', function () {
					container.classList.remove('open');
					// 如果启用了校验功能且没有选中项，显示错误提示
					if (validation.enable && (!hiddenInput.value || hiddenInput.value === "")) {
						errorDiv.textContent = validation.message; // 设置错误提示文字
						errorDiv.style.display = 'block'; // 显示校验错误信息
						// parent.style.borderBottom = '1px solid red';
					}
				});

				// 防止点击容器内部时触发 document 的点击事件
				container.addEventListener('click', function (event) {
					event.stopPropagation();
				});

				// 如果启用了校验功能且没有默认选中项，显示错误提示
				// if (validation.enable && (!defaultValue || defaultValue === "")) {
				// 	errorDiv.textContent = validation.message; // 设置错误提示文字
				// 	errorDiv.style.display = 'block'; // 显示校验错误信息
				// }
				return {
					setValue: function(value) {
						if (!value) {
							// 恢复到初始状态
							ssSelect.textContent = '请选择';
							hiddenInput.value = '';
							
							// 移除所有选中状态
							optionsContainer.querySelectorAll('div').forEach(opt => 
								opt.classList.remove('selected')
							);
							
							// 如果启用了校验,显示错误提示和分隔线
							if (validation.enable) {
								errorDiv.textContent = validation.message || '';
								errorDiv.style.display = 'block';
								lineSpan.style.display = 'block';
							}
							
							return true;
						}

						const option = optionsContainer.querySelector(`div[data-value="${value}"]`);
						if (option) {
							// 更新显示文本和隐藏输入框的值
							ssSelect.textContent = option.textContent;
							hiddenInput.value = value;
							
							// 更新选中状态
							optionsContainer.querySelectorAll('div').forEach(opt => opt.classList.remove('selected'));
							option.classList.add('selected');
							
							// 隐藏错误提示和分隔线
							errorDiv.style.display = 'none';
							lineSpan.style.display = 'none';
							
							// 如果有回调函数，执行回调
							if (callback && typeof callback === 'function') {
								callback(value);
							}
							
							return true;
						}
						return false;
					}
				};
			}
			// 清除所有表单部分的显示
			function hideAllSections() {
				// 隐藏所有部分
				$('#formSection2, #formSection2 tr').addClass('hidden');
				$('#formSection3, #formSection3 tr').addClass('hidden');

				
				// 清第二部分校验
				wdVm.remove("wd.commonValidator.notNull", ["jfrxm"]);
				wdVm.remove("wd.commonValidator.int", ["jfrgrdh"]);
				wdVm.remove("wd.commonValidator.notNull", ["zy"]);
				wdVm.remove("wd.commonValidator.notNull", ["bj"]);
				wdVm.remove("wd.commonValidator.int", ["rs"]);
				wdVm.remove("wd.commonValidator.notNull", ["dwmc"]);
				wdVm.remove("wd.commonValidator.notNull", ["sy"]);
			}

			/** 
			 * 处理 "探访学生" 的表单显示 
			 * 受访人信息显示:姓名、专业、班级、个人电话
			 * 来访信息显示:人数、预约开始时间、预约结束时间
			 */
			function handleStudentVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection2').removeClass('hidden'); // 显示表单部分2
				$('#tr-jfrxm, #tr-zy, #tr-bj, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
				// 加第二部分校验
				wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
				wdVm.add("wd.commonValidator.notNull", ["zy"], { msgPrfx: "专业" }, 1);
				wdVm.add("wd.commonValidator.notNull", ["bj"], { msgPrfx: "班级" }, 1);
				wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
				$('#formSection3').removeClass('hidden');
				$('#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); 
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
			}


			/** 
			 * 处理 "探访教职工" 的表单显示 
			 * 受访人信息显示：姓名、个人电话
			 * 来访信息显示:人数、预约开始时间、预约结束时间
			 */
			function handleStaffVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection2').removeClass('hidden'); // 显示表单部分2
				$('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
				wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
				wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
				$('#formSection3').removeClass('hidden');
				$('#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); 
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
				
			}

			/** 
			 * 处理 "物流配送" 的表单显示 
			 * 受访人信息显示：姓名、个人电话
			 * 来访信息显示:人数、预约开始时间、预约结束时间
			 */
			function handleLogisticsVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection2').removeClass('hidden'); // 显示表单部分2
				$('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
				wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
				wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
				$('#formSection3').removeClass('hidden');
				$('#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); 
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
				
			}

			/** 
			 * 处理 "公务" 的表单显示 
			 * 受访人信息显示：姓名、个人电话
			 * 来访信息显示:单位、人数、预约开始时间、预约结束时间
			 */
			function handleOfficialVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection2').removeClass('hidden'); // 显示表单部分2
				$('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
				wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
				wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
				$('#formSection3').removeClass('hidden'); // 显示表单部分3
				$('#tr-dwmc, #tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); // 显示公务相关字段
				wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
				
			}

			/** 
			 * 处理 "工作学习" 的表单显示 
			 * 受访人信息显示：姓名、个人电话
			 * 来访信息显示:人数、预约开始时间、预约结束时间
			 */
			function handleWorkStudyVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection2').removeClass('hidden'); // 显示表单部分2
				$('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
				wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
				wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
				$('#formSection3').removeClass('hidden');
				$('#tr-dwmc,#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); 
				wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
				
			}

			/** 
			 * 处理 "其他" 的表单显示 
			 * 受访人信息显示：姓名、个人电话
			 * 来访信息显示:人数、预约开始时间、预约结束时间
			 */
			function handleOtherVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection2').removeClass('hidden'); // 显示表单部分2
				$('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
				wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
				wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
				$('#formSection3').removeClass('hidden');
				$('#tr-jfxiaoqid,#tr-rs, #tr-yykssj,#tr-sy, #tr-dwmc').removeClass('hidden');
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
				wdVm.add("wd.commonValidator.notNull", ["sy"], { msgPrfx: "事由", notBlank: true }, 1);
				wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
				
			}

			/** 
			 * 处理 "酒店餐饮" 的表单显示 
			 * 受访人信息显示：无
			 * 来访信息显示:酒店名【下拉】、人数、预约开始时间、预约结束时间
			 */
			function handleHotelVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection3').removeClass('hidden');
				$('#tr-jfbmid, #tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); // 显示酒店相关字段
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
			}
			
			/** 
			 * 处理 "培训会议" 的表单显示 
			 * 受访人信息显示：无
			 * 来访信息显示:名称【下拉】、人数、预约开始时间、预约结束时间
			 */
			function handleTrainingVisit() {
				hideAllSections(); // 先隐藏所有部分
				$('#formSection2').removeClass('hidden'); // 显示表单部分2
				$('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
				wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
				wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
				$('#formSection3').removeClass('hidden');
				$('#tr-dwmc,#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); // 显示会议相关字段
				wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
				wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);

			}

			let firstVisitor = true;
			let xqInstance ;
			let jfbmInstance ;
			// 选择类别后
			function selectLflbm(value) {
				// 初始化开始事件结束时间
				setInitialTime()
				// 清空已输入的数据
				function clearInput() {
					console.log('清除已输入的数据')
				    $('input[name="jfrxm"]').val('')
					$('input[name="jfrgrdh"]').val('')
					$('input[name="jfryid"]').val('')
					$('input[name="jfxiaoqid"]').val('')
					$('#jfxiaoqid .ss-select').text('请选择校区');
					$("input[name='jfbmid']").val('')
					
					$('#jfbmid .ss-options div').remove();
					$('input[name="dwmc"]').val('')
					
				}
				clearInput()
				
				if (firstVisitor) {
					xqInstance = initSSSelect('#jfxiaoqid', initSelectData.XIAOQ, { text: 'mc', value: 'xiaoqid' }, { enable: true }, selectXq);// 初始化校区下拉
					console.log(xqInstance)
					

					// 初始化第一个随行人员
					addVisitor(uniqueVisitorIdCounter, visitorCount, '访客');
					
					const jfrxm = $("input[name='jfrxm']").val('${lf.jfrxm}')
					const jfrgrdh = $("input[name='jfrgrdh']").val('${lf.jfrgrdh}')
					const jfryid = $("input[name='jfryid']").val('${lf.jfryid}')
					const dwmc = $("input[name='dwmc']").val('${lf.dwmc}')
					
					// const xbm = $("input[name='xbm']").val(${lf.xbm});
					// const sfzjlbm = $("input[name='sfzjlbm']").val(${lf.sfzjlbm});
					const xm = $("input[name='xm']").val('${lf.xm}');
					const sfzh = $("input[name='sfzh']").val('${lf.sfzh}');
					const grdh = $("input[name='grdh']").val('${lf.grdh}');
					
					carNumberInstances['1'][0].setCarNumber('${lf.clh}')
					

					// wdVm.add("wd.commonValidator.notNull", ["xm"], { msgPrfx: "姓名" }, 1);
					// wdVm.add("wd.commonValidator.idCard", ["sfzh"], { msgPrfx: "证件号", notBlank: true, chkCsrq: false, chkXb: false, chkCsdq: false }, 1);
					// wdVm.add("wd.commonValidator.int", ["grdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);

					firstVisitor = false;
				}else{
					xqInstance.setValue()
					$('#jfbmid .ss-select').text('请选择酒店');
				}

				switch (value) {
					case '1': // 探访学生
						handleStudentVisit();
						break;
					case '5': // 探访教职工
						handleStaffVisit();
						break;
					case '11': // 公务
						handleOfficialVisit();
						break;
					case '21': // 培训会议
						handleTrainingVisit();
						break;
					case '31': // 工作学习
						handleWorkStudyVisit();
						break;
					case '51': // 物流配送
						handleLogisticsVisit();
						break;
					case '61': // 酒店餐饮
						handleHotelVisit();
						$('#tr-jfbmid th').text('酒店名');
						break;
					case '71': // 场地预约
						handleHotelVisit();
						$('#tr-jfbmid th').text('场地');
						break;
					case '91': // 其他
						handleOtherVisit();
						break;
					case '99': // 测试
						handleOfficialVisit();
						break;
				}
				// 选择后出现标题和底部按钮
				$('.mobileForm-title,.mobileBottom-div').removeClass('hidden');
			}
			function initBm(value){
				const lflbm = $("input[name='lflbm']").val();
				// 过滤得到 xiaoqid 等于传入值的酒店对象数组
				let filteredData ;
				if(lflbm==61){filteredData = initSelectData.JD.filter(hotel => hotel.xiaoqid == value);}
				if(lflbm==71){filteredData = initSelectData.CGHD.filter(hotel => hotel.xiaoqid == value);}
				// 打印过滤后的数据
				jfbmInstance = initSSSelect('#jfbmid', filteredData, { text: 'mc', value: 'bmid' }, { enable: true });// 初始化酒店下拉
				if('${lf.jfbmid}' == ''){
					$('#jfbmid .ss-select').text('请选择');
					console.log(jfbmInstance)
					jfbmInstance.setValue()
				}
			}
			// 选择了校区
			function selectXq(value) {
				const lflbm = $("input[name='lflbm']").val();
				//如果是酒店餐饮，则根据校区初始选择酒店
				
				initBm(value)
				
				
			}
			$(document).ready(function () {
				const warnMsg = '${warnMsg}';
				if (warnMsg) {
				    alert(warnMsg);
				}
				$.ajax({
					type: 'post',
					async: false,
					url: "<ss:serv name='lf_initExtLfInp' parm='{"param1":"abc123"}'/>",
					data: { param2: 'def456' },
					success: function (result) {
						initSelectData = result;
					}
				});
				// 初始化自定义下拉框，传入回调函数
				initSSSelect('#lflbm', initSelectData.LFLB, { text: 'mc', value: 'lflbm' }, { enable: true, message: '请选择来访类别！' }, selectLflbm);
				
				// 绑定新增随行人员事件
				$("#visitorAdd").click(function () {
					visitorCount++; // 增加有效随行人员计数
					// 把新增的随行人员ID存入数组
					sxry_num.push(uniqueVisitorIdCounter);
					console.log(sxry_num)
					uniqueVisitorIdCounter++; // 增加唯一随行人员 ID

					// 新增随行人员
					addVisitor(uniqueVisitorIdCounter, visitorCount, '');
				});

				// 点击删除随行人员
				$(document).on("click", ".mobileDelete-button", function () {
					const currentVisitorId = $(this)
						.closest(".mobileForm-container")
						.data("visitor-id");

					delete carNumberInstances[currentVisitorId];
					// 从随行人员数组中删除对应ID
					sxry_num = sxry_num.filter(item => item !== (currentVisitorId - 1));
					console.log(sxry_num)
					// 删除对应校验
					wdVm.remove("wd.commonValidator.notNull", [`xm_` + (currentVisitorId - 1)]);
					wdVm.remove("wd.commonValidator.idCard", [`sfzh_` + (currentVisitorId - 1)]);
					wdVm.remove("wd.commonValidator.int", [`grdh_` + (currentVisitorId - 1)]);
					wdVm.remove('wd.commonValidator.notNull', [`sfzjlbm_` + (currentVisitorId - 1)]);

					// 删除元素
					$(this).closest(".mobileForm-container").remove();

					updateVisitorNumbers();
				});
				function updateVisitorNumbers() {
					$(".mobileForm-container").each(function (index) {
						const newVisitorNumber = index;
						if (!index) {
							$(this).find(".mobileForm-title span:first-child").text("访客");
						} else {
							$(this).find(".mobileForm-title span:first-child").text("随行人员" + newVisitorNumber);
						}
					});
					visitorCount = $(".mobileForm-container").length - 1;//减1是为了不把访客算进去
					console.log("删除后当前访客数量", visitorCount)
				}

				// 新增车牌号
				$(document).on("click", ".carNumberAdd", function () {
					const currentVisitorId = $(this)
						.closest(".mobileForm-container")
						.data("visitor-id");
					console.log("当前随行人员的ID", currentVisitorId);
					if (!carNumberInstances[currentVisitorId]) {
						carNumberInstances[currentVisitorId] = []; // 初始化当前随行人员的实例数组
					}

					const currentCarNumberCounter =
						carNumberInstances[currentVisitorId].length + 1;

					const newId = `carNumberInput` + currentVisitorId + `-` + currentCarNumberCounter;


					console.log("主动点击随行人员的车牌号", newId);

					const newRow = `
				<tr class="carNumberRow">
					<td colspan="2" class="carNumberTd">
						<div>
							<div id="`+ newId + `"></div>
							<span class="mobileDelete-button carNumberDelete"></span>
						</div>
					</td>
				</tr>`;

					$(this).closest("table").find("tr").last().after(newRow);


					const carInput = new CarNumberInput(newId, 'clh', '粤');
					carNumberInstances[currentVisitorId].push(carInput);
				});

				// 删除车牌号行
				$(document).on("click", ".carNumberDelete", function () {
					const currentVisitorId = $(this)
						.closest(".mobileForm-container")
						.data("visitor-id");

					// 找到当前随行人员下的所有车牌号行（根据容器和行数查找）
					const carNumberRows = $(this)
						.closest(".mobileForm-container")
						.find("tr.carNumberRow");

					// 找到当前点击的删除按钮所在的tr元素
					const currentRow = $(this).closest("tr.carNumberRow");

					// 获取当前删除按钮对应的车牌号索引
					const rowIndex = carNumberRows.index(currentRow) + 1;

					// 确保carNumberRows和carNumberInstances数组的一致性
					if (rowIndex !== -1 && carNumberInstances[currentVisitorId]) {
						// 删除对应的实例
						carNumberInstances[currentVisitorId].splice(rowIndex, 1);
						console.log(
							`删除随行人员${currentVisitorId}里面的第${rowIndex}个车牌号后，实例数组:`,
							carNumberInstances[currentVisitorId]
						);
					}

					// 删除DOM中的对应行
					currentRow.remove();
				});
			});

		</script>
		<script>
			// 定义监听的逻辑，添加防抖处理
			var debounceTimer; // 用于防抖的定时器

			function checkInputsAndSendRequest() {
				// 清除之前的定时器，防止过于频繁地发起请求
				clearTimeout(debounceTimer);

				// 设置一个新的定时器，延迟执行校验
				debounceTimer = setTimeout(function() {
					var jfrxmValue = $('input[name="jfrxm"]').val();  // 获取 jfrxm 的值
					var jfrgrdhValue = $('input[name="jfrgrdh"]').val();  // 获取 jfrgrdh 的值
					var lflbm = $('input[name="lflbm"]').val();  // 获取 lflbm 的值
					// 如果两个输入框都有值，再发起 AJAX 请求
					if (jfrxmValue && jfrgrdhValue) {
						// 发起 AJAX 请求
						$.ajax({
							type: 'post',
							async: false,
							url: "<ss:serv name='lf_loadRyidByXmGrdh'/>",
							data: {
								xm: jfrxmValue,
								grdh: jfrgrdhValue,
								lflbm: lflbm
							},
							success: function(result) {

								// 如果有错误消息
								if (result && result.msg) {
									$('input[name="jfryid"]').val('');
									showErrorMessages(result.msg); // 显示错误信息
								} else if (result && result.ryid){
									$('input[name="jfryid"]').val(result.ryid);
									removeErrorMessages(); // 清除错误信息
								}

								<%--
								// 如果有结果，赋值
								if (result && result.length > 0) {
									$('input[name="jfryid"]').val(result[0].ryid);
									removeErrorMessages(); // 清除错误信息
								} else {
									$('input[name="jfryid"]').val('');
									showErrorMessages(); // 显示错误信息
								}
								--%>
							}
						});
					} else {
						$('input[name="jfryid"]').val('');
						// 如果输入不全，清除错误信息
						removeErrorMessages();
					}
				}, 500); // 防抖延迟500ms
			}

			// 显示错误信息
			function showErrorMessages(msg) {
				var jfrxmTd = $('input[name="jfrxm"]').closest('td');
				var jfrgrdhTd = $('input[name="jfrgrdh"]').closest('td');

				// 检查是否已经存在错误提示
				if (!jfrxmTd.find('.error-message').length) {
					jfrxmTd.css("border-bottom", "1px solid red")
						.append('<span class="border-input-error vLine-leftWarning jfrxmSpan"></span>')
						.append('<div class="error-message" style="position: absolute; left: 0px; bottom: 0px; color: red; font-size: 12px; width: 100%; text-align: right; line-height: 18px; height: 18px;">'+msg+'</div>');
				}

				if (!jfrgrdhTd.find('.error-message').length) {
					jfrgrdhTd.css("border-bottom", "1px solid red")
						.append('<span class="border-input-error vLine-leftWarning jfrgrdhSpan"></span>')
						.append('<div class="error-message" style="position: absolute; left: 0px; bottom: 0px; color: red; font-size: 12px; width: 100%; text-align: right; line-height: 18px; height: 18px;">'+msg+'</div>');
				}
			}

			// 清除错误信息
			function removeErrorMessages() {
				var jfrxmTd = $('input[name="jfrxm"]').closest('td');
				var jfrgrdhTd = $('input[name="jfrgrdh"]').closest('td');
				jfrxmTd.css("border-bottom", ""); // 恢复边框样式
				jfrgrdhTd.css("border-bottom", ""); // 恢复边框样式
				jfrxmTd.find('.error-message').remove(); // 移除所有错误提示
				jfrgrdhTd.find('.error-message').remove(); // 移除所有错误提示
				jfrxmTd.find('.jfrxmSpan').remove(); // 移除所有错误提示
				jfrgrdhTd.find('.jfrgrdhSpan').remove(); // 移除所有错误提示

			}

			// 监听两个 input 的输入事件
			$('input[name="jfrxm"], input[name="jfrgrdh"]').on('input blur', function() {
				checkInputsAndSendRequest();
			});
			
			if('${lf.jfrxm}' && '${lf.jfrgrdh}'){
				checkInputsAndSendRequest();
			}
		</script>
		<script>
			 // 使用事件委托绑定 td 的点击事件
			$('table').on('click', 'td', function() {
			console.log("td clicked");
			focusTextInput($(this));
			});

			// 使用事件委托绑定 .error-message 的点击事件
			$('body').on('click', '.error-message', function() {
			focusTextInput($(this));
			});

			// 公共方法，用于查找并聚焦 input[type="text"]
			function focusTextInput($element) {
				const $input = $element.find('input[type="text"]').length 
								? $element.find('input[type="text"]') 
								: $element.siblings('input[type="text"]');

				if ($input.length) {
					$input.focus();
				}
			}
		</script>
		</html>