<!-- 修改密码 -->
<template>
	<div class='passwordChange'>
		<el-dialog title="" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogPasswordVisible">
			<div slot="title" class="header-title">
				<span class="dialogHeader">修改密码</span>
				<img @click="closeDialog('passwordForm')" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
			</div>
			<div class="passDiv">
				<el-form :hide-required-asterisk="true" :model="passwordForm" :rules="rules" ref="passwordForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="新密码" prop="new">
						<el-input v-model="passwordForm.new" placeholder="请输入新密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="confirm">
						<el-input v-model="passwordForm.confirm" placeholder="请输入确认密码"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="dialogBtns">
				<el-button class="mrgt" type="primary" @click="passwordSubmit('passwordForm')">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "passwordChange",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
			// let validateOld=(rule, value, callback)=>{
			// 	if (value !== this.userDetail.password) {
			// 		callback(new Error('密码错误，请重新输入！'));
			// 	} else{
			// 		callback();
			// 	}
			// };
			let validateNew = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				}else if (value === this.passwordForm.old){
					callback(new Error('新密码不能和旧密码相同！'));
				} else {
					if (this.passwordForm.confirm != '') {
						this.$refs.passwordForm.validateField('confirm');
					}
					callback();
				}
			};
			let validateConfirm = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请再次输入密码"));
				} else if (value !== this.passwordForm.confirm) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
//这里存放数据
			return {
				dialogPasswordVisible: false,
				passwordForm:{
					new: '',
					old: '',
					confirm: ''
				},
				rules: {
					new: [
						{ validator: validateNew, trigger: 'blur'},
						// { required: true, message: '请输入新密码', trigger: 'blur' },
					],
					old: [
						// { validator: validateOld, trigger: 'blur' }
						{ required: true, message: '请输入当前密码', trigger: 'blur' },
					],
					confirm: [
						{ validator: validateConfirm, trigger: 'blur' }
						// { required: true, message: '请输入确认密码', trigger: 'blur' },
					],
				},
			};
		},
		props: {
			showPasswordDialog: { type: Boolean, default: false },
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			showPasswordDialog:{
				immediate: true,
				handler(showPasswordDialog) {
					// console.log(showPasswordDialog)
					this.dialogPasswordVisible = showPasswordDialog;
				}
			},
		},
//方法集合
		methods: {
			passwordSubmit(val) {
				this.$refs[val].validate((valid) => {
					if (valid) {
						let data = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
						data.password = this.passwordForm.confirm;
						this.$axios.putPassword(data).then((res) => {
							console.log(res)
							if (res.status === 200) {
								this.$message({
									message: '修改密码成功！',
									type: 'success'
								});
								this.$emit('close', false);
								let that = this;
								setTimeout(function () {
									that.$axios.getLogout().then(res => { // 登出
										if (res.data.code === 200) {
											that.$router.push({name: 'login'});
											localStorage.clear();
										}
									})
								}, 500)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			closeDialog(val) {
				console.log(val)
				this.$refs[val].resetFields();
				this.$emit('close', false);
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.userDetail = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			// console.log(this.userDetail)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.header-title{
		text-align: center;
		font-size: 26px;
		position: relative;
		height: 30px;
	}
	.dialogHeaderClose{
		position: absolute;
		top: -10px;
		right: 0px;
		cursor: pointer;
	}

	.passDiv{
		width: 50%;
		margin: 200px auto;
	}

	.dialogBtns{
		width: 70%;
		text-align: center;
		border-top: 2px solid #5059D5;
		margin: 50px auto;

	}

	.mrgt{
		margin-top: 20px;
	}

	/deep/ .el-form-item__label {
		text-align: center;
		vertical-align: middle;
		float: none;
		font-size: 18px;
		color: #606266;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/deep/ .el-form-item__content {
		line-height: 40px;
		position: relative;
		font-size: 14px;
		margin-left: 0 !important;
	}
</style>
