<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-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-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-button type="primary" 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="query.playSpeed" placeholder="请选择观看倍速" @change="changeSpeed()">
									<el-option label="1倍" value="1"></el-option>
									<el-option label="4倍" value="4"></el-option>
									<el-option label="8倍" value="8"></el-option>
									<el-option label="16倍" value="16"></el-option>
								</el-select>
							</el-form-item>

						</el-form>
						<div id="centerDiv" class="mapcontainer2">
							<mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod" :key="shuaxinTimer"/>
						</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:'',
				playSpeed:'1',
			},
			carInformationData:[],
			areaInformationData:[],
			shuaxinTimer:null,
			playSpeedNum:5,
			tishiTextShow:true,
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.loadData();
			this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
		})
	},
	methods: {
		// 点击搜索
		toSearch() {
			let that = this;
			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);
				}
			})
		},
		// 重置搜索
		clearLimit(){
			this.query = {
				number:'',
				bTime:'',
				eTime:'',
				playSpeed:'1',
			};
			this.playSpeedNum = 5;
			this.loadData();
			this.tishiTextShow = true;
			this.shuaxinTimer = new Date().getTime();
			this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
		},
		//获取数据
		loadData() {

			this.$nextTick(()=>{
				//获取车辆信息
				HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
					if(res.code == 200){;
						this.carInformationData = res.data.content;
					}
				})
				//获取区域信息
				HttpReq.truckDispatching.RegionalInformationQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.areaInformationData = res.data.content;
					}
				})
			})

		},
		//改变倍速
		changeSpeed(){
			let that = this;
			let numSpeed1 = 5 / parseFloat(this.query.playSpeed);
			this.playSpeedNum = parseFloat(numSpeed1);
			if(this.query.number == ''){
				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);
					}
				})
			}
		},
		// 地图构造完成回调
		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: 80vw;
			height: 65.5vh;
			overflow: hidden;
		}
		.tishiTextStyle{
			font-size: 30px;
			color: rgb(24,144,255);
			font-weight: 600;
			letter-spacing: 3px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
		}
		
	}
	
</style>
