<template>
	<div class="carInMainViews" v-if="showDecide">
		<div class="carInSmallTitle">车辆信息</div>
		<img src="../../../../assets/images/truckTuPian/close.png" class="carInClose" @click="carInCloseFn()">
		<div class="carInContent">
			<div>
				<div>
					<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
					<span class="carInContent_left_title">车辆信息</span>
				</div>
				<div class="carInFrom_content">
					<div>车辆牌号：</div>
					<div class="carInFrom_input">{{vehicleInformationData.number}}</div>
				</div>
				<div class="carInFrom_content">
					<div>车辆年限：</div>
					<div class="carInFrom_input">{{vehicleInformationData.year ? vehicleInformationData.year + '年' : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>保养时间：</div>
					<div class="carInFrom_input">{{vehicleInformationData.time ? currentTime(vehicleInformationData.time) : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>超速预警值：</div>
					<div class="carInFrom_input">{{vehicleInformationData.alarm ? vehicleInformationData.alarm : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>终端设备号：</div>
					<div class="carInFrom_input">{{vehicleInformationData.equipmentName ? vehicleInformationData.equipmentName : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>运重：</div>
					<div class="carInFrom_input">{{vehicleInformationData.weight ? vehicleInformationData.weight : '无'}}</div>
				</div>
			</div>
			<div>
				<div>
					<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
					<span class="carInContent_left_title">车辆实时数据</span>
				</div>
				<div class="carInFrom_content">
					<div>运行状态：</div>
					<div class="carInFrom_input">{{realTimeData.status == 0 ? '空运' : realTimeData.status == 1 ? '重运' : realTimeData.status == 2 ? '待装' : '停运'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>运行时长：</div>
					<div class="carInFrom_input">{{realTimeData.runTime ? realTimeData.runTime + '小时' : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>开始时间：</div>
					<div class="carInFrom_input">{{realTimeData.startTime ? realTimeData.startTime : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>运输效率：</div>
					<div class="carInFrom_input">{{realTimeData.effic ? realTimeData.effic + 'km/h' : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>当日里程：</div>
					<div class="carInFrom_input">{{realTimeData.mil ? realTimeData.mil + 'km' : '无'}}</div>
				</div>
				<div class="carInFrom_content">
					<div>车次：</div>
					<div class="carInFrom_input">{{realTimeData.carNum ? realTimeData.carNum + '次' : '无'}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { httpGet, httpPostForJson, putForJson, httpDelForJson} from "@/common/httpBean.js"
import {vehicleInformationQuery,apiManmadesRealQuery,apiManmadesChanCheRealQuery} from "@/axios/api.js"

export default {
	data() {
		return {
			showDecide:false,
			vehicleInformationData:{},
			realTimeData:{
				status:'',
				runTime:'',
				startTime:'',
				effic:'',
				mil:'',
				carnum:'',
			},
		}
	},
	methods: {
		loadData(value,carclass) {
			let byValue = value;
			this.showDecide = true;
			httpGet(vehicleInformationQuery,{number:byValue}).then((res) => {
                if(res.code == 200){
					if(res.data.totalElements == 0){
						return
					}else{
						this.vehicleInformationData = res.data.content[0];
					}	
				}
            });
			if(carclass == '铲车'){
				httpGet(apiManmadesChanCheRealQuery,{number:byValue}).then((res) => {
					if(res.code == 200 && res.data.length != 0){
						this.realTimeData = res.data[0];
					}
				});
			}else{
				httpGet(apiManmadesRealQuery,{number:byValue}).then((res) => {
					if(res.length != 0){
						this.realTimeData = res[0];
					}
				});
			}
			
		},
		carInCloseFn(){
			this.showDecide = false;
      this.$parent.selectFunction = 0;
		},
		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 = year + "-" + month + "-" + day;
			//console.log(currentFormatDate);
			return currentFormatDate;
		}
	}
}
</script>

<style scope>

@media screen and (max-width:901px){
	.carInMainViews{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		height: 75vh;
		width: 70vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxikuang.png');
		background-size:100% 100%;
		transform: translate(-50%,-50%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	.carInSmallTitle{
		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%;
	}
	.carInClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
		cursor: pointer;
	}
	.carInContent{
		margin-top: 1vh;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.carInContent>div{
		width: 47%;
		height: 100%;
	}
	.carInContent_left_title{
		font-size: 16px;
		font-weight: 600;
		background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF); 
		-webkit-background-clip:text; 
		-webkit-text-fill-color:transparent; 
	}
	.carInFrom_content{
		margin-top: 3.5vh;
		color: rgb(23,249,250);
		font-size: 13px;
		font-weight: 500;
		display: flex;
		justify-content: space-between;
	}
	.carInFrom_content>div{
		height: 5vh;
		line-height: 4.5vh;
	}
	.carInFrom_input{
		width: 18.5vw;
		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;
	}
}

@media screen and (min-width:901px){
	.carInMainViews{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		height: 75vh;
		width: 70vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/cheliangxinxikuang.png');
		background-size:100% 100%;
		transform: translate(-50%,-50%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	.carInSmallTitle{
		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%;
	}
	.carInClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
		cursor: pointer;
	}
	.carInContent{
		margin-top: 20px;
		height: 50vh;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.carInContent>div{
		width: 47%;
		height: 100%;
	}
	.carInContent_left_title{
		font-size: 20px;
		font-weight: 600;
		background-image:-webkit-linear-gradient(bottom, #59C8FF, #FAFEFF); 
		-webkit-background-clip:text; 
		-webkit-text-fill-color:transparent; 
	}
	.carInFrom_content{
		margin-top: 15px;
		color: rgb(23,249,250);
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 1px;
		display: flex;
		justify-content: space-between;
	}
	.carInFrom_content>div{
		height: 5vh;
		line-height: 4.5vh;
	}
	.carInFrom_input{
		width: 19vw;
		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;
	}
}

</style>