<template>
	<div class="yingji_right">
		<div class="top">
			<div class="title">历史研判</div>
			<div class="page">
				<div class="page_div" style="margin-bottom: 1vh;" 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="top">
			<div class="title">突发事件信息</div>
			<div class="page">
				<div class="page_div" v-for="(item, index) in rightList" :key="index">
					<span class="icon"></span>
					<div class="page_div_right">
						<div class="text">{{ item.name }}</div>
						<div class="func" @click="onClickFunc(item)">应急预案</div>
					</div>
				</div>
			</div>
		</div>

		<div class="bottom">
			<div class="title">重大隐患说明</div>
			<div class="page">
				<div class="page--line" v-for="(item, index) in contextList" :key="index">
					<span style="color: #fff">{{ item.title }}</span>
					<span @click="onContextLook(item)" style="cursor: pointer;">查看</span>
				</div>
			</div>
		</div>

		<div class="bottom" style="height: 12vh;overflow-y: hidden;">
			<div class="title">
				<span>重大安全生产事故隐患分析</span>
			</div>
			<div class="bottom--context">
				<div class="bottom--context--ct_line" v-for="(item, index) in big_weixianList" :key="index">
					<span v-if="item.companycode == '152525001'" style="color: #fff">融冠矿业</span>
					<span v-if="item.companycode == '152525002'" style="color: #fff">锡林矿业</span>
					<span v-if="item.companycode == '152525003'" style="color: #fff">山金阿尔哈达</span>
					<span v-if="item.companycode == '152525004'" style="color: #fff">钨矿</span>
					<span v-if="item.companycode == '152525005'" style="color: #fff">山金白音呼布</span>
					<span>{{ item.sid }}</span>
				</div>
			</div>
		</div>

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

			<div class="page">
				<div class="text">{{ rightListDialog.name }}</div>

				<div class="page_div">
					<br />
					<div class="title">响应级别</div>

					<div class="page_line">{{ rightListDialog.grade }}</div>
				</div>

				<div class="page_div">
					<div class="title">突发原因</div>
					<div class="page_div_text">{{ rightListDialog.warnType }}</div>
				</div>

				<div class="page_div">
					<div class="title">响应措施</div>
					<div class="page_div_text page_div_text2">{{ rightListDialog.annex }}</div>
				</div>
			</div>
		</div>

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

			<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;" />
					</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;" />
					</el-col>
				</el-row>
			</div>
		</div>

		<div class="info_dialog animated animate__backInUp" style="height: auto;" v-if="is_info_dialog_context">
			<img src="@/assets/images/error.png" class="error" @click="is_info_dialog_context = false" />
			<div class="context_wrap">
				<div class="context_wrap--title">{{ contextListParams.title }}</div>
				<br />
				<div class="context_wrap--line" v-for="(item, index) in contextListParams.context" :key="index">{{ item.msg }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { emergencyPlan, undergroundSeriousHiddenTrouble, findHiddenTimeout } from '@/api'
import { getYJContingencyPlanData, findAllCheckedHiddenTrouble } from '@/api/yinhuan'
import { contextList } from '@/json/yinhuan.js'

export default {
	data() {
		return {
			is_dialog: false,
			is_info_dialog_context: false,

			rightList: [],
			rightListDialog: '',

			contextList: [],
			contextListParams: [],

			dataList: [],

			warnData: {},

			big_weixianList: [], //重大安全生产事故隐患分析
			is_dialog_info: false,
		}
	},

	mounted() {
		// 重大隐患说明
		this.contextList = contextList

		// 重大安全生产事故隐患分析
		undergroundSeriousHiddenTrouble().then(res => {
			this.big_weixianList = res.content.map(item => {
				return {
					companycode: item.companycode,
					sid: item.sid,
				}
			})
		})

		getYJContingencyPlanData().then(res => {
			this.rightList = res
		})

		this.onFindHiddenTimeout()
	},

	methods: {
		// 隐患
		onFindHiddenTimeout() {
			findAllCheckedHiddenTrouble().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
				})
			})
		},

		onClickFunc(e) {
			this.rightListDialog = e
			this.is_dialog = true
		},

		onContextLook(e) {
			this.is_info_dialog_context = true
			this.contextListParams = e
		},

		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
		},
	},
}
</script>

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

.yingji_right {
	position: absolute;
	background: #040624;
	width: 18%;
	right: 0;
	top: 0;
	bottom: 10px;
	z-index: 99;
	color: #7afffd;
	padding: 0 1vw;

	.title {
		height: 4vh;
		display: flex;
		font-size: 2vh;
		align-items: center;
	}

	.top {
		height: 22vh;
		.page {
			height: 85%;
			overflow: auto;
			@include scrollbar;


			.page_div {
				display: flex;
				align-items: center;
				width: 100%;
				height: 3.6vh;
				.icon {
					width: 1.4vw;
					height: 1.4vw;
					margin-right: 0.5vw;
					background-image: url('~@/assets/images/yingji_icon.png');
					background-size: 100% 100%;
				}

				.page_div_right {
					flex: 1;
					display: flex;
					justify-content: space-between;

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

					.func {
						color: #efb311;
						cursor: pointer;

						&:hover {
							color: #fff;
						}
					}
				}

				.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_4_4.png');

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

	.bottom {
		height: 30vh;
		overflow: hidden;
		overflow-y: auto;
		.page {
			&--line {
				display: flex;
				width: 100%;
				justify-content: space-between;
				line-height: 1.8;
			}
		}

		&--context {
			height: 84%;

			&--ct_line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 1.8;
			}
		}
	}

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

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

		.page_text {
			line-height: 2.2;

			.text_right {
				text-align: right;
			}
		}

		.page_line {
			color: #fff;
		}

		.page_div {
			color: #07c1f7;
			font-size: 1.5vh;
			margin-bottom: 1vh;
			.page_div_text {
				line-height: 1.7;
				color: #fff;
			}

			.page_div_text2 {
				height: 37vh;
				overflow-y: auto;
				@include scrollbar;
			}
		}

		.text {
			margin-top: 2vh;
			text-align: center;
		}

		.btn {
			position: absolute;
			bottom: 30px;
			left: 0;
			right: 0;
			margin: auto;
			background-image: linear-gradient(#f97f21, #ffa921);
		}
	}

	.info_dialog {
		position: absolute;
		border-radius: 5px;
		top: 6vh;
		right: 110%;
		width: 40vw;
		height: 65vh;
		padding: 4vh 1vw 2vh;
		background-color: #040624;

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

		.el-pagination {
			text-align: right;
		}

		.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;
		}
	}

	.context_wrap {
		color: #fff;
		height: auto;
		overflow-y: auto;
		&--title {
			text-align: center;
			font-size: 2vh;
		}

		&--line {
			line-height: 1.8;
		}
	}
}
</style>
