<template>
	<div class="failureDeMainViews" v-if="showDecide">
		<div class="failureDeSmallTitle">车辆故障申报</div>
		<img src="../../../../assets/images/truckTuPian/close.png" class="failureDeClose" @click="failureDeCloseFn()">
		<div class="failureDeContent">
			<div class="failureDeContentFromViews">
				<div>
					<img class="tu1" src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
					<span class="failureDeContent_left_title">选择要申报的车辆：</span>
					<div style="display: flex;justify-content: space-evenly;margin-top:1vh;">
						<el-radio v-model="from.car" label="当前车辆故障" border>当前车辆故障</el-radio>
						<el-radio v-model="from.car" label="其他车辆故障" border>其他车辆故障</el-radio>
					</div>
				</div>
				<div>
					<span>车辆号码：</span>
					<el-select v-model="from.carcode" placeholder="请选择车辆号码" style="width:18vw;" :disabled="from.car == '当前车辆故障'">
						<el-option v-for="(obj,index) in carInforData" :label="obj.number" :value="obj.number" :key="index"></el-option>
					</el-select>
				</div>
				<div>
					<span>司机名称：</span>
					<el-select v-model="from.name" placeholder="请选择司机名称" style="width:18vw;" :disabled="from.car == '当前车辆故障'">
						<el-option v-for="(obj,index) in peopleInforData" :label="obj.name" :value="obj.name" :key="index"></el-option>
					</el-select>
				</div>
				<div style="display:flex;">
					<span>车辆位置：</span>
					<div class="getweizhitu1" @click="getLocationFn()">
						<img src="../../../../assets/images/truckTuPian/dingwei1.png">
						<span>{{getLocationText}}</span>
					</div>
					<span style="margin-left:1vw;" v-if="zuobiaoShow">坐标:{{parseFloat(from.lat).toFixed(2)}},{{parseFloat(from.lon).toFixed(2)}}</span>
				</div>
				<div>
					<span>故障类型：</span>
					<el-select v-model="from.fault" placeholder="请选择故障类型" style="width:18vw;">
						<el-option v-for="(obj,index) in faultInforData" :label="obj.breakclass" :value="obj.breakclass" :key="index"></el-option>
					</el-select>
				</div>
				<div>
					<div class="failure_textarea1">故障问题描述：</div>
					<el-input
						type="textarea"
						:rows="4"
						placeholder="请输入内容"
						v-model="from.problem"
						class="failure_textarea2">
					</el-input>
				</div>
			</div>
		</div>
		<div class="submitDeStyle">
			<el-button type="primary" style="width:14vw" round @click="submitDeFn()">故障申报</el-button>
		</div>
	</div>
</template>

<script>
import { httpGet, httpPostForJson, putForJson, httpDelForJson} from "@/common/httpBean.js"
import {carsInforQuery,
		failureDeclarationAdd,
		vehicleInformationQuery,
		vehicleInformationUpdate,
		personalCenterInforQuery,
		faultInforQuery,
		carRealTimeLocationQuery2,
		faultDayAdd,
		faultMonthAdd,
		faultYearAdd
} from "@/axios/api.js"

export default {
	data() {
		return {
			showDecide:false,
			from:{car:'',carcode:'',name:'',fault:'',problem:'',lat:'',lon:''},
			getLocationText:'点击获取车辆位置',
			carnumber:'',
			personName:'',
			carInforData:[],
			peopleInforData:[],
			faultInforData:[],
			zuobiaoShow:false,
		}
	},
	methods: {
		loadData(carnumber,personName) {
			this.showDecide = true;
			this.carnumber = carnumber;
			this.personName = personName;
			this.from = {car:'',carcode:'',name:'',fault:'',problem:'',lat:'',lon:''};
			this.getLocationText = '点击获取车辆位置';
			httpGet(vehicleInformationQuery,{size:9999}).then((res) => {
                if(res.code == 200){
					this.carInforData = res.data.content;
				}
            });
			httpGet(personalCenterInforQuery,{size:9999}).then((res) => {
                if(res.code == 200){
					this.peopleInforData = res.data.content;
				}
            });
			httpGet(faultInforQuery,{size:9999}).then((res) => {
                if(res.code == 200){
					this.faultInforData = res.data.content;
				}
            });
		},
		failureDeCloseFn(){
			this.showDecide = false;
			this.zuobiaoShow = false;
			this.from = {car:'',carcode:'',name:'',fault:'',problem:'',lat:'',lon:''};
			this.getLocationText = '点击获取车辆位置';
      this.$parent.selectFunction = 0;
		},
		//获取车辆位置
		getLocationFn(){
			let that = this;
			if(this.from.carcode == ''){
				this.$notify({
					title: '请输入车辆号码！',
					type: 'error',
					duration: 2500
				})
			}else{
				httpGet(vehicleInformationQuery,{number:this.from.carcode}).then((res) => {
					if(res.code == 200){
						if(res.data.content[0].equipmentName == '' || !res.data.content[0].equipmentName){
							this.$notify({
								title: '暂无车辆位置！',
								type: 'error',
								duration: 2500
							})
						}else{
							httpGet(carRealTimeLocationQuery2,{name:res.data.content[0].equipmentName}).then((res1) => {
								if(res1.data){
									that.from.lat = res1.data.location.y;
									that.from.lon = res1.data.location.x;
									that.zuobiaoShow = true;
									this.$notify({
										title: '获取成功！',
										type: 'success',
										duration: 2500
									})
								}else{
									this.$notify({
										title: '暂无车辆位置！',
										type: 'error',
										duration: 2500
									})
									that.from.lat = 0;
									that.from.lon = 0;
								}
							});
						}
					}
            	});
			}
			
		},
		//提交申报
		submitDeFn(){
			if(this.from.carcode == ''){
				this.$notify({
					title: '请输入车辆号码！',
					type: 'error',
					duration: 2500
				})
			}else{
				httpPostForJson(faultDayAdd,this.from).then((res) => {});
				httpPostForJson(faultMonthAdd,this.from).then((res) => {});
				httpPostForJson(faultYearAdd,this.from).then((res) => {});
				let breakData1 = {};
				breakData1.number = this.from.carcode;
				breakData1.driver = this.from.name;
				breakData1.carbreak = this.from.fault;
				breakData1.status = 1;
				breakData1.breakRemarks = this.from.problem;
				httpPostForJson(carsInforQuery,breakData1).then((res) => {});
				httpPostForJson(failureDeclarationAdd,this.from).then((res) => {
					if(res.code == 200){
						this.$notify({
							title: '故障申报成功！',
							type: 'success',
							duration: 2500
						});
						this.from = {car:'',carcode:'',name:'',fault:'',problem:'',lat:'',lon:''};
						this.getLocationText = '点击获取车辆位置';
						this.zuobiaoShow = false;
					}else{
						this.$notify({
							title: res.head.message,
							type: 'error',
							duration: 2500
						})
						this.from = {car:'',carcode:'',name:'',fault:'',problem:'',lat:'',lon:''};
						this.getLocationText = '点击获取车辆位置';
						this.zuobiaoShow = false;
					}
				});
				//修改车辆状态
				httpGet(vehicleInformationQuery,{number:this.from.carcode}).then((res) => {
					if(res.code == 200){
						putForJson(vehicleInformationUpdate,{id:res.data.content[0].id,status:1}).then((res) => {
							this.$nextTick(()=>{
								window.location.reload();
							})
						});
					}
				
				});
			}
		},
	},
	watch:{
		'from.car':function(){
			if(this.from.car == '当前车辆故障'){
				this.from.carcode = this.carnumber;
				this.from.name = this.personName;
				this.getLocationFn();
			}else{
				this.from.carcode = '';
				this.from.name = '';
				this.from.lat = '';
				this.from.lon = '';
				this.zuobiaoShow = false;
			}
		},
	},
}
</script>

<style scope>

@media screen and (max-width:901px){
	.failure_textarea1{
		color: rgb(24,228,240);
		font-size: 13px;
		margin-bottom:1vh;
	}
	.failure_textarea2{
		font-size: 13px;
		width:30vw;
	}
	.failure_textarea2 .el-textarea__inner{
		max-height: 20vh !important;
	}
	.getweizhitu1{
		cursor: pointer;
	}
	.getweizhitu1>img{
		height: 2.5vh;
	}
	.getweizhitu1>span{
		color: rgb(24,228,240);
		font-size:12px;
		text-decoration:underline;
	}
	.el-select-dropdown__item{
		font-size: 20px;
		height: 45px;
		line-height: 45px;
	}
	.failureDeMainViews{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		height: 90vh;
		width: 44vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbankuang1.png');
		background-size:100% 100%;
		transform: translate(-50%,-48%);
		padding: 2vh 2vw 0px;
		box-sizing: border-box;
	}
	.failureDeSmallTitle{
		color: white;
		font-size: 12px;
		text-align: center;
		line-height: 7vh;
		width: 14vw;
		height: 7vh;
		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
		background-size:100% 100%;
	}
	.failureDeClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
		cursor: pointer;
	}
	.failureDeContent{
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.failureDeContent_left_title{
		font-size: 13px !important;
		font-weight: 500;
		color: rgb(24,228,240);
	}
	.failureDeContentFromViews .tu1{
		width: 3vw;
	}
	/* 未选中样式 */
	.is-bordered .el-radio__label{
		font-size: 13px !important;
		color: wheat;
	}
	.is-bordered {
		border: wheat 2px solid;
		height: 38px;
		line-height: 20px;
	}
	.is-bordered .el-radio__inner{
		height: 18px;
		width: 18px;
	}
	.failureDeContentFromViews .el-radio.is-bordered{
		height: 7vh;
		width: 49%;
		padding: 0.5vh 1vw 0px;
	}
	/* 选中样式 */
	.el-radio__input.is-checked+.el-radio__label{
		color: #1890ff;
	}
	.el-radio.is-bordered.is-checked{
		border-color: #1890ff;
	}
	.el-radio__input.is-checked .el-radio__inner{
		border-color: #1890ff;
		background: #1890ff;
	}
	.el-radio{
		margin: 0;
	}
	.el-radio.is-bordered{
		padding: 8px 20px 0px 10px;
	}
	.failureDeContentFromViews{
		margin-top: 1vh;
	}
	.failureDeContentFromViews>div{
		margin-bottom: 1vh;
	}
	.failureDeContentFromViews>div>span{
		color: rgb(24,228,240);
		font-size: 13px;
	}
	.el-input--small .el-input__inner{
		font-size: 18px;
	}
	.submitDeStyle{
		position: absolute;
		bottom: 2vh;
		left: 50%;
		transform: translateX(-50%);
	}
	.submitDeStyle button{
		width:11vw;
		height:7vh;
		font-size:13px;
		letter-spacing:1px;
		text-align: center;
		line-height: 0;
		padding: 0 !important;
	}
	.failureDeContentFromViews .el-input--suffix .el-input__inner{
		height: 6.5vh;
		font-size: 13px;
	}
	.failureDeContentFromViews .el-select__caret.el-input__icon.el-icon-arrow-up{
		line-height: 0px !important;
	}
}

@media screen and (min-width:901px){
	.failure_textarea1{
		color: rgb(24,228,240);
		font-size: 20px;
		margin-bottom:10px;
	}
	.failure_textarea2{
		font-size: 18px;
		width:30vw;
	}
	.getweizhitu1{
		cursor: pointer;
	}
	.getweizhitu1>img{
		height: 20px;
	}
	.getweizhitu1>span{
		color: rgb(24,228,240);
		font-size:18px;
		margin-top:-10px;
		text-decoration:underline;
	}
	.el-select-dropdown__item{
		font-size: 20px;
		height: 45px;
		line-height: 45px;
	}
	.failureDeMainViews{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		height: 90vh;
		width: 44vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/guzhangshenbankuang1.png');
		background-size:100% 100%;
		transform: translate(-50%,-48%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	.failureDeSmallTitle{
		color: white;
		font-size: 17px;
		text-align: center;
		line-height: 4.5vh;
		width: 11vw;
		height: 4.5vh;
		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
		background-size:100% 100%;
	}
	.failureDeClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
		cursor: pointer;
	}
	.failureDeContent{
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.failureDeContent_left_title{
		font-size: 20px;
		font-weight: 500;
		color: rgb(24,228,240);
	}
	/* 未选中样式 */
	.is-bordered .el-radio__label{
		font-size: 17px;
		color: wheat;
	}
	.is-bordered {
		border: wheat 2px solid;
		height: 38px;
		line-height: 20px;
	}
	.is-bordered .el-radio__inner{
		height: 18px;
		width: 18px;
	}
	/* 选中样式 */
	.el-radio__input.is-checked+.el-radio__label{
		color: #1890ff;
	}
	.el-radio.is-bordered.is-checked{
		border-color: #1890ff;
	}
	.el-radio__input.is-checked .el-radio__inner{
		border-color: #1890ff;
		background: #1890ff;
	}
	.el-radio{
		margin: 0;
	}
	.el-radio.is-bordered{
		padding: 8px 20px 0px 10px;
	}
	.failureDeContentFromViews{
		margin-top: 10px;
	}
	.failureDeContentFromViews>div{
		margin-bottom: 25px ;
	}
	.failureDeContentFromViews>div>span{
		color: rgb(24,228,240);
		font-size: 20px;
	}
	.el-input--small .el-input__inner{
		font-size: 18px;
	}
	.submitDeStyle{
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}
	.submitDeStyle button{
		width:10vw;
		height:6.5vh;
		font-size:18px;
		letter-spacing:2px;
	}
}

</style>