<template>
	<div class="bigScreenView">
		<!-- 头部标题 -->
		<div class="top_title">
			<div class="top_titl_left">
				<div v-for="(item,index) in topSmallTitleLeftData" :key="index" style="cursor: pointer;" @click="changeOver(item)">
					<div :class="selectModule == item.componentName ? 'top_titl_left_textStyle2' : 'top_titl_left_textStyle1' ">{{item.title}}</div>
					<img src="../../assets/images/cutGraph/light7.png" width="85" style="margin-top:-1vh;" v-if="selectModule == item.componentName">
				</div>
			</div>
			<div class="top_titl_right">
				<div v-for="(item,index) in topSmallTitleRightData" :key="index" style="cursor: pointer;" @click="changeOver(item)">
					<div :class="selectModule == item.componentName ? 'top_titl_left_textStyle2' : 'top_titl_left_textStyle1' ">{{item.title}}</div>
					<img src="../../assets/images/cutGraph/light7.png" width="85" style="margin-top:-1vh;" v-if="selectModule == item.componentName">
				</div>
			</div>
			<!-- 时间 -->
			<div class="currentTimeStyle">{{currentTime}}</div>
		</div>
		<div class="videoSelectView" v-show="videoSelect1">
			<div @click="lookFn1()">矿山监控</div>
			<div @click="lookFn2()">车辆监控</div>
		</div>
		<!-- 内容 -->
		<div class="content_view">
			<dataScreening ref="dataScreeningMethod" v-show="selectModule == 'dataScreening'"/>
			<carManagement ref="carManagementMethod" v-show="selectModule == 'carManagement'"/>
			<intelligentSchedul ref="intelligentSchedulMethod" v-show="selectModule == 'intelligentSchedul'"/>
			<dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/>
		</div>
		<!-- 监控区域 -->
		<div class="jiankongView">
			<carsEZUIKitJs  v-if="carsEZUIKitJsShow"/>
			<kaungEZUIKitJs  v-if="kaungEZUIKitJsShow"/>
		</div>
		<!-- 嵌入三维地图页面 -->
		<iframe src="http://8.143.203.103:9092/#/Index" frameborder="0" class="mapcontainer1"></iframe>
		<!-- 单个车辆视频监控 -->
		<div class="monitorCover1" v-show="monitorCover1Show">
			<div class="monitorCover1_closePic" @click="closeMonitorCoverFn"></div>
			<div class="monitorCover1_Video">
				<video id="monitorCover1Id" width="1300" height="700" muted autoplay></video>
			</div>
		</div>

	</div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import dataScreening from './components/dataScreening/index.vue' //数据总览
import carManagement from './components/carManagement/index.vue' //车辆管理
import intelligentSchedul from './components/intelligentSchedul/index.vue' //智能调度
import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
import Hls from "hls.js"

var noPtzhls1 = null;
export default {
	components: {
		dataScreening,
		carManagement,
		intelligentSchedul,
		dataAnalysis,
		carsEZUIKitJs,
		kaungEZUIKitJs,
	},
	data() {
		return {
			//时间
			timer:null,
			currentTime:'',
			//选择模块
			selectModule:'', 
			//各模块展示传值
			isShow:{
				dataScreening:false,
				carManagement:false,
				intelligentSchedul:false,
				dataAnalysis:false,
			},
			//标题菜单数据
			topSmallTitleLeftData:[],
			topSmallTitleRightData:[],
			//监控选择
			videoSelect1:false,
			carsEZUIKitJsShow:false,
			kaungEZUIKitJsShow:false,
			//单个车辆视频展示
			monitorCover1Show:false,
		}
	},
	mounted() {
		this.loadData();
		this.setNowTimes();
		this.timer = setInterval(() => {
            this.setNowTimes();
        }, 1000)
		window.addEventListener('message', this.handleMessage);
	},
	methods: {
		loadData() {
			let leftTemporaryData = [];
			let rightTemporaryData = [];
			this.$nextTick(()=>{
				HttpReq.truckDispatching.screenTitleMenuQuery({size:9999,status:1}).then((res) => {
					if(res.code == 200){;
						let array1 = res.data.content;
						for(let i = 0 ; i<3 ; i++){
							leftTemporaryData.push(array1[i]);
						}
						for(let j = 3 ; j<res.data.totalElements ; j++){
							rightTemporaryData.push(array1[j]);
						}
						this.topSmallTitleLeftData = leftTemporaryData;
						this.topSmallTitleRightData = rightTemporaryData;
					}
				})
				//开启websocket
				this.$refs.intelligentSchedulMethod.loadData3();
			})
		},
		//选择展示模块
		changeOver(item){
			this.selectModule = item.componentName;
			if(item.componentName == 'dataScreening'){
				if(this.isShow.dataScreening == false){
					this.$refs.dataScreeningMethod.loadData(true);
					this.isShow.dataScreening = true;
					this.isShow.carManagement = false;
					this.isShow.intelligentSchedul = false;
					this.isShow.dataAnalysis = false;
				}else{
					this.$refs.dataScreeningMethod.loadData(false);
					this.isShow.dataScreening = false;
				}
				this.$refs.carManagementMethod.loadData(false);
				this.$refs.intelligentSchedulMethod.loadData(false);
				this.$refs.dataAnalysisMethod.loadData(false);
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'carManagement'){
				if(this.isShow.carManagement == false){
					this.$refs.carManagementMethod.loadData(true);
					this.isShow.carManagement = true;
					this.isShow.dataScreening = false;
					this.isShow.intelligentSchedul = false;
					this.isShow.dataAnalysis = false;
				}else{
					this.$refs.carManagementMethod.loadData(false);
					this.isShow.carManagement = false;
				}
				this.$refs.dataScreeningMethod.loadData(false);
				this.$refs.intelligentSchedulMethod.loadData(false);
				this.$refs.dataAnalysisMethod.loadData(false);
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'intelligentSchedul'){
				if(this.isShow.intelligentSchedul == false){
					this.$refs.intelligentSchedulMethod.loadData(true);
					this.isShow.intelligentSchedul = true;
					this.isShow.dataScreening = false;
					this.isShow.carManagement = false;
					this.isShow.dataAnalysis = false;
				}else{
					this.$refs.intelligentSchedulMethod.loadData(false);
					this.isShow.intelligentSchedul = false;
				}
				this.$refs.dataScreeningMethod.loadData(false);
				this.$refs.carManagementMethod.loadData(false);
				this.$refs.dataAnalysisMethod.loadData(false);
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'dataAnalysis'){
				if(this.isShow.dataAnalysis == false){
					this.$refs.dataAnalysisMethod.loadData(true);
					this.isShow.dataAnalysis = true;
					this.isShow.dataScreening = false;
					this.isShow.carManagement = false;
					this.isShow.intelligentSchedul = false;
				}else{
					this.$refs.dataAnalysisMethod.loadData(false);
					this.isShow.dataAnalysis = false;
				}
				this.$refs.dataScreeningMethod.loadData(false);
				this.$refs.carManagementMethod.loadData(false);
				this.$refs.intelligentSchedulMethod.loadData(false);
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'backstage'){
				this.isShow.dataScreening = false;
				this.isShow.carManagement = false;
				this.isShow.intelligentSchedul = false;
				this.isShow.dataAnalysis = false;
				this.$refs.dataScreeningMethod.loadData(false);
				this.$refs.carManagementMethod.loadData(false);
				this.$refs.intelligentSchedulMethod.loadData(false);
				this.$refs.dataAnalysisMethod.loadData(false);
				this.$nextTick(()=>{
					let routeUrl = this.$router.resolve({
						path: "/dashboard",
					});
					window.open(routeUrl.href, '_blank');
				})
				this.videoSelect1 = false;
				this.kaungEZUIKitJsShow = false;
				this.carsEZUIKitJsShow = false;
			}
			if(item.componentName == 'toVideoSurveillance'){
				this.isShow.dataScreening = false;
				this.isShow.carManagement = false;
				this.isShow.intelligentSchedul = false;
				this.isShow.dataAnalysis = false;
				this.$refs.dataScreeningMethod.loadData(false);
				this.$refs.carManagementMethod.loadData(false);
				this.$refs.intelligentSchedulMethod.loadData(false);
				this.$refs.dataAnalysisMethod.loadData(false);
				if(this.videoSelect1 == false){
					this.videoSelect1 = true;
				}else{
					this.videoSelect1 = false;
					this.kaungEZUIKitJsShow = false;
					this.carsEZUIKitJsShow = false;
				}

			}
		},
		//矿山监控
		lookFn1(){
			this.kaungEZUIKitJsShow = true;
			this.carsEZUIKitJsShow = false;
		},
		//车辆监控
		lookFn2(){
			this.kaungEZUIKitJsShow = false;
			this.carsEZUIKitJsShow = true;
		},
		//获取当前时间
		setNowTimes () {
            let myDate = new Date();
            let wk = myDate.getDay();
            let yy = String(myDate.getFullYear());
            let mm = String((myDate.getMonth() + 1) < 10 ? '0' + (myDate.getMonth() + 1) : (myDate.getMonth() + 1));
            let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
            let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
            let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
            let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
            let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            let week = weeks[wk];
            this.currentTime = yy + '/' + mm + '/' + dd + ' ' + hou + ':' + min;
        },
		//与iframe的页面进行数据交互
		handleMessage(event){//event.data为传递的参数
			//这里的判断是因为此方法会多次触发，通过参数是否存在可以判断是否为子页面传递的参数，再做出相应的操作
			if(event.data.data.hasOwnProperty("url")){
				if(event.data.data.url == '监控'){
					console.log('监控',event.data.data.data);
					if(noPtzhls1 != null){
						noPtzhls1.destroy();
					}
					this.monitorCover1Show = true;
					let monitorCover1Id = document.getElementById('monitorCover1Id');
					noPtzhls1 = new Hls();
					noPtzhls1.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8');
					noPtzhls1.attachMedia(monitorCover1Id);
					noPtzhls1.on(Hls.Events.MANIFEST_PARSED,function() {
						monitorCover1Id.play();
					});
				}else if(event.data.data.url == '轨迹回放'){
					let pathInfo = this.$router.resolve({
						path:'/carManagement/carTrajectory',
						query:{
							number:event.data.data.data
						}
					})
					window.open(pathInfo.href, '_blank');
				}
			}
		},
		//关闭视频蒙层
		closeMonitorCoverFn(){
			this.monitorCover1Show = false;
			if(noPtzhls1 != null){
				noPtzhls1.destroy();
			}
		},
	},
	beforeDestroy(){
		this.$refs.intelligentSchedulMethod.xintiaoCloseFn();
		if(this.timer) {
			clearInterval(this.timer);
		}
		//注销视频
		if(noPtzhls1 != null){
			noPtzhls1.destroy();
		}
    }
}
</script>

<style scope>
*{
  margin: 0;
  padding: 0;
}
.mapcontainer1 {
  height: 100vh;
  width: 100vw;
  top: 0px;
  position: absolute;
  overflow: hidden;
}
.bigScreenView{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.top_title{
	width: 100%;
	height: 5.5vh;
	overflow: hidden;
	background:no-repeat center center url('~@/assets/images/cutGraph/top_title.png');
	background-size:100% 100%;
	position: relative;
	z-index: 1;
}
.content_view{
	width: 100%;
	height: 94vh;
	overflow: hidden;
	position: relative;
	bottom: 0px;
}
.videoSelectView{
	position: absolute;
	top: 5.5vh;
	z-index: 1;
	width: 100%;
	height: 5.5vh;
	background-color: rgb(102,204,255);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	font-size: 25px;
	color: white;
	font-weight: 600;
}
.videoSelectView>div{
	cursor: pointer;
}
.jiankongView{
	position: absolute;
	top: 11vh;
	z-index: 1;
	width: 100%;
}
.top_titl_left{
	display: flex;
	justify-content: space-evenly;
	position: absolute;
	top: 2vh;
	width: 35%;
	font-size: 22px;
}
.top_titl_right{
	display: flex;
	justify-content: space-evenly;
	position: absolute;
	top: 2vh;
	right: 12vw;
	width: 23%;
	font-size: 22px;
}
.top_titl_left_textStyle1{
	color: gainsboro;
}
.top_titl_left_textStyle2{
	color: white;
	text-shadow: 1px 1px 1px skyblue
}
.currentTimeStyle{
	position: absolute;
	top: 2vh;
	right: 1vw;
	font-size: 24px;
	color: #03FEFE;
}
.carExample{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 30px;
	color: blue;
	cursor: pointer;
	z-index: 1;
}
.monitorCover1{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background-color: rgba(0,0,0,0.3);
}
.monitorCover1_closePic{
	width: 7vh;
	height: 7vh;
	background:no-repeat center center url('~@/assets/images/cutGraph/close2.png');
	background-size:100% 100%;
	position: absolute;
	top: 6vh;
	right: 3vw;
	cursor: pointer;
}
.monitorCover1_Video{
	position: absolute;
	top: 10vh;
	left: 50vw;
	transform: translateX(-50%);
}
</style>