<!DOCTYPE html>
<html lang="en">
	<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>

	<body>
		<div id="app">
			<div class="wrapper" v-cloak>
				<!-- 商户头部信息 -->
				<div class="header">
					<van-search
					  v-model="shanghuName"
					  show-action
					  placeholder="请输入商家关键词"
					  @search="onSearch()"
						v-show="showSearch"
					>
					  <template #action>
					    <div @click="onSearch()"></div>
					  </template>
					</van-search>
				</div>
				<!-- Tab栏 -->
				<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"  @change="tabChange"
					style="margin-bottom: 15px;">
					<!-- <div  v-for="item in tabList""> -->
						<van-tab :title="item.title" :badge="item.msgNum||null" v-for="item in remindStatistic"></van-tab>
					<!-- </div> -->
						
					
					
				<!-- 	<van-tab title="全部" name=""></van-tab>
					<van-tab title="待审核" badge="5"></van-tab>
					<van-tab title="待整改" ></van-tab>
					<van-tab title="已整改"  ></van-tab>
					<van-tab title="整改逾期"  ></van-tab> -->
				</van-tabs>

				<!-- 隐患列表 -->
				<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
					<van-cell v-for="item in hazardList" :key="item.id" class="list-item" @click="viewDetail(item)">

						<div style="width: 100%;">
							<!-- 第一行：隐患描述 -->
							<div style="
								position: relative;  /* 新增：相对定位容器 */
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #333;
								font-size: 0.3rem;
								font-weight: bold;
								font-family: PingFang SC;
							">
							{{ item.description }}
								<!-- 新增：未读标记 -->
								<span 
								v-show="!item.msgFlag"
								style="
									position: absolute;
									top: 50%;         
									right: 0.15rem; 
									transform: translateY(-50%);
									width: 0.1rem;      
									height: 0.1rem;      
									background: #FF4D4F; 
									border-radius: 50%; 
								"
								></span>
								
							</div>
				
							<!-- 第二行：状态和时间 -->
							<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
								<van-tag :type="statusTagType(item.rectificationStatusName)">
									{{ item.rectificationStatusName }}
								</van-tag>
								<span v-show="item.rectificationStatus == 2"
									style="color: #737373; font-size: 0.28rem;">整改时间：{{ item.rectificationDate || '-' }}</span>
								<span v-show="item.rectificationStatus == 0 || item.rectificationStatus == 3"
								style="color: #737373; font-size: 0.28rem;">整改截止时间：{{ item.rectificationDeadline || '-'}}</span>
								<span v-show="item.rectificationStatus == 1"
								style="color: #737373; font-size: 0.28rem;">检查时间：{{ item.checkDate || '-' }}</span>
								<van-icon name="arrow" class="navToBtn" @click="viewDetail(item)" />
							</div>
				
							<!-- 第三行：商家和箭头 -->
							<div style="display: flex; justify-content: space-between; align-items: center;">
								<span style="color: #666; font-size: 0.28rem;">商家名称：{{ item.merName }}</span>
							</div>
						</div>
					</van-cell>
				</van-list>

				<!-- 新增悬浮按钮 -->
				<div class="float-read-btn" @click="markAllAsRead">
				  <span class="btn-text">全部</span>
				  <span class="btn-text">已读</span>
				</div>
			</div>
	</body>
</html>