<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover" />
	<title>高区安全“码”上查监管平台</title>
	<script type="text/javascript" src="../sdk/includeHead.js?rev=250730001"></script>
	<script type="text/javascript" src="../sdk/axios_http3.js"></script>

</head>

<body>
	<!-- 原 HTML 主体内容保持不变 -->
	<div id="app">
		<div class="checklist-header" v-cloak>
			<p v-if="flag=='ADD'">
				1.存在隐患的检查项，需将问题进行拍照上传，并描述问题详情。<br />
				2.检查人员对管辖范围内企业安全情况负责，需如实上报。
			</p>
			<h5>九小场所安全检查清单</h5>
		</div>
		<div class="checklist-container" v-cloak>
			<div class="item_title">{{ checkData?.[checkPageIndex]?.name }}</div>
			<div v-for="(item, index) in checkData?.[checkPageIndex]?.['gqCheckItemList']" :key="item.id"
				class="check-item">
				<div class="item-header">
					<!-- <div class="item-number">{{ index + 1 }}</div> -->
					<div class="item-title">{{ item.orderNumber }}.{{ item.name }}</div>
				</div>

				<!-- 单选按钮组 -->
				<van-radio-group v-model="item.itemAnswer" @change="handleSelectionChange($event, item, index)"
					:disabled="flag!=='ADD'" direction="horizontal">
					<van-radio :name="1">是</van-radio>
					<van-radio :name="2">否</van-radio>
					<van-radio :name="3">不涉及</van-radio>
				</van-radio-group>

				<!-- 否选项扩展内容 -->
				<div v-show="extendShow(item)" class="expand-section">
					<div>
						<!-- 子检查项 -->
						<div class="sub-checkbox-group">
							<van-cell v-if="item.itemType==1">
								<van-checkbox v-for="(subItem, subIndex) in item.gqCheckQuestionList" :key="subIndex"
									v-model="subItem.check" shape="square" :disabled="flag!=='ADD'">
									{{ subItem.name}}
								</van-checkbox>
							</van-cell>
							<van-cell v-if="item.itemType==2">
								<div class="limit_date_wrapper">
									<span>住宿人数:</span>
									<input type="text" v-model="item.gqCheckQuestionList[0].content"
										:disabled="flag!=='ADD'" maxlength="3"
										style="width: 0.8rem; height: 0.4rem; text-align: center" />
								</div>
							</van-cell>
						</div>

						<!-- 隐患描述-新增情况 -->
						<van-cell-group v-if="flag=='ADD'">
							<p class="title_require">请输入隐患描述</p>
							<van-field v-model="item.description" type="textarea" rows="1"></van-field>
						</van-cell-group>
						<!-- 隐患描述-非新增情况 -->
						<van-cell-group v-if="flag!=='ADD'">
							<p class="title_require">请输入隐患描述</p>
							<p class="yh_desc">{{item.description||'未配置安全出口指示标志'}}</p>
						</van-cell-group>

						<!-- 照片上传 -->
						<!-- <van-cell-group v-if="flag=='ADD'">
							<van-cell><span class="title_require">请上传隐患图片:</span><span
									style="color: red">(格式png/jpg/jpeg,最多4张)</span>
								<div>
									<van-uploader v-model="item.photos" :max-count="4" :after-read="handleFileUpload"
										class="uploader-wrapper" />
								</div>
							</van-cell>
						</van-cell-group> -->
						
						<!-- 新增检查单 隐患图片上传 2025年7月31日13:07:28新增逻辑修改 -->
						<div v-if="flag=='ADD'">
							<div class="form-label form-label-div title_require title_requirediv">
									请上传隐患图片:<span
									style="color: red">(格式png/jpg/jpeg,最多4张)</span></div>
							<div class="img-wrapper">
								<div style="position: relative;" v-for="(imgItem, index) in item.photos">
									<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
										@click="showImage4camera(item.photos, index)" />
									<div class="van-uploader__preview-delete"
										@click="handleDeleteFloorPlan(item, index)"><i
											class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
								</div>
								<div v-if="item.photos.length < 4">
									<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="" @click="paizhao(item)">
								</div>
							</div>
							
						</div>
					
						

						<van-cell-group v-if="flag!='ADD'">
							<van-cell>
								<span class="">隐患图片:</span>
								<div>
									<img v-for="(imgItem, subIndex) in item.hiddenImageUrlList" :src="imgItem" alt=""
										style="width: 1.2rem; height: 1.2rem; margin-right: 0.2rem"
										@click="showImage(item.hiddenImageUrlList,subIndex)" />
								</div>
							</van-cell>
						</van-cell-group>
						<!-- 2025年6月18日 隐患整改已单独显示，这里改为检查单详情才展示 -->
						<van-cell-group v-if="item?.rectificationImageUrlList?.length && flag=='JC_XQ'">
							<van-cell><span class="">整改情况:</span>
								<div>
									<img v-for="(imgItem, subIndex) in item.rectificationImageUrlList" :src="imgItem"
										alt="" style="width: 1.2rem; height: 1.2rem; margin-right: 0.2rem"
										@click="showImage(item.rectificationImageUrlList,subIndex)" />
								</div>
							</van-cell>
							<van-cell><span class="">整改日期:</span>
								<div>
									<span>{{item.rectificationDate}}</span>
								</div>
							</van-cell>
						</van-cell-group>
					

						<!-- 新增隐患整改模块  2025年6月18日11:03:11新增整改记录模块-->
						<div class="rectification-module" v-if="flag!=='ADD' && flag!=='JC_XQ'">
							<!-- 模块标题 -->
							<div class="module-header">
								<img src="../image/code/zhenggai-title.png" alt="整改图标" class="module-icon">
								<h4 class="module-title">隐患整改</h4>
							</div>

							<!-- 时间线进度列表 -->
							<div class="timeline-list">
								<!-- 遍历整改记录 -->
								<div v-for="(record, index) in recordList" :key="index" class="timeline-item">
									<!-- 时间线左侧标记（点+线） -->
									<div class="timeline-marker">
										<div class="marker-dot"></div>
										<div class="marker-line"></div>
									</div>

									<!-- 时间线内容 -->
									<div class="timeline-content">
										<!-- 整改日期 -->
										<p class="rectification-date">整改日期：{{ record.rectificationDate }}</p>

										<!-- 整改图片 -->
										<div class="rectification-images">
											<img v-for="(img, i) in record.rectificationImage" :key="i" :src="img"
												@click="showImage(record.rectificationImage, i)" class="rect-image">
										</div>


										<!-- 状态容器（三种类型） -->
										<div :class="['status-container', record.status]">
											<!-- 审核未通过 -->
											<div v-if="record.rectificationStatus === 4" class="reject-status">
												<span class="status-tag">{{ record.rectificationStatusName }}</span>
												<div class="status-content">
													<p>审批日期：{{ record.reviewDate }}</p>
													<p>审批人员：{{ record.reviewPeople }}</p>
													<p>拒绝原因：{{ record.reason }}</p>
												</div>
											</div>
											
											<!-- 审核通过 -->
											<div v-if="record.rectificationStatus === 1" class="pass-status">
												<span class="status-tag">{{ record.rectificationStatusName }}</span>
												<div class="status-content">
													<p>审批日期：{{ record.reviewDate }}</p>
													<p>审批人员：{{ record.reviewPeople }}</p>
												</div>
											</div>
											<!-- 审核通过且有驳回日期的则显示驳回内容 -->
											<div v-if="record.rectificationStatus === 1&&record.rejectDate" class="reject-status" style="margin-top: .2rem;">
												<span class="status-tag">{{ '驳回' }}</span>
												<div class="status-content">
													<p>驳回日期：{{ record.rejectDate }}</p>
													<p>驳回原因：{{ record.rejectReason }}</p>
												</div>
											</div>

											<!-- 待审核 -->
											<div v-if="record.rectificationStatus === 2" class="pending-status">
												<span class="status-tag">{{ record.rectificationStatusName }}</span>
											</div>

											<!-- 待整改 -->
											<div v-if="record.rectificationStatus === 0" class="pending-status">
												<span class="status-tag" style="background: #1693FF;">{{ record.rectificationStatusName }}</span>
											</div>

											<!-- 整改逾期 -->
											<div v-if="record.rectificationStatus === 3" class="pending-status">
												<span class="status-tag">{{ record.rectificationStatusName }}</span>
											</div>
										</div>
										<p class="rectification-date" v-if="record.rectificationStatus === 3">整改截止日期：{{
											record.rectificationDeadline }}</p>
									</div>
								</div>
							</div>
						</div>

						<!-- 2025年6月18日 位置调整。 -->
						<!-- 2025年7月31日13:15:42 弃用 原vant图片上传组件方式 -->
		<!-- 				<van-cell-group v-if="(flag=='0' || flag=='3') && userType=='shop'">
							<van-cell><span class="title_require">请上传整改图片:</span><span
									style="color: red">(格式png/jpg/jpeg,最多4张)</span>
								<van-uploader v-model="item.photos" multiple :max-count="4" />
							</van-cell>
						</van-cell-group> -->
						
						<!-- 隐患详情 整改图片图片上传 2025年7月31日13:07:28新增逻辑修改 -->
						<!-- 2025年9月1日 添加安全员和网格员提交整改权限 -->
						<div v-if="(flag=='0' || flag=='3') && (userType=='shop' || userType=='safety' || userType=='wgy')">
							<div class="form-label form-label-div title_require title_requirediv">
									请上传整改图片:<span
									style="color: red">(格式png/jpg/jpeg,最多4张)</span></div>
							<div class="img-wrapper">
								<div style="position: relative;" v-for="(imgItem, index) in item.photos">
									<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
										@click="showImage4camera(item.photos, index)" />
									<div class="van-uploader__preview-delete"
										@click="handleDeleteFloorPlan(item,index)"><i
											class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
								</div>
								<div v-if="item.photos.length < 4">
									<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="" @click="paizhao(item)">
								</div>
							</div>
							
						</div>
						
						
						

						<!-- 整改期限 -->
						<van-cell-group v-if="flag=='ADD'">
							<van-cell>
								<div class="limit_date_wrapper">
									<span class="title_require">整改期限:</span>
									<select class="day_select" name="" v-model="item.deadlineDays"
										@change="handleDeadlineConfirm($event, item)">
										<option value="1">1</option>
										<option value="3">3</option>
										<option value="5">5</option>
										<option value="7">7</option>
										<option value="15">15</option>
										<option value="30">30</option>
									</select>
									<span> 整改截止日期: <b style="color: #148ef7">{{item.deadlineDate}}</b></span>
								</div>
							</van-cell>
						</van-cell-group>
					</div>
				</div>
			</div>

			<van-form v-if="checkPageIndex == (checkData?.length-1)">
				<van-cell>
					<van-field label="检查人员" v-model="checkPeopleName" readonly />
				</van-cell>
				<van-cell>
					<van-field label="检查日期" v-model="checkDate" readonly />
				</van-cell>
				<van-cell v-if="flag!=='ADD' && flag!=='JC_XQ'">
					<van-field label="检查单位" v-model="checkDeptName" readonly />
				</van-cell>
				<!-- 	<van-cell v-if="flag!='ADD'&&flag!='JC_XQ'">
						<van-field label="整改截止日期" v-model="rectificationDeadline" readonly />
					</van-cell> -->
				<!-- <div v-if="flag=='0' || flag=='1' || flag=='3'">
						<van-cell>
							<van-field label="审核日期" v-model="reviewDate" readonly />
						</van-cell>
						<van-cell>
							<van-field label="审核记录" v-model="reviewRecord" readonly />
						</van-cell>
					</div> -->

			</van-form>


			<!-- 驳回弹窗 -->
			<van-action-sheet v-model="bohui.show4modal" title=" ">
				<div class="content" style="padding:0.5rem 0.4rem 0.5rem; text-align: center;">
					<h5 style="text-align: left;font-size: .3rem;">驳回原因</h5>
					<textarea maxlength="100" class="textareaEle" v-model="bohui.reason" name="" id="" cols="24" rows="3"
						style="resize: none;" placeholder="请输入驳回原因(最多100字)"></textarea>



					<div class="footer-bar">
						<van-button type="info" plain size="small" @click="bohui.show4modal=false">取消</van-button>
						<van-button type="info" size="small"
							@click="bohui.show4modal=false;bohuiFunc();">确定</van-button>
					</div>

				</div>
			</van-action-sheet>

			<!-- 拒绝弹窗 -->
			<van-action-sheet v-model="jujue.show4modal" title=" ">
				<div class="content" style="padding:0.5rem 0.4rem 0.5rem; text-align: center;">
					<h5 style="text-align: left;font-size: .3rem;">拒绝原因</h5>
					<textarea maxlength="100" class="textareaEle" v-model="jujue.reason" name="" id="" cols="24" rows="3"
						style="resize: none;" placeholder="请输入拒绝原因(最多100字)"></textarea>


					<div class="shangbao-wrapper" v-if="jujue.pushFlag">
						<!-- <h5 style="text-align: left;font-size: .3rem;">整改上报</h5> -->
						<h5 style="font-family: PingFang SC;background: #EAF5FF;
							font-weight: 500;
							font-size: .26rem;
							color: #0587FE;border-radius: .04rem;padding:.2rem;
							border: 0.02rem solid #7DC3FF;">该隐患已整改{{jujue.rectificationCount}}次，上报上级部门</h5>
							
						<!-- <van-checkbox-group v-model="jujue.dept">
							<div v-for="(item, index) in jujue.deptDict" style="overflow: hidden;">
								<h5 style="text-align: left;font-size: .3rem;color: #1081E3;font-weight: 500;">
									{{item.name}}</h5>
								<van-checkbox :key="subIndex" :name="subItem.deptId" shape="square"
									v-for="(subItem, subIndex) in item.children">
									{{ subItem.deptName }}
								</van-checkbox>
							</div>
						</van-checkbox-group> -->
					</div>

					<div class="footer-bar">
						<van-button type="info" plain size="small" @click="jujue.show4modal=false">取消</van-button>
						<van-button type="info" size="small"
							@click="jujue.show4modal=false;add4DSH_XQ(0);">确定</van-button>
					</div>

				</div>
			</van-action-sheet>
			<!-- 延期操作确认弹窗 -->
			<van-action-sheet v-model="yuqi.show4yanqi" title=" ">
				<div class="content" style="padding: 1rem 1rem 0.5rem; text-align: center;">
					<span style="font-size: 0.3rem;
						  color: rgb(0, 0, 0);
						  text-align: left;
						  display: inline-block;
						  line-height: 1.5;
						  margin-bottom: 1rem;">对该商家提醒限期 <b style="color: #1081e3;">3</b> 天整改，整改截止日期 为 <b style="color: #1081e3;">{{
							yuqi.deadlineDate }}</b></span> <br>
					<van-button type="info" size="small" @click="shangbao(1)">&nbsp;&nbsp;确定&nbsp;&nbsp;</van-button>

				</div>
			</van-action-sheet>

			<!-- 上报弹窗 -->
		<!-- 	<van-action-sheet v-model="yuqi.show4shangbao" title="  ">
				<div class="content" style="padding: 0rem 1rem 0.5rem; text-align: center;">
					<h4 style="text-align: left;font-size: .32rem;">选择行业主管部门</h4>
					<van-checkbox-group v-model="yuqi.dept">
						<div style="overflow: hidden;">
							<van-checkbox :key="subIndex" :name="item.deptId" shape="square"
								v-for="(item, subIndex) in yuqi.deptDict">
								{{ item.deptName }}
							</van-checkbox>
						</div>
					</van-checkbox-group>
					<van-button type="info" size="small" @click="shangbao">上报行业主管部门</van-button>

				</div>
			</van-action-sheet> -->

			<!-- 隐患详情底部栏 -->
			<div class="bottom_bar" v-if="flag=='3' && from !='shangbao'  &&  (userType == 'wgy' || userType=='safety')">
				<div>
					<!-- 2025年9月1日 新增 安全员网格员 整改功能 -->
					<van-button type="info" size="small" @click="add4DZG_XQ" style="width: 2rem">提交整改</van-button>
					<!-- 2025年7月21日11:10:58 新增延期两次后才需要预期上报功能。 -->
					<van-button type="primary" size="small" @click="shangbao" v-if="!jujue.pushFlag">逾期上报</van-button>
					<van-button type="info" size="small" @click="yuqi.show4yanqi!=true">限期3天整改</van-button>
				</div>
			</div>
			<!-- 该整改按钮只用于给商户权限 -->
			<div class="bottom_bar" v-if="(flag=='0' || flag=='3') && userType=='shop'">
				<div style="display: flex; justify-content: center; gap: 1rem">
					<van-button type="info" size="small" @click="add4DZG_XQ" style="width: 2rem">提交整改</van-button>
				</div>
			</div>
			
			<!-- 待整改时，该整改按钮只用于给安全员、网格员，用于区分逾期整改逻辑 -->
			<div class="bottom_bar" v-if="(flag=='0') && (userType == 'wgy' || userType=='safety')">
				<div style="display: flex; justify-content: center; gap: 1rem">
					<van-button type="info" size="small" @click="add4DZG_XQ" style="width: 2rem">提交整改</van-button>
				</div>
			</div>

			<div class="bottom_bar" v-if="flag=='2' && (userType == 'wgy' || userType=='safety')">
				<div style="display: flex; justify-content: center; gap: 1rem">
					<van-button type="danger" size="small" @click="validRefuse(0)" style="width: 2rem">拒绝</van-button>
					<van-button type="info" size="small" @click="add4DSH_XQ(1)" style="width: 2rem">通过</van-button>
				</div>
			</div>
			
			<!-- 一键驳回功能 -->
			<div class="bottom_bar" v-if="(flag=='1') && userType=='common'">
				<div style="display: flex; justify-content: center; gap: 1rem">
					<van-button type="info" size="small" @click="bohui.show4modal=true" style="width: 2rem">驳回</van-button>
				</div>
			</div>
			

			<!-- 新增底部栏 -->
			<div class="bottom_bar" v-if="flag=='ADD' || flag=='JC_XQ'">
				<div>
					<span class="check_num">{{ notNullCount }}/{{totalItems}}</span>
					<span class="yh_num">{{noCount}} 隐患</span>

					<van-button v-show="checkPageIndex>0" type="info" plain size="small"
						@click="prevPage">上一页</van-button>
					<van-button v-show="checkPageIndex<3" type="info" size="small"
						@click="validRequired">下一页</van-button>
					<van-button type="info" size="small" @click="add4JC_XQ"
						v-show="checkPageIndex===3&&flag=='ADD'">完成检查</van-button>
				</div>
			</div>
		</div>
		<div class="float-read-btn" @click="goback4ios" v-if="iosFlag">
		  <img src="../image/code/back.png" style="width: .9rem;" />
		</div>
	</div>
</body>

</html>