<template>
	<div class="common-page device-manage">
		<div class="panel-bottom page-row">
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<el-form size="small" label-width="100px">

							<div style="font-size:18px;font-weight:bold;margin-bottom:10px;">车辆历史轨迹查询</div>

							<el-form-item label="*开始时间" style="display: inline-block;">
								<el-date-picker v-model="query.bTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
							</el-form-item>

							<el-form-item label="*结束时间" style="display: inline-block;">
								<el-date-picker v-model="query.eTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
							</el-form-item>

							<el-form-item label="*车牌号" style="display: inline-block;">
								<el-cascader v-model="carInforValue" :options="carInformationData" @change="handleChange"></el-cascader>
							</el-form-item>

							<el-button type="success" icon="el-icon-search" @click="toSearch" style="display: inline-block;">搜索</el-button>
							<el-button icon="el-icon-refresh" @click="clearLimit" style="display: inline-block;">重置</el-button>

							<br>

							<el-form-item label="轨迹时间点" style="display: inline-block;">
								<el-time-picker
									v-model="trajectoryTimePoint"
									@change="trajectoryTimePointFn"
									:placeholder="trajectoryTimePointPlaceholder">
								</el-time-picker>
							</el-form-item>

							<el-button style="display: inline-block;" @click="pauseResume()">{{pauseResumeBoolean ? '暂停' : '继续'}}</el-button>
							<el-button type="primary" @click="changeSpeed(1)" plain>1倍</el-button>
							<el-button type="primary" @click="changeSpeed(4)" plain>4倍</el-button>
							<el-button type="primary" @click="changeSpeed(8)" plain>8倍</el-button>
							<el-button type="primary" @click="changeSpeed(16)" plain>16倍</el-button>
							<el-button type="primary" @click="changeSpeed(32)" plain>32倍</el-button>
							<el-button type="primary" @click="trajectoryShow(true)" plain>显示所有轨迹</el-button>
							<el-button @click="trajectoryShow(false)" plain>隐藏所有轨迹</el-button>

							<!-- <el-form-item label="测量距离" style="display: inline-block;">
								<el-button type="primary" @click="measureDistance()" plain :disabled="measureDistanceDis">开测距</el-button>
								<el-button type="primary" @click="measureDistanceClose()" plain :disabled="measureDistanceDis">关测距</el-button>
							</el-form-item> -->

						</el-form>
						<div id="centerDiv" class="mapcontainer2">
							<mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod" :key="shuaxinTimer"/>
						</div>
						<div class="trajectoryTableView">
							<div style="font-size:20px;font-weight: 600;">播放时间列表</div>
							<el-table :data="playtimeTableData" border height="64vh">
								<el-table-column prop="bTime" label="启动时间" align="center"></el-table-column>
								<el-table-column prop="eTime" label="停车时间" align="center"></el-table-column>
							</el-table>
						</div>
						<div class="tishiTextStyle" v-if="tishiTextShow">请选择车辆查看轨迹</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import mars3dViewerMap from '../../../components/mars3d/Map2.vue' //地图

export default {
	name: 'CarTrajectory',
	components: {
		mars3dViewerMap,
	},
	data() {
		const basePathUrl = window.basePathUrl || ''
		return {
			//地图图片
			configUrl: basePathUrl + 'config/config.json',
			carInforValue:[],
			query:{
				number:'',
				bTime:'',
				eTime:'',
			},
			carInformationData:[],
			shuaxinTimer:null,
			playSpeedNum:1,
			tishiTextShow:true,
			//停车时间以及地点数据
			trajectoryTableData:[],
			//测距按钮是否能用
			measureDistanceDis:true,
			//是否显示轨迹
			leadTime:false,
			//轨迹时间点
			trajectoryTimePoint:'',
			trajectoryTimePointPlaceholder:'轨迹时间点',
			//右侧播放时间列表
			playtimeTableData:[],
			//暂停继续按钮判断
			pauseResumeBoolean:true,
			//右侧播放时间列表第一条数据时间
			playtimeTableFirstTimeData:'',
		}
	},
	mounted() {
		let that = this;
		this.loadData();
		if(this.$route.query.number){
			this.query.number = this.$route.query.number;
			if(this.query.number == ''){
				this.$notify({
					title: '请选择车辆牌号！',
					type: 'warning',
					duration: 2500
				});
				return
			}
			if(this.query.bTime == ''){
				this.$notify({
					title: '请选择开始时间！',
					type: 'warning',
					duration: 2500
				});
				return
			}
			if(this.query.eTime == ''){
				this.$notify({
					title: '请选择结束时间！',
					type: 'warning',
					duration: 2500
				});
				return
			}
			HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
				if(res.code == 200 && res.data.totalElements != 0){
					this.tishiTextShow = false;
					this.shuaxinTimer = new Date().getTime();
					that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime,this.trajectoryTableData,this.leadTime);
				}else{
					this.$notify({
						title: '暂无该车辆轨迹信息！',
						type: 'warning',
						duration: 2500
					});
				}
			})
		}
	},
	methods: {
		// 点击搜索
		toSearch() {
			let that = this;
			if(this.query.number == ''){
				this.$notify({
					title: '请选择车辆牌号！',
					type: 'warning',
					duration: 2500
				});
				return
			}
			if(this.query.bTime == ''){
				this.$notify({
					title: '请选择开始时间！',
					type: 'warning',
					duration: 2500
				});
				return
			}
			if(this.query.eTime == ''){
				this.$notify({
					title: '请选择结束时间！',
					type: 'warning',
					duration: 2500
				});
				return
			}
			//获取地图
			HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
				if(res.code == 200 && res.data.totalElements != 0){
					this.tishiTextShow = false;
					//获取停车时间以及地点数据并启动地图
					HttpReq.truckDispatching.mineAlarmHistoryCountQuery({number:this.query.number,bTime:this.query.bTime,eTime:this.query.eTime}).then((res1) => {
						if(res1.code == 200){
							this.measureDistanceDis = false;
							this.pauseResumeBoolean = true;
							this.trajectoryTimePoint = '';
							this.trajectoryTimePointPlaceholder = '轨迹时间点';
							this.trajectoryTableData = res1.data;
							this.shuaxinTimer = new Date().getTime();
							that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime,this.trajectoryTableData,this.leadTime);
						}
					})
					//获取右侧播放时间列表
					HttpReq.truckDispatching.apiMineAlarmHistoryTongJiQuery({number:this.query.number,bTime:this.query.bTime,eTime:this.query.eTime}).then((res2) => {
						if(res2.code == 200){
							let arr1 = [];
							let arr2 = [];
							res2.data.forEach((item,index)=>{
								if(index % 2 == 0){
									arr1.push(item.time);
								}else{
									arr2.push(item.time);
								}
							})
							let lastData1 = [];
							arr1.forEach((item,index)=>{
								let obj1 = {};
								obj1.bTime = item;
								obj1.eTime = arr2[index];
								lastData1.push(obj1);
							})
							this.playtimeTableData = lastData1;
							let time1 = lastData1[0].bTime.split(' ')[0];
							this.playtimeTableFirstTimeData = time1;
						}
					})
				}else{
					this.$notify({
						title: '暂无该车辆轨迹信息！',
						type: 'warning',
						duration: 2500
					});
				}
			})
			
		},
		// 重置搜索
		clearLimit(){
			this.query = {number:'',bTime:'',eTime:''};
			this.carInforValue = [];
			this.playSpeedNum = 1;
			this.trajectoryTableData = [];
			this.playtimeTableData = [];
			this.trajectoryTimePoint = '';
			this.trajectoryTimePointPlaceholder = '轨迹时间点';
			this.loadData();
			this.tishiTextShow = true;
			this.shuaxinTimer = new Date().getTime();
			this.$refs.mars3dViewerMapMethod.closeInterval();
			this.$refs.mars3dViewerMapMethod.getCoordinate('','',1,'','',[],this.leadTime);
			this.measureDistanceDis = true;
		},
		//获取数据
		loadData() {
			this.$nextTick(()=>{
				//获取车队
				let arr1 = [];
				HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res1) => {
					if(res1.code == 200){
						//获取车辆信息
						HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res2) => {
							if(res2.code == 200){
								res1.data.content.forEach((item1,index1)=>{
									let obj1 = {};
									obj1.value = item1.name;
									obj1.label = item1.name;
									obj1.children = [];
									res2.data.content.forEach((item2,index2)=>{
										if(item1.name == item2.road){
											let obj2 = {};
											obj2.value = item2.number;
											obj2.label = item2.number;
											obj1.children.push(obj2);
										}
									})
									arr1.push(obj1);
								})
								this.carInformationData = arr1;
							}
						})
					}
				})

			})

		},
		//改变倍速
		changeSpeed(num){
			if(this.query.number == '' || !this.query.bTime || !this.query.eTime){
				return;
			}else{
				this.$refs.mars3dViewerMapMethod.changeSpeed(num);
			}
		},
		//开测量距离
		measureDistance(){
			this.$refs.mars3dViewerMapMethod.startDrawGraphic(true);
		},
		//关测量距离
		measureDistanceClose(){
			this.$refs.mars3dViewerMapMethod.startDrawGraphic(false);
		},
		//轨迹显示与否
		trajectoryShow(boo){
			let that = this;
			this.leadTime = boo;
			this.pauseResumeBoolean = true;
			this.trajectoryTimePointPlaceholder = '轨迹时间点';
			if(this.query.number == '' || !this.query.bTime || !this.query.eTime){
				return;
			}else{
				HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
					if(res.code == 200){
						this.tishiTextShow = false;
						this.shuaxinTimer = new Date().getTime();
						that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime,that.trajectoryTableData,that.leadTime);
					}
				})
			}
		},
		//选择车辆级联器
		handleChange(){
			if(this.carInforValue.length == 2){
				this.query.number = this.carInforValue[1];
			}else{
				this.query.number = '';
			}
		},
		//暂停继续
		pauseResume(){
			if(this.query.number == '' || !this.query.bTime || !this.query.eTime){
				return;
			}else{
				if(this.pauseResumeBoolean){
					this.$refs.mars3dViewerMapMethod.pauseResume(false);
					this.pauseResumeBoolean = false;
				}else{
					this.$refs.mars3dViewerMapMethod.pauseResume(true);
					this.pauseResumeBoolean = true;
				}
			}
    	},
		//接收当前进度时间
		progressTimeFn(time){
			let text1 = time.split(' ')[1];
			this.trajectoryTimePointPlaceholder = text1;
		},
		//轨迹时间点跳转
		trajectoryTimePointFn(){
			let time2 = this.currentTime(this.trajectoryTimePoint);
			let time3 = '';
			if(this.playtimeTableFirstTimeData){
				time3 = this.playtimeTableFirstTimeData + ' ' + time2;
			}else{
				this.$notify({
					title: '请等待右侧列表加载完毕然后选择轨迹时间点！',
					type: 'warning',
					duration: 2500
				});
				this.trajectoryTimePoint = '';
				return
			}
			if(this.query.number == '' || !this.query.bTime || !this.query.eTime){
				return;
			}else{
				if(!this.trajectoryTimePoint){
					return
				}else{
					this.$refs.mars3dViewerMapMethod.changeTime(time3);
					this.trajectoryTimePoint = '';
				}
			}
		},
		// 地图构造完成回调
		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)
						}
					}
				}
			])
		},
		//转换时间格式
		currentTime(time){
			var date = new Date(time);
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			var hours = date.getHours();          //小时 ,返回 Date 对象的小时 (0 ~ 23)
			var minutes = date.getMinutes();      //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
			var seconds = date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)   
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			//修改小时格式
			if (hours >= 0 && hours <= 9) {
				hours = "0" + hours;
			}
			//修改分钟格式
			if (minutes >= 0 && minutes <= 9) {
				minutes = "0" + minutes;
			}
			//修改秒格式
			if (seconds >= 0 && seconds <= 9) {
				seconds = "0" + seconds;
			}
			//获取当前系统时间  格式(yyyy-mm-dd hh:mm:ss)
			let currentFormatDate = hours + ":" + minutes + ":" + seconds;
			return currentFormatDate;
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	
	.device-manage{
		.mapcontainer2{
			border: 1px blue solid;
			width: 65vw;
			height: 66.5vh;
			overflow: hidden;
		}
		.tishiTextStyle{
			font-size: 30px;
			color: rgb(24,144,255);
			font-weight: 600;
			letter-spacing: 3px;
			position: absolute;
			top: 55%;
			left: 45%;
			transform: translateX(-50%);
		}
		.trajectoryTableView{
			position: absolute;
			right: 1vw;
			top: 14vh;
			width: 16vw;
			overflow: hidden;
		}
		
	}
	
</style>
