<!DOCTYPE html>
<html>
	<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>
	</head>
	<div id="app">
		<div class="wrapper">
			<!-- 商户头部信息 -->
			<div class="header">
				<!-- <div class="level">安全等级</div> -->
				<div class="title">
					<img src="../image/code/sj.png" alt=""><span>威海市宝威酒店有限公司</span><span class="tag">安全等级-绿</span>
				</div>
				<div class="detail">
					<van-row>
						<van-col span="24">场所类型: 小餐饮</van-col>
						<div class="detail_link"  @click="navTo('shanghu_detail')">详情<van-icon name="arrow" /></div>
					</van-row>
					<van-row type="flex" justify="space-around"
						style="width:100%; margin-top: .3rem; margin-bottom: .3rem;">
						<van-col span="6">自查数:75</van-col>
						<van-col span="6">检查数:75</van-col>
						<van-col span="6">隐患数:75</van-col>
						<van-col span="6">未整改:75</van-col>
					</van-row>
					<van-row>
						<van-col span="24">山东省威海市环翠区和谐街35-6</van-col>
					</van-row>

				</div>

			</div>
			<!-- 功能 -->
			<button type="info" class="func_btn" @click="navTo('check_info')"><span>+</span>安全检查</button>

			<!-- Tab栏 -->
			<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"
				style="margin-bottom: 15px;">
				<van-tab title="隐患整改"></van-tab>
				<van-tab title="检查记录"></van-tab>
				<van-tab title="自查记录"></van-tab>
				<van-tab title="培训演练"></van-tab>
			</van-tabs>

			<div v-show="activeTab===0" class="subNavWrapper">

				<!-- 隐患记录子Tab -->
				<van-tabs v-model:active="subActiveTab" type="card">
					<van-tab title="全部"></van-tab>
					<van-tab title="待审核"></van-tab>
					<van-tab title="待整改"></van-tab>
					<van-tab title="已整改"></van-tab>
					<!-- <van-tab title="整改逾期"></van-tab> -->
				</van-tabs>
				<!-- 隐患列表 -->
				<van-list>
					<van-cell v-for="item in filteredHazards" :key="item.id">
						<div style="width: 100%;">
							<!-- 第一行：隐患描述 -->
							<div style="
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #333;
								font-size: 0.3rem;
								font-weight: bold;
								font-family: PingFang SC;
							">{{ item.description }}</div>

							<!-- 第二行：状态和时间 -->
							<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
								<van-tag :type="statusTagType(item.status)">
									{{ item.status }}
								</van-tag>
								<span
									style="color: #737373; font-size: 0.28rem;margin-left: -1.6rem;">检查时间：{{ item.date }}</span>
								<van-icon name="arrow" class="navToBtn" @click="viewDetail(item.id)" />
							</div>


							<!-- 第三行：商家和箭头 -->
							<div style="display: flex; justify-content: space-between; align-items: center;">
								<span style="color: #666; font-size: 0.28rem;">商家名称：威海市宝威酒店有限公司{{ item.shop }}</span>
							</div>
						</div>
					</van-cell>
				</van-list>
			</div>

			<!-- 检查记录 -->
			<div v-show="activeTab>0" class="subNavWrapper">

				<!-- 隐患列表 -->
				<van-list>
					<van-cell v-for="item in filteredHazards" :key="item.id">
						<div style="width: 100%;">
							<!-- 第一行：隐患描述 -->
							<div style="
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #333;
								font-size: 0.3rem;
								font-weight: bold;
								font-family: PingFang SC;
							">{{ item.description }}</div>

							<!-- 第二行：状态和时间 -->
							<div style="display: flex; justify-content: space-between; margin: 8px 0;">
								<span style="color: #737373; font-size: 0.28rem;">时间：{{ item.date }}</span>
							</div>

							<!-- 第三行：商家和箭头 -->
							<div>
								<van-row type="flex" justify="start" style="width:100%;">
									<van-col span="8">检查人:xxx</van-col>
									<van-col span="8">隐患数:75</van-col>
									<van-col span="8">未整改:75</van-col>
								</van-row>
							</div>
						</div>
					</van-cell>
				</van-list>
			</div>

		</div>
		</body>

</html>