<template>
	<div class="hiddenDanger">
		<headNav :title="'历史隐患'"></headNav>

		<!-- 任务信息 -->
		<div class="top">
			<div class="headTip FontColorInfo">{{ dataList.byCheckUnit }}</div>
			<div>
				<div>
					<van-cell title="任务编号" :value="dataList.taskId" />
					<van-cell
						v-if="dataList.checkType === '1'"
						title="检查类型"
						value="日常消防监督检查"
					/>
					<van-cell v-else title="检查类型" value="行动消防检查" />
					<van-cell title="检查机构" :value="dataList.lawUnit" />
					<van-cell title="任务地点" :value="dataList.taskAddr">
						<template #right-icon>
							<van-icon
								name="location"
								@click="getCenter(dataList.taskAddr)"
								class="search-icon"
							/>
						</template>
					</van-cell>
					<van-cell :value="dataList.checkPerson" is-link @click="turnToCheckPerson">
						<template #title>
							<span class="custom-title">检查成员</span>
						</template>
					</van-cell>
					<van-cell title="检查时间" :value="dataList.executeTime" />
				</div>
			</div>
		</div>

		<div class="dangerItem">
			<div class="headInfo FontColorInfo">
				<span>检查隐患</span>
				<div class="df fz11">
					<div class="FontColorInfo mr10">
						检查项目
						<span>{{ totalNum }}</span>
						项
					</div>
					<div class="FontColorError fb">
						隐患项目
						<span>{{ resultList.length }}</span>
						项
					</div>
				</div>
			</div>

			<div class="danger">
				<div class="dangerList" v-for="item in resultList" :key="item">
					<div v-if="item.index === 1" class="index color1">1</div>
					<div v-else-if="item.index === 2" class="index color2">2</div>
					<div v-else class="index color3">{{ item.index }}</div>
					<div class="flex1">
						<div class="dangerIistItem">
							<van-cell
								:title="item.examineProname"
								is-link=""
								@click="gotoDangerDetail(item)"
							></van-cell>
						</div>
						<div class="dangerContent">
							<div class="df mb10">
								<div class="flex1">
									检查类型：
									<span v-if="item.examineType === '1'">消防许可及验收备案</span>
									<span v-else-if="item.examineType === '2'">消防安全管理</span>
									<span v-else-if="item.examineType === '3'">建筑防火</span>
									<span v-else-if="item.examineType === '4'">安全疏散</span>
									<span v-else>消防控制室</span>
								</div>
								<div class="flex1c">
									检查情况：
									<span class="FontColorError">异常</span>
								</div>
							</div>
							<div class="mb10">
								检查时间：
								<span>{{ item.createdTime }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 弹出地图展示 -->
		<van-popup v-model="showMap" position="bottom" :style="{ height: '450px' }">
			<div><baiduMap :center="center" :zoom="zoom"></baiduMap></div>
		</van-popup>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import { get, post } from '@/utils/http.js';
import mask_overLay from '@/components/overLay_xy.vue';
import baiduMap from '@/components/baiduMap.vue';

export default {
	name: 'hiddenDanger',
	components: {
		headNav,
		baiduMap,
		'v-mask': mask_overLay
	},
	data() {
		return {
			dataList: '',
			showMap: false,
			center: '重庆市',
			zoom: 12,
			showOverLay: false,
			tipMsg: '加载中',
			resultList: '',
			totalNum: 0
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		async init() {
			this.showOverLay = true;
			// await this.getDetailInfoApi();
			// await this.getPageListApi();
			// this.showOverLay = false;
		},

		backPage() {
			this.$router.go(-1);
		},

		// 获取任务详情信息
		async getDetailInfoApi() {
			await get(`/cdsupervisionTask/get/${this.$route.params.ID}`).then(res => {
				if (res.success == true) {
					if (res.data) {
						this.dataList = res.data;
					}
				}
			});
		},

		// 获取列表 信息
		async getPageListApi() {
			this.resultList = [];
			const id = this.$store.state.taskInfo.taskInfo.companyId;

			await get(`/cdsupervisionAnswer/checkDefectCont/${ id }`).then(res => {
				if (res.success === true) {
					if (res.data.defectList.length > 0) {
						this.totalNum = res.data.totalCheckNum;
						let num = 0;
						res.data.defectList.forEach(item => {
							num++;
							item.index = num;
							this.resultList.push(item);
						});
					}
				}
			});
		},

		// 中心点
		getCenter(location) {
			this.center = location;
			this.showMap = true;
		},

		turnToCheckPerson() {
			this.$router.push(`/checkPersonnelInfo/${this.$route.params.ID}`);
		},

		gotoDangerDetail(item) {
			this.$router.push(`/dangerDetail/${item.id}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.hiddenDanger {
	font-size: 14px;
	height: 100vh;
	overflow: auto;
	.color1 {
		color: #02a7f0;
	}

	.color2 {
		color: #d9001b;
	}

	.color3 {
		color: #7f7f7f;
	}

	.top {
		margin-top: 57px;

		.headTip {
			margin-bottom: 10px;
			padding: 0 15px;
			color: #323232;
			font-weight: bold;
		}
	}

	.dangerItem {
		.headInfo {
			margin: 10px 0;
			padding: 0 15px;
			font-size: 13px;
			color: #8a8a8a;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.danger {
			background-color: #fff;
			padding: 0 10px;
		}

		.dangerList {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #e3e5e7;

			.index {
				width: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				font-weight: bold;
			}

			.dangerContent {
				display: flex;
				flex-direction: column;
				padding: 0px 15px;
				font-size: 12px;
				color: #8f9091;
				padding-left: 0;
			}
		}
	}
}
</style>

<style lang="scss">
.hiddenDanger {
	.van-cell {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #323233;

		&::after {
			border-bottom: 1px solid #ececec;
		}
	}

	.search-icon.van-icon.van-icon-location {
		margin-left: 10px;
		color: #00f;
	}

	.dangerList {
		.van-cell.van-cell--clickable {
			padding: 5px 15px 5px 0;
		}
	}
}
</style>
