<template>
	<div class="swViews" v-if="showDecide">
		<div class="swViews_title">
			<div>车辆信息</div>
			<img src="../../../../assets/images/truckTuPian/close.png" @click="carInCloseFn()" width="20" height="20">
		</div>
		<div class="swViews_center">
			<div>
				<span>车牌号：</span><span style="color: rgb(24,228,240);">{{carnumber}}</span>
			</div>
			<div>
				<span>司机：</span><span style="color: rgb(24,228,240);">{{carInformationData2.driver ? carInformationData2.driver : '无'}}</span>
			</div>
			<div>
				<span>车辆运行公里数：</span><span style="color: rgb(24,228,240);">{{carInformationData2.mil ? carInformationData2.mil + 'km' : '无'}}</span>
			</div>
			<div>
				<span>车辆运行时长：</span><span style="color: rgb(24,228,240);">{{carInformationData2.runTime ? carInformationData2.runTime + '小时' : '无'}}</span>
			</div>
			<div>
				<span>今日装车次数：</span><span style="color: rgb(24,228,240);">{{carInformationData2.carNum ? carInformationData2.carNum + '次' : '无'}}</span>
			</div>
			<div v-show="carclass == '卡车'">
				<span>运重状态：</span><span style="color: rgb(24,228,240);">{{carInformationData2.weightStatus == 0 ? '空运' : carInformationData2.weightStatus == 1 ? '重运' : carInformationData2.weightStatus == 2 ? '待装' : '暂无状态'}}</span>
			</div>
			<div v-show="carclass == '卡车'">
				<span>运载种类：</span><span style="color: rgb(24,228,240);">{{carInformationData2.arearesources ? carInformationData2.arearesources : '无'}}</span>
			</div>
			<div v-show="carclass == '铲车'">
				<span>电铲状态：</span><span style="color: rgb(24,228,240);">{{carInformationData2.workStatus == 0 ? '空闲' : carInformationData2.workStatus == 1 ? '忙碌' : '暂无状态'}}</span>
			</div>
		</div>
	</div>
</template>

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

export default {
	data() {
		return {
			showDecide:false,
			carInformationData2:{},
			carnumber:'',
			personalName:'',
			carclass:'',
		}
	},
	methods: {
		loadData(carnumber) {
			this.showDecide = true;
			this.carnumber = carnumber;
			httpGet(vehicleInformationQuery,{number:this.carnumber}).then((res1) => {
				if(res1.code == 200 && res1.data.totalElements != 0){
					this.carclass = res1.data.content[0].carclass;
				}
			});
			httpGet(apiManmadesRealCarQuery,{number:this.carnumber}).then((res) => {
				if(res.code == 200 && res.data.length != 0){
					this.carInformationData2 = res.data[0];
				}
			});
		},
		carInCloseFn(){
			this.showDecide = false;
      this.$parent.selectFunction = 0;
		}
	}
}
</script>

<style scope>

@media screen and (max-width:901px){
	.swViews{
		position: absolute;
		z-index: 2;
		top: 10%;
		left: 20%;
		height: 60vh;
		width: 28vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/kapian1.png');
		background-size:100% 100%;
	}
	.swViews_title{
		letter-spacing: 1px;
		padding: 2vh 2vw 1vh;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		font-weight: 600;
		color: rgb(24,228,240);
		border-bottom: 1px solid rgb(24,228,240);
	}
	.swViews_title>img{
		height: 4vh;
		width: 4vh;
	}
	.swViews_center{
		padding: 0px 2vw;
		box-sizing: border-box;
		font-size: 13px;
		color: white;
	}
	.swViews_center>div{
		margin-top: 1.5vh;
	}
}

@media screen and (min-width:901px){
	.swViews{
		position: absolute;
		z-index: 2;
		top: 20%;
		left: 30%;
		height: 60vh;
		width: 40vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/kapian1.png');
		background-size:100% 100%;
	}
	.swViews_title{
		letter-spacing: 1px;
		padding: 12px 30px 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		font-weight: 600;
		color: rgb(24,228,240);
		border-bottom: 1px solid rgb(24,228,240);
	}
	.swViews_title>img{
		height: 20px;
		width: 20px;
	}
	.swViews_center{
		padding: 0px 30px;
		box-sizing: border-box;
		font-size: 20px;
		color: white;
	}
	.swViews_center>div{
		margin-top: 10px;
	}
}

</style>