<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.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
							</el-form-item>
							<el-form-item label="结束时间" style="display: inline-block;">
								<el-date-picker v-model="query.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
							</el-form-item>
							<el-form-item label="选择矿区" style="display: inline-block;">
								<el-select v-model="query.road" placeholder="请选择矿区">
									<el-option v-for="(obj,index) in areaInformationData" :label="obj.name" :value="obj.name" :key="index"></el-option>
								</el-select>
							</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="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-button type="primary" plain style="font-size:15px;">开测距</el-button>
								<el-button type="primary" plain style="font-size:15px;">关测距</el-button>
							</el-form-item>
							<el-form-item label="轨迹时间点" style="display: inline-block;">
								<el-select v-model="query.pointOfTime" placeholder="请选择轨迹时间点">
									<el-option label="点1" value="点1"></el-option>
									<el-option label="点2" value="点2"></el-option>
									<el-option label="点3" value="点3"></el-option>
								</el-select>
							</el-form-item>
							<el-button style="font-size:15px;">暂停</el-button>
							<el-button style="font-size:15px;">继续</el-button>
							<el-button style="font-size:15px;">统计轨迹</el-button>
							<el-form-item label="观看倍速" style="display: inline-block;">
								<el-select v-model="query.playSpeed" placeholder="请选择观看倍速">
									<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-option label="32倍" value="32"></el-option>
								</el-select>
							</el-form-item>
							<el-button type="primary" plain style="font-size:15px;">显示所有轨迹</el-button>

						</el-form>
						<div class="playbackView">
							<img src="../../../assets/images/cutGraph/examplePic12.png">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
	name: 'CarTrajectory',
	data() {
		return {
			query:{
				startTime:'',
				endTime:'',
			},
			carInformationData:[],
			areaInformationData:[],
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		// 点击搜索
		toSearch() {
			
		},
		// 重置搜索
		clearLimit(){
			this.query = {};
			this.loadData();
		},
		//获取数据
		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;
					}
				})
			})

		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.device-manage{
		.panel-bottom{
			.btn-groub2{
				display:inline-block;
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
		}
	}
	.playbackView{
		width: 80vw;
		height: 65.5vh;
		overflow: hidden;
	}
	
</style>
