<template>
	<div class="replacement">
		<div class="content">
			<div class="title">新账号重置密码</div>
			<el-form :model="resetForm" :rules="resetFormRules" ref="resetForm" status-icon label-width="100px">
				<el-form-item label="旧密码：" prop="oldPaasword">
					<el-input clearable type="password" v-model="resetForm.oldPaasword" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="新密码：" prop="newPassword1">
					<el-input clearable type="password" v-model="resetForm.newPassword1" auto-complete="off"></el-input>
					<PasswordStrength v-model="resetForm.newPassword1" style="padding-top: 10px"></PasswordStrength>
				</el-form-item>
				<el-form-item label="确认密码：" prop="newPaasword2">
					<el-input clearable type="password" v-model="resetForm.newPaasword2" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 100%" type="primary" @click.native.prevent="toAmend">确认修改</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import PasswordStrength from "./PasswordStrength.vue"
import { changePasswordReq } from "./api"
export default {
	components: { PasswordStrength },
	data() {
		var validatePass = (rule, value, callback) => {
			if (!value) {
				callback(new Error("请输入新密码"))
			} else if (value.toString().length < 6 || value.toString().length > 18) {
				callback(new Error("密码长度为6-18位"))
			} else {
				callback()
			}
		}
		var validatePass2 = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请再次输入密码"))
			} else if (value !== this.resetForm.newPassword1) {
				callback(new Error("两次输入密码不一致!"))
			} else {
				callback()
			}
		}

		return {
			resetForm: {
				//传给后台所需要的参数
				newPaasword2: "",
				oldPaasword: "",
				newPassword1: ""
			},
			resetFormRules: {
				oldPaasword: [
					{
						required: true,
						message: "请输入旧密码",
						trigger: ["blur", "change"]
					}
				],
				newPassword1: [
					{
						required: true,
						validator: validatePass,
						trigger: ["blur", "change"]
					}
				],
				newPaasword2: [
					{
						required: true,
						validator: validatePass2,
						trigger: ["blur", "change"]
					}
				]
			}
		}
	},
	methods: {
		toAmend() {
			this.$refs.resetForm.validate(valid => {
				if (valid) {
					changePasswordReq(this.resetForm).then(result => {
						if (result.code === 200) {
							this.$message.success("修改成功,3秒后跳转到登录页！")
							setTimeout(() => {
								this.logout() //调用跳转到登陆页的方法
							}, 3000)
						}
					})
				}
			})
		},
		//这是修改成功后重新返回登陆页的方法，看个人需要自行调整
		async logout() {
			this.$router.push(`/login`)
		}
	}
}
</script>

<style lang="scss" scoped>
.replacement {
	height: 100%;
	padding-top: 100px;
	.content {
		margin: 0 auto;
		width: 450px;
		.title {
			text-align: center;
			font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
			font-weight: 700;
			font-size: 28px;
			line-height: 100px;
		}
	}
}
</style>
