<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-select v-model="query.number" placeholder="请选择车牌号">
									<el-option v-for="(obj,index) in carInformationData" :label="obj.number" :value="obj.number" :key="index"></el-option>
								</el-select>
							</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-select v-model="trajectoryTimePoint" placeholder="请选择时间">
									<!-- <el-option v-for="(obj,index) in carInformationData" :label="obj.number" :value="obj.number" :key="index"></el-option> -->
									<el-option label="11" value="11"></el-option>
									<el-option label="22" value="22"></el-option>
									<el-option label="33" value="33"></el-option>
								</el-select>
							</el-form-item>

							<el-button style="display: inline-block;">暂停</el-button>
							<el-button style="display: inline-block;">继续</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="58.5vh">
								<el-table-column prop="date" label="启动时间" align="center"></el-table-column>
								<el-table-column prop="name" 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',
			query:{
				number:'',
				bTime:'',
				eTime:'',
			},
			carInformationData:[],
			shuaxinTimer:null,
			playSpeedNum:5,
			tishiTextShow:true,
			//停车时间以及地点数据
			trajectoryTableData:[],
			//测距按钮是否能用
			measureDistanceDis:true,
			//是否显示轨迹
			leadTime:false,
			//轨迹时间点
			trajectoryTimePoint:'',
			//右侧播放时间列表
			playtimeTableData:[]
		}
	},
	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.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.mineAlarmHistoryCountQuery({number:this.query.number,bTime:this.query.bTime,eTime:this.query.eTime}).then((res1) => {
					// 	if(res1.code == 200){
							
					// 	}
					// })
				}else{
					this.$notify({
						title: '暂无该车辆轨迹信息！',
						type: 'warning',
						duration: 2500
					});
				}
			})
			
		},
		// 重置搜索
		clearLimit(){
			this.query = {
				number:'',
				bTime:'',
				eTime:'',
			};
			this.playSpeedNum = 5;
			this.trajectoryTableData = [];
			this.loadData();
			this.tishiTextShow = true;
			this.shuaxinTimer = new Date().getTime();
			this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','',[],this.leadTime);
			this.measureDistanceDis = true;
		},
		//获取数据
		loadData() {
			this.$nextTick(()=>{
				//获取车辆信息
				HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
					if(res.code == 200){;
						this.carInformationData = res.data.content;
					}
				})
			})

		},
		//改变倍速
		changeSpeed(num){
			let that = this;
			let numSpeed1 = 5 / parseFloat(num);
			this.playSpeedNum = parseFloat(numSpeed1);
			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,parseFloat(numSpeed1),that.query.bTime,that.query.eTime,that.trajectoryTableData,that.leadTime);
					}
				})
			}
		},
		//开测量距离
		measureDistance(){
			this.$refs.mars3dViewerMapMethod.startDrawGraphic(true);
		},
		//关测量距离
		measureDistanceClose(){
			this.$refs.mars3dViewerMapMethod.startDrawGraphic(false);
		},
		//轨迹显示与否
		trajectoryShow(boo){
			let that = this;
			this.leadTime = boo;
			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);
					}
				})
			}
		},
		// 地图构造完成回调
		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)
						}
					}
				}
			])
		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	
	.device-manage{
		.mapcontainer2{
			border: 1px blue solid;
			width: 65vw;
			height: 61vh;
			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;
			bottom: 0.1vh;
			width: 16vw;
			height: 61vh;
			overflow: hidden;
		}
		
	}
	
</style>
