<!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>

				<!-- 功能 -->
				<button type="info" class="func_btn" @click="navTo"><span>+</span>新增培训演练</button>

				<!-- Tab栏 -->
				<van-tabs v-model:active="activeTab" @click="tabChange" title-active-color="#1989fa" line-height="2px"
					style="margin-bottom: 15px;">
					<van-tab title="培训演练" name="0"></van-tab>
					<van-tab title="特种作业培训" name="1"></van-tab>
				</van-tabs>
			</div>

			<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
				<div class="msgTip">
					该商家4/5/6月份未进行特种作业培训 5月份未进行培训演练
				</div>
				<van-cell v-for="item in hazardList" :key="item.id" @click="viewDetail(item.id)">
					<div style="width: 100%;position: relative;">
						<!-- 第一行：商户名称 -->
						<div class="tab1-row1 bold">{{ item.merName }}</div>
				  
						<!-- 第二行：场所类型 + 检查单位（两列） -->
						<div class="tab1-row1">
						  <span>日期：{{ item.placeType }}</span>
						</div>
				  
						<!-- 第三行：监察人 + 检查日期（两列） -->
						<div class="tab1-row2">
						  <span>培训人数：{{ item.pushDate }}</span>
						   <span>培训人：{{ item.pushPeople }}</span>
						</div>
					</div>
				</van-cell>
			</van-list>
		</div>
	</body>

</html>