<!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" v-cloak>
			<!-- 商户头部信息 -->
			<div class="header">
				<van-search v-model="merName" show-action placeholder="请输入商家关键词" @search="onSearch">
					<template #action>
						<div @click="onSearch"></div>
					</template>
				</van-search>
				<!-- Tab栏 -->
				<van-tabs v-model:active="activeTab" @click="tabChange" title-active-color="#1989fa" line-height="2px"
					style="margin-bottom: 15px;">
					<van-tab title="检查记录" name="1"></van-tab>
					<van-tab title="自查记录" name="2"></van-tab>
				</van-tabs>
			</div>

			<van-list>
				<van-cell v-for="item in hazardList" :key="item.id" @click="viewDetail(item.id)">
					<div style="width: 100%;position: relative;" v-if="activeTab=='1'">
						<div class="reminder-badge">新</div>
						<!-- 第一行：商户名称 -->
						<div class="tab1-row1">{{ item.merchantName }}</div>
				  
						<!-- 第二行：场所类型 + 检查单位（两列） -->
						<div class="tab1-row2">
						  <span>场所类型：{{ item.smallPlaceTypeName }}</span>
						  <span>检查单位：{{ item.checkUnit }}</span>
						</div>
				  
						<!-- 第三行：监察人 + 检查日期（两列） -->
						<div class="tab1-row2">
						  <span>检查人：{{ item.checkPeopleName }}</span>
						  <span>检查日期：{{ item.checkDate }}</span>
						</div>
				  
						<!-- 第四行：未整改数 + 隐患数（两列） -->
						<div class="tab1-row2">
						  <span>未整改数：{{ item.notRectifiedCount }}处</span>
						  <span>隐患数：{{ item.hiddenCount }}处</span>
						</div>
					</div>
					<div style="width: 100%;" v-if="activeTab=='2'">
						<!-- 第一行：隐患描述 -->
						<div style="
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #333;
							font-size: 0.3rem;
							font-weight: bold;
							font-family: PingFang SC;
							">九小场所消防安全检查清单</div>
							<!-- ">{{ item.remark }}</div> -->

						<!-- 第二行：状态和时间 -->
						<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
							<span style="color: #737373; font-size: 0.28rem;">检查时间：{{ item.checkDate }}</span>
						</div>
						<!-- 第三行：商家和箭头 -->
						<div style="display: flex; justify-content: start; gap: .4rem; align-items: center;">
							<span>检查人:{{item.checkPeopleName}}</span>
							<span>隐患数:{{item.hiddenCount}}</span>
							<span>未整改:{{item.notRectifiedCount}}</span>
						</div>
					</div>
				</van-cell>
			</van-list>
		</div>
	</body>

</html>