<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="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="carExample" @click="showSpecificInforFn()">
			<span class="el-icon-location"></span>
		</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' //车辆信息弹框

export default {
	components: {
		dataScreening,
		carManagement,
		intelligentSchedul,
		dataAnalysis,
		carSpecificInfor,
	},
	data() {
		return {
			//时间
			timer:null,
			currentTime:'',
			//选择模块
			selectModule:'', 
			//标题菜单数据
			topSmallTitleLeftData:[],
			topSmallTitleRightData:[],
			//车牌号
			carName:'4001',
			//司机用户名
			driverUserName:'lisan',
		}
	},
	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'){
				this.$refs.dataScreeningMethod.loadData();
			}
			if(item.componentName == 'carManagement'){
				this.$refs.carManagementMethod.loadData();
			}
			if(item.componentName == 'intelligentSchedul'){
				this.$refs.intelligentSchedulMethod.loadData();
			}
			if(item.componentName == 'dataAnalysis'){
				this.$refs.dataAnalysisMethod.loadData();
			}
			if(item.componentName == 'backstage'){
				let routeUrl = this.$router.resolve({
					path: "/dashboard",
				});
				window.open(routeUrl.href, '_blank');
			}
		},
		//车辆信息弹框
		showSpecificInforFn(){
			this.selectModule = 'carSpecificInfor';
			this.$refs.carSpecificInforMethod.loadData(this.carName,this.driverUserName);
		},
		//获取当前时间
		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 + ':' + sec;
        },
	},
	destroyed(){
        this.timer = null;
    }
}
</script>

<style scope>
.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;
}
.content_view{
	width: 100%;
	height: 94vh;
	overflow: hidden;
}
.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: 15vw;
	width: 20%;
	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;
}
</style>