<!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"
					style="margin-bottom: 15px;">
					<van-tab title="全部" name=""></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" class="list-item">
						<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.rectificationStatusName)">
									{{ item.rectificationStatusName }}
								</van-tag>
								<span
									style="color: #737373; font-size: 0.28rem;margin-left: -1.6rem;">检查时间：{{ 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>
	</body>
</html>