<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'"/>
			<carSpecificInfor ref="carSpecificInforMethod" v-show="selectModule == 'carSpecificInfor'"/>
		</div>
		<!-- 监控区域 -->
		<div class="jiankongView">
			<carsEZUIKitJs  v-if="carsEZUIKitJsShow"/>
			<kaungEZUIKitJs  v-if="kaungEZUIKitJsShow"/>
		</div>
		<!-- 车事例 -->
		<!-- <div class="carExample" @click="showSpecificInforFn()">
			<span class="el-icon-location"></span>
		</div> -->
		<!-- 地图区域 -->
		<div id="centerDiv" class="mapcontainer1">
			<mars3dViewerMap :url="configUrl" @onload="onMapload"/>
		</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 carSpecificInfor from './components/carSpecificInfor/index.vue' //车辆信息弹框
import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图
import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控

export default {
	components: {
		dataScreening,
		carManagement,
		intelligentSchedul,
		dataAnalysis,
		carSpecificInfor,
		mars3dViewerMap,
		carsEZUIKitJs,
		kaungEZUIKitJs,
	},
	data() {
		const basePathUrl = window.basePathUrl || ''
		return {
			//地图图片
			configUrl: basePathUrl + 'config/config.json',
			//时间
			timer:null,
			currentTime:'',
			//选择模块
			selectModule:'', 
			//各模块展示传值
			isShow:{
				dataScreening:false,
				carManagement:false,
				intelligentSchedul:false,
				dataAnalysis:false,
			},
			//标题菜单数据
			topSmallTitleLeftData:[],
			topSmallTitleRightData:[],
			//车牌号
			carName:'4001',
			//司机用户名
			driverUserName:'lisan',
			//监控选择
			videoSelect1:false,
			carsEZUIKitJsShow:false,
			kaungEZUIKitJsShow:false,
		}
	},
	mounted() {
		this.loadData();
		this.setNowTimes();
		this.timer = setInterval(() => {
            this.setNowTimes();
        }, 1000)
	},
	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;
					}
				})
			})
		},
		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;
		},
		//车辆信息弹框
		showSpecificInforFn(){
			this.selectModule = 'carSpecificInfor';
			this.$refs.carSpecificInforMethod.loadData(this.carName,this.driverUserName);
			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);
		},
		//获取当前时间
		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;
        },
		// 地图构造完成回调
		onMapload(map) {
			// 以下为演示代码

			// 创建entity图层
			const graphicLayer = new this.mars3d.layer.GraphicLayer()
			map.addLayer(graphicLayer)

			// 2.在layer上绑定监听事件
			graphicLayer.on(this.mars3d.EventType.click, function (event) {
				console.log('监听layer，单击了矢量对象', event)
			})
			graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
				console.log('监听layer，鼠标移入了矢量对象', event)
			})
			graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
				console.log('监听layer，鼠标移出了矢量对象', event)
			})
			// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
			graphicLayer.bindPopup('我是layer上绑定的Popup', {
				anchor: [0, -10]
			})
			// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
			graphicLayer.bindContextMenu([
				{
					text: '删除对象',
					iconCls: 'fa fa-trash-o',
					callback: function (e) {
						const graphic = e.graphic
						if (graphic) {
						graphicLayer.removeGraphic(graphic)
						}
					}
				}
			])
		},


	},
	beforeDestroy(){
        this.timer = null;
    }
}
</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;
	/* background:no-repeat center center url('~@/assets/images/cutGraph/wallhaven-4x3j3l.jpg');
	background-size:100% 100%; */
}
.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;
}
</style>