<!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" v-if="userType!=='shop'">
					<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 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" @click="viewDetail(item.id)">
					<!-- 商户角色专用 -->
					<div style="width: 100%;position: relative;" v-if="userType=='shop'">
						<div class="reminder-badge" v-if="item.msgFlag">新</div>
						<!-- 第一行：隐患描述 -->
						<div style="
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #333;
							font-size: 0.3rem;
							font-weight: bold;
							font-family: PingFang SC;
							">九小场所消防安全检查清单</div>

						<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
							<span style="color: #323233; font-size: 0.28rem;">检查时间：{{ item.checkDate }}</span>
						</div>
						<div class="tab1-row1" v-if="activeTab=='1'">
							<span>检查单位：{{ item.checkUnit || '-' }}</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>
					<!-- 非商户角色看到的页面 -->
					<div v-if="userType!=='shop'">
						<div style="width: 100%;position: relative;" v-if="activeTab=='1'">
							<div class="reminder-badge" v-if="item.msgFlag">新</div>
							<!-- 第一行：商户名称 -->
							<div class="tab1-row1 bold">{{ item.merName }}</div>
					
							<!-- 第二行：场所类型 + 检查单位（两列） -->
							<div class="tab1-row1">
							<span>场所类型：{{ item.placeType }}</span>
							</div>
					
							<!-- 第三行：监察人 + 检查日期（两列） -->
							<div class="tab1-row2">
							<span>检查人：{{ item.checkPeopleName || '-' }}</span>
							<span>检查日期：{{ item.checkDate && item.checkDate.split(' ')[0] }}</span>
							</div>

							<div class="tab1-row1">
								<span>检查单位：{{ item.checkUnit || '-' }}</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;
								">{{ item.merName }}</div>
								<!-- ">{{ item.remark }}</div> -->

							<!-- 第二行：状态和时间 -->
							<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
								<span style="color: #323233; font-size: 0.28rem;">检查时间：{{ item.checkDate }}</span>
							</div>
							<div class="tab1-row1">
								<span>检查单位：{{ item.checkUnit }}</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>
					</div>
				</van-cell>
			</van-list>
		</div>
	</body>

</html>