<template>
	<div :class="{ home: true }">
		<!-- <base-hint :class="[isRight ? 'fadeInRight' : 'fadeOutRight']"></base-hint> -->
		<div :class="{ innerwrap: true, hidden: isShow }">
			<router-view name="homeHeader" />

			<div class="wrap">
				<router-view v-show="isLeftFalse == 1" name="homeLeft" class="home-left animated fadeInLeft"></router-view>

				<ltkZongHe v-if="isLtk == 1" class="animated fadeInLeft"></ltkZongHe>
				<ltkDialog></ltkDialog>

				<dxkqZongHe v-if="isDxkq == 1" class="home-left animated fadeInLeft"></dxkqZongHe>
				<dxkqDialog></dxkqDialog>

				<yingjiRight v-if="is_yingji" class="fadeInRight animated"></yingjiRight>
				<yingjiLeft v-if="is_yingji" class="animated fadeInLeft"></yingjiLeft>

				<fenxianRight v-if="is_fengxian" class="fadeInRight animated"></fenxianRight>
				<fenxianLeft v-if="is_fengxian" class="animated fadeInLeft"></fenxianLeft>

				<yinhuanLeft v-if="is_yinhuan" class="animated fadeInLeft"></yinhuanLeft>
				<yinhuanRight v-if="is_yinhuan" class="fadeInRight animated"></yinhuanRight>

				<sale v-if="is_sale" class="animated fadeInLeft"></sale>

				<!-- <bigdata v-if="is_bigdata"></bigdata> -->
				<bigdataleft v-if="is_bigdata"></bigdataleft>
				<bigdataright v-if="is_bigdata"></bigdataright>

				<home-map class="home--map" />
				<router-view name="homeRight" :class="[isRight ? 'fadeInRight' : 'fadeOutRight']" class="home-right animated" />

				<img class="img_position" @click="onRightImg" src="@/assets/images/left.png" alt="" />
			</div>
			<!-- <div class="my-filter" v-show="is_sale && (showItem1 || showItem2 || showItem3 || showItem4 || showItem5 || showItem6 || showItem7)"></div> -->
			<wkkItem></wkkItem>
			<ItemCharts></ItemCharts>
			<environment></environment>
			<wkkEnvironmentTable></wkkEnvironmentTable>

			<CommVideo></CommVideo>
		</div>
		<saleitem1 v-show="showItem1"></saleitem1>
		<saleitem2 v-show="showItem2"></saleitem2>
		<saleitem3 v-show="showItem3"></saleitem3>
		<saleitem4 v-show="showItem4"></saleitem4>
		<saleitem5 v-show="showItem5"></saleitem5>
		<saleitem6 v-show="showItem6"></saleitem6>
		<saleitem7 v-show="showItem7"></saleitem7>
		<potrait v-if="isShowPotrait"></potrait>
		<videoai v-show="isShowVideo"></videoai>
		<enterdynamicmonitor v-show="isShowEnterDynamicMonitor"></enterdynamicmonitor>
		<targetrackingposition v-show="isShowTargetTrackingPosition"></targetrackingposition>
	</div>
</template>

<script>
import HomeMap from '@/components/home/HomeMap.vue'
import wkkItem from '@/components/wkk_item/item' // 尾矿库六大项
import ItemCharts from '@/components/wkk_item/item_charts' // 尾矿库六大项可视化
import wkkEnvironmentTable from '@/components/wkk_environment/table' // 尾矿库环境监测
import environment from '@/components/wkk_environment/environment' // 尾矿库环境监测可视化

import BaseHint from '@/components/base/BaseHint'

import ltkZongHe from '@/components/ltk/ltkZongHe'
import ltkDialog from '@/components/ltk/ltkDialog'

import dxkqZongHe from '@/components/dxkq/dxkqZongHe'
import dxkqDialog from '@/components/dxkq/dxkqDialog'

import yingjiRight from '@/components/yingji/yingjiRight'
import yingjiLeft from '@/components/yingji/yingjiLeft'

import fenxianLeft from '@/components/fenxian/fenxian_left'
import fenxianRight from '@/components/fenxian/fenxian_right'

import yinhuanLeft from '@/components/yinhuan/yinhuan_left'
import yinhuanRight from '@/components/yinhuan/yinhuan_right'

import CommVideo from '@/components/comm/CommVideo'

import sale from '@/components/sale/sale.vue'
import saleitem1 from '../components/sale/saleItem1.vue'
import saleitem2 from '../components/sale/saleItem2.vue'
import saleitem3 from '../components/sale/saleItem3.vue'
import saleitem4 from '../components/sale/saleItem4.vue'
import saleitem5 from '../components/sale/saleItem5.vue'
import saleitem6 from '../components/sale/saleItem6.vue'
import saleitem7 from '../components/sale/saleItem7.vue'

// import bigdata from '../components/bigdata/bigdata.vue'
import bigdataleft from '../components/bigdata/bigdataLeft.vue'
import bigdataright from '../components/bigdata/bigdataRight.vue'

import potrait from '../components/potrait/potrait.vue'

import videoai from '../components/videoai/videoai.vue'

import enterdynamicmonitor from '../components/enterdynamicmonitor/enterdynamicmonitor.vue'
import targetrackingposition from '../components/targetrackingposition/targettrackingposition.vue'

import axios from 'axios'

export default {
	name: 'home',

	data() {
		return {
			isLeftFalse: false,
			isLtk: false,
			isDxkq: false,

			is_yingji: false, // 应急处置
			is_fengxian: false, // 风险处置
			is_yinhuan: false, // 隐患排查
			is_sale: false, // 销售监管
			is_bigdata: false,
		}
	},

	created() {
		this.$store.dispatch('typeOptions')
		this.getUserInfo()

	},
	mounted() {
		// window.addEventListener('beforeunload', (e) => {
		// 	console.log(e, 'beforeUnload beforeUnLoad')
		// })
		console.log('beforeUnload beforeUnload beforeUnload')
		
	},
	methods: {
		getUserInfo() {
			axios({
				url: 'http://10.185.163.57:8000/auth/info',
				method: 'get',
				headers: {
					Authorization: decodeURIComponent(this.getParameter('token')),
				},
			})
				.then(res => {
					// console.log('获取用户信息', res)
				})
				.catch(err => {
					// console.log('用户信息错误',err)
					location.href = 'http://10.185.163.57:8001/login?from=daping'
				})
		},
		onRightImg() {
			this.$store.commit('SET_IS_Right', true)
		},
		getParameter: function (name) {
			var search = location.search
			if (!search) {
				return false
			}
			search = search.split('?')
			var data = search[1].split('=')
			if (search[1].indexOf(name) == -1) {
				return ''
				return
			}
			if (search[1].indexOf('&') == -1) {
				data = search[1].split('=')
				return data[1]
			} else {
				data = search[1].split('&')
				for (var i = 0; i <= data.length - 1; i++) {
					var l_data = data[i].split('=')
					if (l_data[0] == name) {
						return l_data[1]
						break
					} else {
						continue
					}
				}
			}
		},
	},

	computed: {
		isShowTargetTrackingPosition() {
			return this.$store.state.curTargetTrackingPosition
		},
		isShowEnterDynamicMonitor() {
			return this.$store.state.curEnterDynamicMonitor
		},
		isShowVideo() {
			return this.$store.state.curVideoShow
		},
		isLeft() {
			return this.$store.state.isLeft
		},

		isRight() {
			return this.$store.state.isRight
		},
		showItem1() {
			console.log('showItem1')
			return this.$store.state.showSaleItem1
		},
		showItem2() {
			return this.$store.state.showSaleItem2
		},
		showItem3() {
			return this.$store.state.showSaleItem3
		},
		showItem4() {
			return this.$store.state.showSaleItem4
		},
		showItem5() {
			return this.$store.state.showSaleItem5
		},
		showItem6() {
			return this.$store.state.showSaleItem6
		},
		showItem7() {
			return this.$store.state.showSaleItem7
		},
		isShow() {
			return (this.is_sale && (this.showItem1 || this.showItem2 || this.showItem3 || this.showItem4 || this.showItem5 || this.showItem6 || this.showItem7)) || this.isShowPotrait || this.isShowVideo || this.isShowEnterDynamicMonitor || this.isShowTargetTrackingPosition
		},
		isShowPotrait() {
			return this.$store.state.isShowEnterPortrait
		},
	},

	watch: {
		isLeft(e) {
			this.isLeftFalse = false
			this.isLtk = false
			this.isDxkq = false
			this.fengx_xian_ping_gu = false
			this.is_yingji = false
			this.is_yinhuan = false
			this.is_fengxian = false
			this.is_sale = false
			this.is_bigdata = false

			if (e === false) return

			const compony_info = this.$store.state.compony_info
			const title_type = compony_info.typeName

			console.log(compony_info, 'compony_info')

			if (e.itemIndex == 2) {
				this.$store.commit('SET_IS_Right', false)
				this.is_fengxian = true
				return
			}

			if (e.itemIndex == 3) {
				this.$store.commit('SET_IS_Right', false)
				this.is_yinhuan = true
				return
			}

			if (e.itemIndex == 4) {
				this.$store.commit('SET_IS_Right', false)
				this.is_sale = true
				return
			}

			if (e.itemIndex == 5) {
				this.$store.commit('SET_IS_Right', false)
				this.is_bigdata = true
				return
			}

			// if (e.itemIndex == 4) {
			// 	this.$store.commit('SET_IS_Right', false)
			// 	this.is_yingji = true
			// } else {
			// 	this.is_yingji = false
			// 	this.onRightImg()
			// }

			if (!compony_info) return

			if (title_type == '非煤矿山') {
				setTimeout(() => {
					this.isLeftFalse = e.itemIndex
				}, 200)
			}

			if (title_type == '煤矿') {
				setTimeout(() => {
					this.isLtk = e.itemIndex
				}, 200)
			}

			if (title_type == '危险化学品企业') {
				setTimeout(() => {
					this.isDxkq = e.itemIndex
				}, 200)
			}
		},
	},

	components: {
		HomeMap,

		// 尾矿库六大项
		wkkItem,
		ItemCharts,

		// 尾矿库环境监测
		wkkEnvironmentTable,
		environment,

		BaseHint,

		ltkZongHe,
		ltkDialog,

		dxkqZongHe,
		dxkqDialog,

		yingjiRight,
		yingjiLeft,

		yinhuanLeft,
		yinhuanRight,

		fenxianLeft,
		fenxianRight,

		CommVideo,
		sale,
		saleitem1,
		saleitem2,
		saleitem3,
		saleitem4,
		saleitem5,
		saleitem6,
		saleitem7,
		potrait,
		videoai,
		bigdataleft,
		bigdataright,
		enterdynamicmonitor,
		targetrackingposition,
	},
}
</script>

<style lang="scss">
@import '@/assets/scss/var.scss';
.home {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
	font-size: $theme_font_size;
	&.hide {
		filter: blur(5px);
		overflow: hidden;
	}
	header {
		position: relative;
		background: url('~@/assets/images/bg_top.png') center no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 3.5vw;

		.flex-btn {
			position: absolute;
			left: 0;
			right: 0;
			top: 65%;
			transform: translateY(-50%);
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			.base-btn {
				height: 2vw;
				padding: 0 15px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.el-cascader {
					width: 15vw;
					height: 2.5vw;
					line-height: 2.5vw;
					background: url('~@/assets/images/inp.png');
					background-size: 100% 100%;
					.el-input__inner {
						background-color: transparent;
						border: none;
						color: #fff;
						height: 2vw;
						text-align: center;
						line-height: 2vw;
					}
					.el-input__icon {
						display: none;
						line-height: 2vw;
					}
				}
			}

			.base-btn-part > span {
				display: inline-block;
				height: 2.2vw;
				line-height: 2.2vw;
				text-align: center;
				color: #fff;
				width: 4.3vw;
				font-size: 0.8vw;
				cursor: pointer;
				background-image: url('~@/assets/images/header.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				margin: 0 0.2vw;

				:hover {
					display: none;
				}
			}
		}

		.flex-btn {
			.base-btn-part {
				.span_active {
					background-image: url('~@/assets/images/header_active.png');
					color: $color;
					font-weight: 600;
				}
			}
		}

		.el-select {
			margin-right: 1.5vw;
		}

		.el-input__inner {
			background: transparent;
			border: 1px solid #02defa;
			color: #02defa;
			height: 1.6vw;
			width: 10vw;
			line-height: 1.6vw;
		}

		.el-input__suffix {
			top: 0.6vh;
		}
	}
	.wrap {
		position: relative;
		height: calc(100% - 3.5vw);
		overflow: hidden;

		.home-left {
			z-index: 9;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 20%;
		}

		.home--map {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}

		.home-right {
			z-index: 9;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			width: 12%;
			min-width: 188px;
			background-color: #030c2a;
		}

		.img_position {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
		}
	}

	.el-carousel__indicators--horizontal {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}
.innerwrap {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	&.hidden {
		filter: blur(5px);
	}
}
</style>
