<template>
	<div class="achievementMainViews" v-if="showDecide">
		<div class="achievementSmallTitle">绩效统计</div>
		<img src="../../../../assets/images/truckTuPian/close.png" class="achievementClose" @click="achievementCloseFn()">
		<div class="achievementContent">
			<!-- <div style="display: flex;margin-top:10px;">
				<el-radio v-model="from.selectModel" label="司机日派单" border>司机日派单</el-radio>
				<el-radio v-model="from.selectModel" label="司机产量报表" border>司机产量报表</el-radio>
			</div> -->
			<div class="achievementContent_inputs">
				<el-date-picker v-model="startTime" type="date" placeholder="选择开始日期" style="width:22vw;"></el-date-picker>
				<div class="achievementContent_inputs_HengXian">——</div>
				<el-date-picker v-model="endTime" type="date" placeholder="选择结束日期" style="width:22vw;"></el-date-picker>
				<el-button type="primary" round class="achievementContent_inputs_btn" @click="toSearch()">查询</el-button>
			</div>
			<div class="sijikaoheTitle">
				<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
				<span>司机考核：</span>
			</div>
			<div class="checkViews">
				<div class="checkFrom_content">
					<div>开始工作时间：</div>
					<div class="checkFrom_input">{{checkFromData.startTime ? checkFromData.startTime : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>{{carclass != '铲车' ? '今日车数：' : '今日装车数：'}}</div>
					<div class="checkFrom_input">{{checkFromData.carNum ? checkFromData.carNum + '次' : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>今日工作时间：</div>
					<div class="checkFrom_input">{{checkFromData.time ? checkFromData.time + '小时' : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>今日产量：</div>
					<div class="checkFrom_input">{{checkFromData.yield ? checkFromData.yield + '吨' : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>接单次数：</div>
					<div class="checkFrom_input">{{checkFromData.number ? checkFromData.number + '次' : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>已完成单数：</div>
					<div class="checkFrom_input">{{checkFromData.finish ? checkFromData.finish + '单' : '无'}}</div>
				</div>
				<div class="checkFrom_content" v-if="carclass != '铲车'">
					<div>今日里程数：</div>
					<div class="checkFrom_input">{{checkFromData.odo ? checkFromData.odo + 'km' : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>今日停车时长：</div>
					<div class="checkFrom_input">{{checkFromData.stop ? checkFromData.stop + '小时' : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>车辆故障次数：</div>
					<div class="checkFrom_input">{{checkFromData.alarm ? checkFromData.alarm + '次' : '无'}}</div>
				</div>
				<div class="checkFrom_content">
					<div>主要工作区域：</div>
					<div class="checkFrom_input">{{checkFromData.adr ? checkFromData.adr : '无'}}</div>
				</div>
			</div>
			<div class="sijikaoheTitle">
				<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
				<span>跑单记录：</span>
			</div>
			<!-- 卡车列表 -->
			<div class="co-table" v-if="carclass != '铲车'">
				<div class="rolling">
					<div class="table-box">
						<dl>
							<dt>
								<div>单号</div>
<!--								<div>起点经度</div>-->
<!--								<div>起点纬度</div>-->
								<div>目的地</div>
								<div>里程(km)</div>
								<div>开始时间</div>
								<div>完成时间</div>
							</dt>
							<dd v-for="(item,index) in intelligentDispatchData" :key="index">
								<div>{{item.odd}}</div>
<!--								<div>{{item.x ? parseFloat(item.x).toFixed(2) : ''}}</div>-->
<!--								<div>{{item.y ? parseFloat(item.y).toFixed(2) : ''}}</div>-->
								<div>{{item.destination}}</div>
								<div>{{parseFloat(item.mil).toFixed(2)}}</div>
								<div>{{item.endTime}}</div>
								<div>{{item.createTime}}</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<!-- 铲车列表 -->
			<div class="co-table" v-if="carclass == '铲车'">
				<div class="rolling">
					<div class="table-box">
						<dl>
							<dt>
								<div>单号</div>
								<div>卡车车牌号</div>
								<div>装车时间</div>
							</dt>
							<dd v-for="(item,index) in chanRealQueryData" :key="index">
								<div>{{item.odd}}</div>
								<div>{{item.carNo}}</div>
								<div>{{item.createTime}}</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { httpGet, httpPostForJson, putForJson, httpDelForJson} from "@/common/httpBean.js"
import {intelligentDispatchQuery,apiManmadesJXQuery,chanRealQuery,apiManmadesChanJxQuery} from "@/axios/api.js"

export default {
	data() {
		return {
			carclass:'',
			showDecide:false,
			from:{selectModel:'司机日派单'},
			personalName:'',
			startTime:'',
			endTime:'',
			checkFromData:{},
			intelligentDispatchData:[],
			chanRealQueryData:[],
			carNumber:'',
		}
	},
	methods: {
		loadData(value,chepaihao,carclass) {
			this.showDecide = true;
			this.personalName = value;
			this.carNumber = chepaihao;
			this.carclass = carclass;
			this.startTime = '';
			this.endTime = '';
			this.getintelligentDisData();
		},
		//获取智能派单
		getintelligentDisData(){
			if(this.carclass == ''){
				return
			}else if(this.carclass == "铲车"){
				let query2 = {};
				query2.size = 50;
				query2.page = 0;
				query2.sort = 'createTime,desc';
				query2.startTime = this.currentTime(this.startTime);
				query2.endTime = this.currentTime(this.endTime);
				query2.car = this.carNumber;
				query2.flag = 0;
				//下面
				httpGet(chanRealQuery,query2).then((res) => {
					if(res.code === 200){
						this.chanRealQueryData = res.data;
					};
				});
				//上面
				httpGet(apiManmadesChanJxQuery,{channame:this.personalName}).then((res) => {
					if(res.code == 200 && res.data.length != 0){
						this.checkFromData = res.data[0];
					}
				});
			}else{
				let query1 = {};
				query1.size = 50;
				query1.page = 0;
				query1.sort = 'createTime,desc';
				query1.startTime = this.currentTime(this.startTime);
				query1.endTime = this.currentTime(this.endTime);
				query1.carNo = this.carNumber;
				query1.flag = 0;
				//下面
				httpGet(intelligentDispatchQuery,query1).then((res) => {
					if(res.code === 200){
						this.intelligentDispatchData = res.data;
					};
				});
				//上面
				httpGet(apiManmadesJXQuery,{kaname:this.personalName}).then((res) => {
					if(res.code == 200 && res.data.length != 0){
						this.checkFromData = res.data[0];
					}
				});
			}
		},
		//查询
		toSearch(){
			this.getintelligentDisData();
		},
		achievementCloseFn(){
			this.showDecide = false;
			this.from = {selectModel:'司机日派单'};
			this.startTime = '';
			this.endTime = '';
      this.$parent.selectFunction = 0;
		},
		//转换时间
		currentTime(time){
			if(time == '' || time == null){
				return '';
			}
			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;
			}
			let currentFormatDate = year + "-" + month + "-" + day;
			return currentFormatDate;
		}
	}
}
</script>

<style scope>

@media screen and (max-width:901px){
	.sijikaoheTitle{
		margin-top:0.5vh;
	}
	.sijikaoheTitle>img{
		width: 3vw;
	}
	.sijikaoheTitle>span{
		font-size: 14px;
		color: rgb(24,228,240);
		font-weight: 600;
	}
	.achievementContent_inputs{
		display: flex;
		justify-content: space-between;
		margin-top:1vh;
	}
	.achievementContent_inputs_btn{
		width:8vw;
		font-size:13px;
	}
	.achievementContent_inputs_HengXian{
		color: rgb(24,228,240);
		line-height:6vh;
		font-weight:600;
	}
	.achievementMainViews{
		z-index: 2;
		position: absolute;
		top: 50%;
		left: 50%;
		height: 85vh;
		width: 75vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/jixiaotongjikuang1.png');
		background-size:100% 100%;
		transform: translate(-50%,-50%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	.achievementSmallTitle{
		color: white;
		font-size: 12px;
		text-align: center;
		line-height: 6vh;
		width: 11vw;
		height: 6vh;
		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
		background-size:100% 100%;
	}
	.achievementClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
		cursor: pointer;
	}
	.achievementContent{
		width: 100%;
	}
	.achievementContent .el-input__inner{
		height: 7vh;
		line-height: 7vh;
		font-size: 13px;
	}
	.achievementContent .el-input__icon{
		line-height: 0px;
	}
	.achievementContent .el-button.is-round{
		height: 7vh;
		padding: 0;
	}
	/* 未选中样式 */
	.is-bordered .el-radio__label{
		font-size: 20px;
		color: wheat;
	}
	.is-bordered {
		border: wheat 2px solid;
		height: 40px;
		width: 200px;
		line-height: 22px;
	}
	.is-bordered .el-radio__inner{
		height: 18px;
		width: 18px;
	}
	/* 选中样式 */
	.el-radio__input.is-checked+.el-radio__label{
		color: rgb(24,228,240);
	}
	.el-radio.is-bordered.is-checked{
		border-color: rgb(24,228,240);
	}
	.el-radio__input.is-checked .el-radio__inner{
		border-color: rgb(24,228,240);
		background: rgb(24,228,240);
	}
	.el-radio{
		margin: 0;
	}
	.el-input--small .el-input__inner {
		height:40px;
	}
	.checkViews{
		display: flex;
		justify-content: space-between;
		margin-top:0.5vh;
		flex-wrap: wrap;
	}
	.checkFrom_content{
		width: 47%;
		height: 4vh;
		line-height: 4vh;
		margin-bottom: 1vh;
		color: rgb(23,249,250);
		font-size: 12px;
		font-weight: 500;
		display: flex;
		justify-content: space-between;
	}
	.checkFrom_input{
		height: 100%;
		width: 18vw;
		border: 1px solid rgb(23,249,250);
		border-radius: 5px;
		padding:0px 10px;
		box-sizing: border-box;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.co-table{
		text-align: center;			
	}
	.table-box{
		margin-top: 0px;
	}
	dl{
		display:table;
		width:100%;
	}
	dt{
		margin-top: 20px;
		display:table-row;
		background-color: #274088;
	}
	dt>div{
		display:table-cell;
		padding: 1px;
		font-size: 12px;
		font-weight: 500;
		color: rgb(24,228,240);
	}
	dd{
		display:table-row;
	}
	dd>div{
		display:table-cell;
		padding: 1px 0px;
		font-size: 12px;
		color: rgb(24,228,240);
	}
	.rolling{
		height: 25vh;
		overflow-y:auto;
	}
	.rolling::-webkit-scrollbar {
	/*滚动条整体样式*/
	width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
	}
	.rolling::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius   : 10px;
		background-color: #274088;
		background-image: -webkit-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 75%,
			transparent 75%,
			transparent
		);
	}
	.rolling::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
		box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
		background   : #ededed;
		border-radius: 10px;
	}
}

@media screen and (min-width:901px){
	.sijikaoheTitle{
		margin-top:0.5vh;
	}
	.sijikaoheTitle>img{
		width: 2vw;
	}
	.sijikaoheTitle>span{
		font-size: 22px;
		color: rgb(24,228,240);
		font-weight: 600;
	}
	.achievementContent_inputs{
		display: flex;
		justify-content: space-between;
		margin-top:10px;
	}
	.achievementContent_inputs_btn{
		width:7vw;
		font-size:18px;
	}
	.achievementContent_inputs_HengXian{
		color: rgb(24,228,240);
		line-height:40px;
		font-weight:600;
	}
	.achievementMainViews{
		z-index: 2;
		position: absolute;
		top: 50%;
		left: 50%;
		height: 85vh;
		width: 65vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/jixiaotongjikuang1.png');
		background-size:100% 100%;
		transform: translate(-50%,-50%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	.achievementSmallTitle{
		color: white;
		font-size: 18px;
		text-align: center;
		line-height: 4.5vh;
		width: 9vw;
		height: 4.5vh;
		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
		background-size:100% 100%;
	}
	.achievementClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
		cursor: pointer;
	}
	.achievementContent{
		width: 100%;
	}
	/* 未选中样式 */
	.is-bordered .el-radio__label{
		font-size: 20px;
		color: wheat;
	}
	.is-bordered {
		border: wheat 2px solid;
		height: 40px;
		width: 200px;
		line-height: 22px;
	}
	.is-bordered .el-radio__inner{
		height: 18px;
		width: 18px;
	}
	/* 选中样式 */
	.el-radio__input.is-checked+.el-radio__label{
		color: rgb(24,228,240);
	}
	.el-radio.is-bordered.is-checked{
		border-color: rgb(24,228,240);
	}
	.el-radio__input.is-checked .el-radio__inner{
		border-color: rgb(24,228,240);
		background: rgb(24,228,240);
	}
	.el-radio{
		margin: 0;
	}
	.el-input--small .el-input__inner {
		height:40px;
	}
	.checkViews{
		display: flex;
		justify-content: space-between;
		margin-top:7px;
		flex-wrap: wrap;
	}
	.checkFrom_content{
		width: 48%;
		height: 4vh;
		line-height: 4vh;
		margin-bottom: 15px;
		color: rgb(23,249,250);
		font-size: 17px;
		font-weight: 500;
		letter-spacing: 1px;
		display: flex;
		justify-content: space-between;
	}
	.checkFrom_input{
		width: 15vw;
		border: 2px solid rgb(23,249,250);
		border-radius: 5px;
		padding:0px 10px;
		box-sizing: border-box;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.co-table{
		text-align: center;			
	}
	.table-box{
		margin-top: 0px;
	}
	dl{
		display:table;
		width:100%;
	}
	dt{
		margin-top: 20px;
		display:table-row;
		background-color: #274088;
	}
	dt>div{
		display:table-cell;
		padding:4px 3px;
		font-size: 18px;
		font-weight: 500;
		color: rgb(24,228,240);
	}
	dd{
		display:table-row;
	}
	dd>div{
		display:table-cell;
		padding:4px 3px;
		font-size: 18px;
		color: rgb(24,228,240);
	}
	.rolling{
		height: 28vh;
		overflow-y:auto;
	}
	.rolling::-webkit-scrollbar {
	/*滚动条整体样式*/
	width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
	}
	.rolling::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius   : 10px;
		background-color: #274088;
		background-image: -webkit-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.2) 25%,
			transparent 25%,
			transparent 50%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.2) 75%,
			transparent 75%,
			transparent
		);
	}
	.rolling::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
		box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
		background   : #ededed;
		border-radius: 10px;
	}
}

</style>