<!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"></script>

		<!-- <script type="text/javascript" src="_check_info_data_detail.js"></script>
		<script type="text/javascript" src="_check_info_data_detail_yh.js"></script> -->
	</head>

	<body>
		<!-- 原 HTML 主体内容保持不变 -->
		<div id="app">
			<div class="checklist-header" v-cloak>
				<div class="shangbao-header">
					<span>威海市宝威酒店有限公司</span></br>
					<span>地址：威海福田路3号</span>
				</div>
			</div>
			<div class="checklist-container" v-cloak>
				<div class="item_title">{{ checkData?.[0]?.name }}</div>
				<div v-for="(item, index) in checkData?.[0]?.['gqCheckItemList']" :key="item.id"
					class="check-item">
					<div class="item-header">
						<!-- <div class="item-number">{{ index + 1 }}</div> -->
						<div class="item-title">{{ item.id }}.{{ item.name }}</div>
					</div>

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

					<!-- 否选项扩展内容 -->
					<div 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="true" maxlength="3"
											style="width: 0.8rem; height: 0.4rem; text-align: center" />
									</div>
								</van-cell>
							</div>

							<!-- 隐患描述-非新增情况 -->
							<van-cell-group>
								<p class="title_require">隐患描述</p>
								<p class="yh_desc">{{item.description||'-'}}</p>
							</van-cell-group>

							<van-cell-group>
								<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>

							<!-- 整改期限 -->
							<van-cell-group v-if="flag=='ADD'">
								<van-cell>
									<div class="limit_date_wrapper">
										<span class="title_require">整改期限:</span>
										<span> 整改截止日期: <b style="color: #148ef7">{{item.deadlineDate}}</b></span>
									</div>
								</van-cell>
							</van-cell-group>
						</div>
					</div>
				</div>

				<!-- 新增隐患整改模块 -->
				<div class="rectification-module">
					<!-- 模块标题 -->
					<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 rectificationRecords" :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.images" :key="i"
										src="../image/code/zhenggai-title.png" alt="整改图"
										@click="showImage(record.images, i)" class="rect-image">
								</div>

								<!-- 状态容器（三种类型） -->
								<div :class="['status-container', record.status]">
									<!-- 审批拒绝 -->
									<div v-if="record.status === 'reject'" class="reject-status">
										<span class="status-tag">审批拒绝</span>
										<div class="status-content">
											<p>审批日期：{{ record.approveDate }}</p>
											<p>拒绝原因：{{ record.rejectReason }}</p>
										</div>
									</div>

									<!-- 待审批 -->
									<div v-if="record.status === 'pending'" class="pending-status">
										<span class="status-tag">待审批</span>
									</div>

									<!-- 审批通过 -->
									<div v-if="record.status === 'approve'" class="approve-status">
										<div class="status-content">
											<p>审批日期：{{ record.approveDate }}</p>
										</div>
										<span class="status-tag">审批通过</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<van-form>
					<van-cell>
						<van-field label="整改截止日期" v-model="rectificationDeadline" readonly />
					</van-cell>
					<van-cell>
						<van-field label="检查人员" v-model="checkPeopleName" readonly />
					</van-cell>
					<van-cell>
						<van-field label="检查日期" v-model="checkDate" readonly />
					</van-cell>
				
				</van-form>

			</div>
		</div>
	</body>
</html>