<template>
	<div class="personalCenMainViews" v-if="showDecide">
		
		<!-- 个人信息 -->
		<div v-if="personalInViewShow">
			<div class="personalCenSmallTitle">个人信息</div>
			<div class="personalCenClose">
				<span @click="changePassword()" class="changePasswordStyle">修改密码</span>
				<img src="../../../../assets/images/truckTuPian/close.png" @click="personalCenCloseFn()" style="cursor: pointer;">
			</div>
			<div class="personalCenContent">
				<div>
					<div>
						<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
						<span class="personalCenContent_left_title">详细信息</span>
					</div>
					<div class="personalCenFrom_content">
						<div>头像：</div>
						<img :src="Avatar" class="user-avatar touxiang1">
					</div>
					<div class="personalCenFrom_content">
						<div>驾龄：</div>
						<div class="personalCenFrom_input">{{personalInformationData.age ? personalInformationData.age + '年' : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>车次：</div>
						<div class="personalCenFrom_input">{{personalInformationData.jiedan ? personalInformationData.jiedan : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>开始时间：</div>
						<div class="personalCenFrom_input">{{personalInformationData.createTime ? personalInformationData.createTime : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>工作时长：</div>
						<div class="personalCenFrom_input">{{personalInformationData.time ? personalInformationData.time : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>疲劳驾驶：</div>
						<div class="personalCenFrom_input">{{personalInformationData.status ? (personalInformationData.status == 0 ? '疲劳驾驶中' : '未疲劳驾驶') : '无'}}</div>
					</div>
				</div>
				<div>
					<div class="personalCenFrom_contentTop"></div>
					<div class="personalCenFrom_content">
						<div>姓名：</div>
						<div class="personalCenFrom_input">{{personalInformationData.name ? personalInformationData.name : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>部门：</div>
						<div class="personalCenFrom_input">{{personalInformationData.depart ? personalInformationData.depart : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>岗位：</div>
						<div class="personalCenFrom_input">{{personalInformationData.post ? personalInformationData.post : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>用户名：</div>
						<div class="personalCenFrom_input">{{personalInformationData.userName ? personalInformationData.userName : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>手机号：</div>
						<div class="personalCenFrom_input">{{personalInformationData.phone ? personalInformationData.phone : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>公司名称：</div>
						<div class="personalCenFrom_input">{{personalInformationData.company ? personalInformationData.company : '无'}}</div>
					</div>
					<div class="personalCenFrom_content">
						<div>现有住址：</div>
						<div class="personalCenFrom_input">{{personalInformationData.adr ? personalInformationData.adr : '无'}}</div>
					</div>
				</div>
			</div>
			<div class="logOutbtn">
				<el-button type="primary" round class="logOutbtnStyle" @click="openLogOut()">退出登录</el-button>
			</div>
		</div>
		
		<!-- 修改密码 -->
		<div v-if="changePassWordViewShow">
			<div class="changePassWordSmallTitle" @click="returnpersonalCen()"><span class="el-icon-arrow-left" style="font-weight:600;"></span> 返回个人中心</div>
			<div class="changePassWordSmallContent">
				<div class="changePassWordFrom_content">
					<div>原始密码：</div>
					<el-input  v-model="form.oldPass" placeholder="请输入密码" class="mimaInput1" show-password></el-input>
				</div>
				<div class="changePassWordFrom_content">
					<div>新密码：</div>
					<el-input v-model="form.newPass" placeholder="请输入密码" class="mimaInput1" show-password></el-input>
				</div>
				<div class="changePassWordFrom_content">
					<div>确认密码：</div>
					<el-input v-model="form.confirmPass" placeholder="请输入密码" class="mimaInput1" show-password></el-input>
				</div>
			</div>
			<div class="confirmNewPass">
				<el-button type="primary" round class="confirmNewPassStyle" @click="doSubmit()">确认</el-button>
			</div>
		</div>
		
	</div>
</template>

<script>
import Avatar from '@/assets/images/avatar.png'
import { encrypt } from "@/utils/rsaEncrypt.js";
import { httpGet, httpPostForJson, putForJson, httpDelForJson} from "@/common/httpBean.js"
import {
  updatePass,
  personalCenterInforQuery,
  vehicleInformationQuery,
  vehicleInformationUpdate,
  logOutStatus,
} from "@/axios/api.js"


export default {
	data() {
		return {
			carnumber:'',
			form: { oldPass: '', newPass: '', confirmPass: '' },
			Avatar: Avatar,
			showDecide:false,
			personalInViewShow:false,
			changePassWordViewShow:false,
			personalInformationData:{},
			byValue:'',
		}
	},
	methods: {
		loadData(value,carnumber) {
			this.byValue = value;
			this.carnumber = carnumber;
			this.showDecide = true;
			this.personalInViewShow = true;
			this.changePassWordViewShow = false;
			httpGet(personalCenterInforQuery,{name:this.byValue}).then((res) => {
                if(res.code == 200){
					this.personalInformationData = res.data.content[0];
				}
            });
		},
		//关闭个人信息
		personalCenCloseFn(){
			this.showDecide = false;
			this.personalInViewShow = false;
			this.changePassWordViewShow = false;
			this.resetForm();
      this.$parent.selectFunction = 0;
		},
		//退出系统
		openLogOut() {
		  	this.$confirm('确定注销并退出系统吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
		  	}).then(() => {
				httpGet(vehicleInformationQuery,{number:this.$parent.carnumber}).then((res1) => {
					if(res1.code == 200){
						if(res1.data.totalElements == 0){
							return
						}else{
							//修改车辆状态为离线
							putForJson(vehicleInformationUpdate,{id:res1.data.content[0].id,odo:0,oddStatus:1,workStatus:0,weightStatus:0}).then((res2) => {
								//人员信息表中与车辆解绑
								putForJson(personalCenterInforQuery,{id:this.personalInformationData.id,car:''}).then((res3) => {
                  //删除当前进行的订单
                  httpDelForJson(logOutStatus,{carNumber:this.$parent.carnumber}).then((res3) => {
                    this.logout();
                  });
								})
							});
						}	
					}
				});
		  	})
		},
		logout() {
      this.$router.push({path: "/login"});
			window.sessionStorage.clear();
			window.localStorage.clear(); //清除所有key
			window.isLogin = false;
			// 退出后禁止返回上一页
			history.pushState(null, null, document.URL);
			window.addEventListener("popstate", function (e) {
					history.pushState(null, null, document.URL);
				},false
			);
			window.location.reload();
		},
		//修改密码
		changePassword(){
			this.personalInViewShow = false;
			this.changePassWordViewShow = true;
			this.resetForm();
		},
		//返回个人中心
		returnpersonalCen(){
			this.personalInViewShow = true;
			this.changePassWordViewShow = false;
			this.resetForm();
		},
		//提交修改密码
		doSubmit() {
			if(this.form.oldPass == ''){
				this.$notify({
					title: '原密码不得为空！',
					type: 'warning',
					duration: 2500
				})
				return;
			}
			if(this.form.newPass == ''){
				this.$notify({
					title: '新密码不得为空！',
					type: 'warning',
					duration: 2500
				})
				return;
			}
			if(this.form.confirmPass == ''){
				this.$notify({
					title: '确认密码不得为空！',
					type: 'warning',
					duration: 2500
				})
				return;
			}
			if(this.form.oldPass == this.form.newPass){
				this.$notify({
					title: '新密码不得与旧密码相同！',
					type: 'warning',
					duration: 2500
				})
				return;
			}
			if(this.form.confirmPass != this.form.newPass){
				this.$notify({
					title: '确认密码输入错误！',
					type: 'warning',
					duration: 2500
				})
				return;
			}
			let that = this;
			httpPostForJson(updatePass,{newPass: encrypt(this.form.newPass),oldPass: encrypt(this.form.oldPass)}).then(result => {
				this.$notify({
					title: '密码修改成功，即将跳转到登录页面。',
					type: 'success',
					duration: 1500
				})
				httpGet(vehicleInformationQuery,{number:this.carnumber}).then((res1) => {
					if(res1.code == 200){
						if(res1.data.totalElements == 0){
							return
						}else{
							//修改车辆状态为离线
							putForJson(vehicleInformationUpdate,{id:res1.data.content[0].id,odo:0,oddStatus:1,workStatus:0,weightStatus:0}).then((res2) => {});
							//人员信息表中与车辆解绑
							putForJson(personalCenterInforQuery,{id:this.personalInformationData.id,car:''}).then((res3) => {})

						}	
					}
				});
				setTimeout(() => {
					this.$router.push({ path:'/login'})
					window.sessionStorage.clear();
					window.localStorage.clear(); //清除所有key
					window.isLogin = false;
					// 退出后禁止返回上一页
					history.pushState(null, null, document.URL);
					window.addEventListener("popstate", function (e) {
							history.pushState(null, null, document.URL);
						},false
					);
					window.location.reload();
				}, 1500)
			}).catch(err => {
				that.$showWarning("网络异常");
			});
		},
		//清空表单
		resetForm() {
			this.form = { oldPass: '', newPass: '', confirmPass: '' }
		},
	}
}
</script>

<style scope>

@media screen and (max-width:901px){
	.personalCenFrom_contentTop{
		height: 7.5vh;
	}
	.changePasswordStyle{
		font-size:20px;
	}
	.touxiang1{
		width: 50px;
		height: 50px;
		margin-right:6vw;
	}
	.logOutbtnStyle{
		width:11vw;
		height:6vh;
		font-size:14px;
		letter-spacing:2px;
	}
	.mimaInput1{
		width:30vw;
	}
	.confirmNewPassStyle{
		width:11vw;
		height:7vh;
		font-size:16px;
		letter-spacing:2px;
	}
	.personalCenMainViews{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		height: 80vh;
		width: 70vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/genrezhongxinkuang1.png');
		background-size:100% 100%;
		transform: translate(-50%,-50%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	/* 个人信息 */
	.personalCenSmallTitle{
		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%;
	}
	.personalCenClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
	}
	.personalCenClose>span{
		margin-right: 2vw;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}
	.personalCenContent{
		margin-top: 1vh;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.personalCenContent>div{
		width: 47%;
	}
	.personalCenContent_left_title{
		font-size: 16px;
		color: rgb(23,249,250);
	}
	.personalCenFrom_content{
		margin-top: 1.5vh;
		color: rgb(23,249,250);
		font-size: 14px;
		font-weight: 500;
		display: flex;
		justify-content: space-between;
	}
	.personalCenFrom_content>div{
		height: 5vh;
		line-height: 5vh;
	}
	.personalCenFrom_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;
	}
	.logOutbtn{
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}
	.logOutbtn .el-button.is-round{
		padding: 0px;
	}
	/* 修改密码 */
	.changePassWordSmallTitle{
		color: rgb(23,249,250);
		font-size: 15px;
		line-height: 4.5vh;
		width: 15vw;
		height: 4.5vh;
		cursor: pointer;
	}
	.changePassWordFrom_content{
		width: 65%;
		margin: 5vh auto 0;
		color: rgb(23,249,250);
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 1px;
		display: flex;
		justify-content: space-between;
		line-height: 9.5vh;
	}
	.changePassWordFrom_content>div{
		font-size: 15px;
	}
	.changePassWordSmallContent{
		margin-top:5vh;
	}
	.confirmNewPass{
		position: absolute;
		bottom: 5vh;
		left: 50%;
		transform: translateX(-50%);
	}
	.confirmNewPass .el-button.is-round{
		padding: 0px;
	}
}

@media screen and (min-width:901px){
	.personalCenFrom_contentTop{
		height: 2.5vh;
	}
	.changePasswordStyle{
		font-size:20px;
	}
	.touxiang1{
		width: 80px;
		height: 80px;
		margin-right:6vw;
	}
	.logOutbtnStyle{
		width:11vw;
		height:6vh;
		font-size:18px;
		letter-spacing:2px;
	}
	.mimaInput1{
		width:300px;
	}
	.confirmNewPassStyle{
		width:11vw;
		height:6vh;
		font-size:22px;
		letter-spacing:2px;
	}
	.personalCenMainViews{
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		height: 80vh;
		width: 70vw;
		background:no-repeat center center url('~@/assets/images/truckTuPian/genrezhongxinkuang1.png');
		background-size:100% 100%;
		transform: translate(-50%,-50%);
		padding: 12px 30px 0px;
		box-sizing: border-box;
	}
	/* 个人信息 */
	.personalCenSmallTitle{
		color: white;
		font-size: 18px;
		text-align: center;
		line-height: 5vh;
		width: 11vw;
		height: 5vh;
		background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
		background-size:100% 100%;
	}
	.personalCenClose{
		position: absolute;
		top: 4vh;
		right: 1vw;
	}
	.personalCenClose>span{
		margin-right: 20px;
		color: white;
		font-size: 18px;
		cursor: pointer;
	}
	.personalCenContent{
		margin-top: 20px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.personalCenContent>div{
		width: 47%;
	}
	.personalCenContent_left_title{
		font-size: 20px;
		color: rgb(23,249,250);
	}
	.personalCenFrom_content{
		margin-top: 15px;
		color: rgb(23,249,250);
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 1px;
		display: flex;
		justify-content: space-between;
	}
	.personalCenFrom_content>div{
		height: 5vh;
		line-height: 5vh;
	}
	.personalCenFrom_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;
	}
	.logOutbtn{
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}
	/* 修改密码 */
	.changePassWordSmallTitle{
		color: rgb(23,249,250);
		font-size: 22px;
		line-height: 4.5vh;
		width: 15vw;
		height: 4.5vh;
		cursor: pointer;
	}
	.changePassWordFrom_content{
		width: 55%;
		margin: 25px auto 0;
		color: rgb(23,249,250);
		font-size: 22px;
		font-weight: 500;
		letter-spacing: 1px;
		display: flex;
		justify-content: space-between;
	}
	.changePassWordFrom_content>div{
		font-size: 22px;
	}
	.changePassWordSmallContent{
		margin-top:100px;
	}
	.confirmNewPass{
		position: absolute;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
	}
}

</style>