<template>
	<div class="changePwds">
		<MiniTitle>
			<div slot="mini" class="miniTit">
			<img src="../../images/return.png" height="18" width="18" class="back" @click="back">
			个人中心——修改密码
			</div>
		</MiniTitle>
	<div class="changePwd">
		<h4>账户安全</h4>
		<div class="contentPwd">
			<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
				<el-form-item label="旧密码" prop="pass">
					<el-input type="password" ref="pass" v-model="ruleForm2.pass" autocomplete="off" clearable></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="checkPass">
					<el-input type="password" ref="checkPass" v-model="ruleForm2.checkPass" autocomplete="off" clearable></el-input>
				</el-form-item>
				<el-form-item label="再次输入密码" prop="newPass">
					<el-input type="password" ref="newPass" v-model="ruleForm2.newPass" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<button class="subBtn" @click="submitForm('ruleForm2')">确定</button>
					<!-- <button class="subBtn2" @click="resetForm('ruleForm2')">重置</button> -->
				</el-form-item>
			</el-form>
		</div>
	</div>
	</div>
</template>

<script>
	import api from '../../api/admin.js';
	import MiniTitle from '../common/MiniTile.vue';
    import md5 from 'js-md5';
	
	export default {
		components: {
			MiniTitle
		},
		data() {
			var validatePass = (rule, value, callback) => {
				if (value.trim() == '') {
					callback(new Error('请输入旧密码'));
					this.ruleForm2.pass = "";
				} else if (value.length < 6) {
					callback(new Error('密码长度不少于6位'));
				} else if (value.length > 16) {
                  callback(new Error('密码长度不大于16位'));
                } else {
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				const numreg = /^(?![0-9]+$)(?![a-zA-Z]+$)/;
				if (value.trim() == '') {
					callback(new Error('请输入新密码'));
					this.ruleForm2.checkPass = "";
				} else if (value.length < 6) {
					callback(new Error('密码长度不少于6位'));
				} else if (value.length > 16) {
                  callback(new Error('密码长度不大于16位'));
                } else if (value == this.ruleForm2.pass) {
					callback(new Error('新旧密码不能相同!'));
				} else if (!numreg.test(value)) {
				 	callback(new Error('密码不能为纯数字或纯英文'));
				} else {
					callback();
				}
			};
			var validatePass3 = (rule, value, callback) => {
				if (value === '' || value === ' ') {
					callback(new Error('请再次输入新密码'));
					this.ruleForm2.newPass = "";
				} else if (value !== this.ruleForm2.checkPass) {
					callback(new Error('两次输入密码不一致!'));
					console.log(this.ruleForm2.checkPass)
				} else {
					callback();
				}
			};
			return {
				ruleForm2: {
					pass: '',
					checkPass: '',
					newPass: ''
				},
				rules2: {
					pass: [{
						required: true,
						validator: validatePass,
						trigger: ['blur', 'change']
					}],
					checkPass: [{
						required: true,
						validator: validatePass2,
						trigger: ['blur', 'change']
					}],
					newPass: [{
						required: true,
						validator: validatePass3,
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		computed: {

		},
		methods: {
			  back(){
				this.$router.go(-1);
			  },
			submitForm(formName) {
				const params = {
					"password": md5(this.ruleForm2.pass), //req
					"modifyPassword": md5(this.ruleForm2.checkPass), //req
				};
				this.$refs[formName].validate((valid) => {
					if (valid) {
						api.midifyPassword(params).then((res) => {
							if (res.data.code == '0') {
								this.$message({
									showClose: true,
									message: '密码修改成功!',
									type: 'success',
									duration: 1000
								});
                              	this.$router.push({path: '/'})
							}else{
								this.$message({
									showClose: true,
									message: res.data.msg,
									type: 'error'
								});
							}
						}).catch((error) => {
							console.log(error)
						});
					} else {
						console.log('error');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style lang="less">

	.back{
		vertical-align: middle;
		cursor: pointer;
	}
	.changePwd {
		margin-left: 20px !important;
		background-color: #fff;
		margin-right: 20px !important;
		margin-top: 20px !important;
		font-size: 12px !important;

		h4 {
			font-size: 14px;
			padding-top: 20px;
			margin-left: 30px;
			margin-bottom: 35px;
		}

		.contentPwd {
			width: 300px;
			padding-bottom: 30px;
		}

		.el-input__inner {
			height: 35px;
		}

		.el-form-item__label {
			font-size: 12px;
		}
		.subBtn{
			width: 80px;
			height: 30px;
			background: #409eff;
			font-size: 12px;
			color: #fff;
			border-radius: 3px;
			border: 0;
			outline: none;
			cursor: pointer;
		}
		.subBtn2{
			width: 80px;
			height: 30px;
			border: 1px solid #ccc;
			background: #fff;
			color: #606266;
			font-size: 12px;
			border-radius: 3px;
			outline: none;
			cursor: pointer;
			margin-left: 20px;
		}
	}
	.changePwds{
		.miniTit{
			font-size: 14px;
			font-weight: bold;
			margin-left: 20px;
		}
	}
</style>
