<template>
	<div class="yingji_left">
		<div class="top">
			<div class="title">应急资源分类</div>

			<div class="page">
				<div v-for="(item, index) in arrList_type" :key="index" class="page_div animated">
					<div class="page_div_2">
						<span>{{ item.text }}</span>
						<span class="color" @click.stop="onClickItem(item)">
							<img v-if="item.is" src="@/assets/images/yingji_eye.png" alt="" />
							<img v-if="!item.is" src="@/assets/images/yingji_eye_off.png" alt="" />
							{{ item.count }}处
						</span>
					</div>
				</div>
			</div>
		</div>

		<div class="bottom">
			<div class="title">隐患研判</div>
			<div class="page">
				<div class="page_div" v-for="(item, index) in dataList" :key="index">
					<div class="page_div_son">
						<span> {{ item.name }} {{ item.warningHiddenTroubleType }}</span>
						<span class="time" @click="onClickWarning(item)">查看详情</span>
					</div>
				</div>
			</div>
		</div>

		<div class="dialog" v-show="is_dialog">
			<img src="@/assets/images/error.png" class="error" @click="is_dialog = false" />

			<div class="page">
				<div class="title">基础信息</div>

				<div v-if="leftGetData.text == '应急物资'">
					<el-row class="page_text">
						<el-col :span="8">储备站</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.name }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">仓库类型</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.type }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">管理员</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.manager }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">联系电话</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
					</el-row>

					<br />

					<el-table :data="leftGetData.table" height="45vh" style="width: 100%">
						<el-table-column prop="name" label="物资名称" align="center"> </el-table-column>
						<el-table-column prop="number" label="库存" align="center"> </el-table-column>
					</el-table>
				</div>

				<div v-if="leftGetData.text == '应急救援队伍'">
					<el-row class="page_text">
						<el-col :span="8">救援类型</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.teamType }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">所属单位</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.name }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">队长</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.principal }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">人数</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.number }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">联系电话</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">地址</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.address }}</el-col>
					</el-row>
				</div>

				<div v-if="leftGetData.text == '应急车辆'">
					<el-row class="page_text">
						<el-col :span="8">车主</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.driver }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">联系电话</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">载重量</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.netWeight }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">车型</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.carType }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">车牌号</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.numberPlate }}</el-col>
					</el-row>
				</div>

				<div v-if="leftGetData.text == '应急专家'">
					<el-row class="page_text">
						<el-col :span="8">专家姓名</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.name }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">专家类型</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.field }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">联系电话</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">详细地址</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.address }}</el-col>
					</el-row>
				</div>

				<div v-if="leftGetData.text == '避难场所'">
					<el-row class="page_text">
						<el-col :span="8">场所名称</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.name }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">场所类型</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.type }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">联系电话</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">负责人</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.principal }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">容纳人数</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.numbers }}</el-col>
					</el-row>
				</div>

				<div v-if="leftGetData.text == '防火监控基站'">
					<el-row class="page_text">
						<el-col :span="8">基站名称</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.name }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">负责人</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.manager }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">联系电话</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.tel }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">经度</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.lng }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">维度</el-col>
						<el-col class="text_right" :span="16">{{ leftGetData.lat }}</el-col>
					</el-row>
				</div>

				<br />
			</div>
		</div>

		<div class="dialog" v-show="is_dialog_info">
			<img src="@/assets/images/error.png" class="error" @click="is_dialog_info = false" />

			<div class="page">
				<div class="title">{{ warnData.name }}</div>

				<div>
					<el-row class="page_text">
						<el-col :span="8">排查人</el-col>
						<el-col class="text_right" :span="16">{{ warnData.pcr }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">填报人</el-col>
						<el-col class="text_right" :span="16">{{ warnData.tbr }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患来源</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhly }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患地点</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhdd }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患部位</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhbw }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患类别</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhlb }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患描述</el-col>
						<el-col class="text_right" :span="16">{{ warnData.yhms }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">整改期限</el-col>
						<el-col class="text_right" :span="16">{{ warnData.zgqx }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="10">整改实际完成日期</el-col>
						<el-col class="text_right" :span="14">{{ warnData.zgwcrq }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">整改类型</el-col>
						<el-col class="text_right" :span="16">{{ warnData.zglx }}</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患整改前图片</el-col>
						<el-col class="text_right" :span="16">
							<img :src="warnData.yhzgqtp" alt="" style="width: 3vw;" @click="onImg(warnData.yhzgqtp)" />
						</el-col>
					</el-row>

					<el-row class="page_text">
						<el-col :span="8">隐患整改后图片</el-col>
						<el-col class="text_right" :span="16">
							<img :src="warnData.yhzghtp" alt="" style="width: 3vw;" @click="onImg(warnData.yhzghtp)" />
						</el-col>
					</el-row>
				</div>
			</div>
		</div>

		<div class="dialog dialog_img" v-show="is_dialog_info_img">
			<img src="@/assets/images/error.png" class="error" @click="is_dialog_info_img = false" />

			<img :src="imgURL" alt="" style="width: 100%" />
		</div>
	</div>
</template>

<script>
import { randNum } from '@/utils'
import { findHiddenTimeout } from '@/api'
import { getYJStorageData, getYJExpertData, getYJEmergencyTeamData, getYJShelterData, getYJCarData, getYJSuppliesData, yjFireMonitorStation } from '@/api/yinhuan'

export default {
	data() {
		return {
			dataList: '',

			is_dialog: false,
			is_dialog_info: false, // 隐患研判显隐
			is_dialog_info_img: false, // 图片

			arrList_type: [],

			leftGetData: '',
			warnData: '', //隐患研判

			markers: [],
			imgURL: '',

			circle: [],
		}
	},

	mounted() {
		this.$once('hook:beforeDestroy', () => {
			for (let i of this.arrList_type) {
				if (i.is == true) {
					this.onClickItem(i)
				}
			}
		})

		this.init()

		// 隐患信息
		this.onFindHiddenTimeout()

		// this.onWebsock()
	},

	methods: {
		onClickItem(params) {
			const map = this.$store.state.appMap
			const position = params.position
			const url = params.url
			if (params.is) {
				for (let item of this.markers) {
					let isUrl = item.getLabel().url
					if (url == '/image/ta.png') {
						for (let item of this.circle) {
							map.remove(item)
						}
					}

					setTimeout(() => {
						this.circle = []
					}, 0)

					if (isUrl == url) {
						item.setMap(null)
					}
				}
			} else {
				for (let item of position) {
					const path = [item.lng, item.lat]
					let marker = new AMap.Marker({
						icon: url,
						position: path,
						offset: new AMap.Pixel(-12, -12),
						map: map,
						title: params.text,
						label: {
							url,
							item,
						},
					})

					if (params.text == '防火监控基站') {
						let circle = new AMap.Circle({
							map: map,
							center: path, //设置线覆盖物路径
							radius: 1500,
							strokeColor: '#ff0736', //边框线颜色
							strokeOpacity: 0.3, //边框线透明度
							strokeWeight: 3, //边框线宽
							fillColor: '#f40', //填充色
							fillOpacity: 0.23, //填充透明度
						})

						this.circle.push(circle)
					}

					marker.on('click', e => {
						const ev = marker.getLabel().item
						const title = marker.getTitle()
						this.leftGetData = ev
						this.leftGetData.text = title
						this.is_dialog = false

						if (title == '应急物资') {
							getYJSuppliesData({
								storageId: ev.id,
							}).then(res => {
								this.leftGetData.table = res
								this.is_dialog = true
							})
						} else {
							this.is_dialog = true
						}
					})

					this.markers.push(marker)
				}
			}

			map.setFitView() //地图自适应

			setTimeout(() => {
				map.setZoom(10)
			}, 300)

			params.is = !params.is
		},

		init() {
			var suppliesReserveStations = {}
			var experts = {}
			var rescueTeams = {}
			var refuges = {}
			var rescueCars = {}
			var yjMonitorStation = {}

			getYJStorageData().then(res => {
				suppliesReserveStations = {
					text: '应急物资',
					url: '/image/wu_zi.png',
					is: false,
					count: res.length,
					position: res,
					arrObj: [],
				}
			})

			yjFireMonitorStation().then(res => {
				yjMonitorStation = {
					text: '防火监控基站',
					url: '/image/ta.png',
					is: false,
					count: res.totalElements,
					position: res.content,
					arrObj: [],
				}
			})

			// 应急专家
			getYJExpertData().then(res => {
				experts = {
					text: '应急专家',
					url: '/image/zhuan_jia.png',
					is: false,
					count: res.length,
					position: res,
					arrObj: [],
				}
			})

			// 应急队伍
			getYJEmergencyTeamData().then(res => {
				rescueTeams = {
					text: '应急救援队伍',
					url: '/image/dui_wu.png',
					count: res.length,
					is: false,
					position: res,
					arrObj: [],
				}
			})

			// 应急场所
			getYJShelterData().then(res => {
				refuges = {
					text: '避难场所',
					url: '/image/chang_suo.png',
					is: false,
					count: res.length,
					position: res,
					arrObj: [],
				}
			})

			// 应急车辆
			getYJCarData().then(res => {
				rescueCars = {
					text: '应急车辆',
					url: '/image/che_liang.png',
					is: false,
					count: res.length,
					position: res,
					arrObj: [],
				}
			})

			setTimeout(() => {
				this.arrList_type = [suppliesReserveStations, experts, rescueTeams, refuges, rescueCars, yjMonitorStation]
			}, 1000)
		},

		// 隐患
		onFindHiddenTimeout() {
			findHiddenTimeout().then(res => {
				let deptData = this.$store.state.deptData // 所有企业
				this.dataList = res.content.map(item => {
					for (let contx of deptData) {
						if (contx.companycode == item.companycode) {
							item.name = contx.name
						}
					}
					return item
				})
			})
		},

		onClickWarning(params) {
			if (params.hiddenYhzghtpSet.length > 0) {
				params.yhzghtp = 'data:image/jpeg;base64,' + params.hiddenYhzghtpSet[0].yhzghtp
			}

			if (params.hiddenYhzgqtpSet.length > 0) {
				params.yhzgqtp = 'data:image/jpeg;base64,' + params.hiddenYhzgqtpSet[0].yhzgqtp
			}

			this.is_dialog_info = true
			this.warnData = params
		},

		onWebsock() {
			const wsuri = 'ws://192.168.1.123:8000/websocket/hiddenUnhandle'
			const websock = new WebSocket(wsuri)
			websock.onmessage = function(e) {
				console.log(e)
			}
		},

		onImg(e) {
			this.is_dialog_info_img = true
			this.imgURL = e
		},
	},
}
</script>

<style lang="scss">
@import '@/assets/scss/var.scss';

.yingji_left {
	position: absolute;
	background: #040624;
	width: 18%;
	left: 0;
	top: 0;
	bottom: 10vh;
	z-index: 99;
	color: #7afffd;
	padding: 0 0.5vw;

	.title {
		height: 10%;
		display: flex;
		font-size: 2vh;
		align-items: center;
		margin-bottom: 3%;
	}

	.top {
		height: 45vh;

		.page {
			height: 85%;

			.page_div {
				display: inline-block;
				text-align: center;
				border-radius: 5px;
				overflow: hidden;
				width: 46%;
				margin: 0.5vh 2%;
				height: 18%;
				cursor: pointer;
				background-image: url('~@/assets/images/yingji.png');
				background-size: 100% 100%;

				.page_div_2 {
					height: 100%;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}

				&:hover {
					box-shadow: 2px 3px 3px 2px rgba(0, 0, 0, 0.1);
					animation-name: pulse;
				}

				.color {
					color: #efb311;
					margin-top: 4%;
					font-size: 2vh;
				}

				img {
					width: 2vh;
				}
			}
		}
	}

	.bottom {
		height: 35vh;
		font-size: 1.5vh;
		.page {
			height: 89%;
			overflow-y: auto;
			@include scrollbar;
			color: #fff;

			.page_div {
				margin-bottom: 1.5vh;
				margin-right: 0.3vw;
				display: flex;
				align-items: center;
				cursor: pointer;
				.page_circle {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 1.6vw;
					height: 1.6vw;
					border-radius: 50%;
					background-size: 100% 100%;
					margin-right: 0.5vw;
				}

				.page_div_son {
					padding: 0.85vh 0.5vw;
					flex: 1;
					display: flex;
					justify-content: space-between;
					background-size: 100% 100%;
					background-image: url('~@/assets/images/yingji_3_3.png');

					.text {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 11vw;
					}
				}
			}
		}
	}

	.dialog {
		position: absolute;
		left: 100%;
		top: 0;
		padding: 2vw 1vw;
		width: 20vw;
		height: 70vh;
		background-image: url('~@/assets/images/kuang.png');
		background-size: 100% 100%;
		color: #fff;

		.page_text {
			line-height: 2.2;

			.text_right {
				text-align: right;
			}
		}

		.title {
			color: #07c1f7;
		}

		.error {
			position: absolute;
			width: 1vw;
			top: 1.4vw;
			right: 1.4vw;
			cursor: pointer;
		}
	}

	.el-table--scrollable-y,
	.el-table--scrollable-x,
	.el-table__body-wrapper {
		@include scrollbar;
	}

	.el-table {
		background: transparent;
	}

	.el-table th > .cell {
		background-color: transparent;
	}

	.el-table td,
	.el-table th,
	.el-table th,
	.el-table tr {
		background: transparent !important;
		color: #02d9fd;
		font-size: 0.7vw;
	}

	.el-table td {
		border: none !important;
		background: #003046 !important;
	}

	.el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		background-color: transparent;
	}

	.el-table__body-wrapper {
		overflow-y: auto;
	}
}
</style>
