<template>
	<el-card shadow="never" header="修改密码">
		<el-alert title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。" type="error" show-icon style="margin-bottom: 15px;"/>
		<el-form ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:20px;width: 518px;">
			<el-form-item label="当前密码" prop="old_pwd">
				<el-input v-model="form.old_pwd" type="password" show-password placeholder="请输入当前密码"></el-input>
			</el-form-item>
			<el-form-item label="新密码" prop="new_pwd">
				<el-popover
					class="popoverPassword"
					placement="right"
					title=""
					:width="360"
					trigger="click"
					content=""
				>
					<template #reference>
						<el-input v-model="form.new_pwd" type="password" show-password placeholder="请输入新密码"></el-input>
					</template>
					<template #default>
						<div class="passwordView">
							<div class="title">
								<div class="name">安全程度等级:</div>
								<div class="strength"><sc-password-strength v-model="form.new_pwd"></sc-password-strength></div>
							</div>
							<div class="text"><div class="icon"></div>6-20位字符</div>
							<div class="text"><div class="icon"></div>只能包含大小写字母、数字和标点符号（除空格）</div>
						</div>
					</template>
				</el-popover>
			</el-form-item>
			<el-form-item label="确认新密码" prop="conf_pwd">
				<el-input v-model="form.conf_pwd" type="password" show-password placeholder="请再次输入新密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">保存密码</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import scPasswordStrength from '@/components/scPasswordStrength'

	export default {
		components: {
			scPasswordStrength
		},
		data() {
			return {
				form: {
					old_pwd: "",
					new_pwd: "",
					conf_pwd: ""
				},
				rules: {
					old_pwd: [
						{ required: true, message: '请输入当前密码'}
					],
					new_pwd: [
						{ required: true, message: '请输入新密码'}
					],
					conf_pwd: [
						{ required: true, message: '请再次输入新密码'},
						{validator: (rule, value, callback) => {
							if (value !== this.form.new_pwd) {
								callback(new Error('两次输入密码不一致'));
							}else{
								callback();
							}
						}}
					]
				}
			}
		},
		methods: {
			save(){
				this.$refs.form.validate(async valid => {
					if (valid) {
						const res = await this.$API.user.editPass.post(this.form);
						if(res.code == 200){
							this.$alert("密码修改成功，是否跳转至登录页使用新密码登录", "修改成功", {
								type: 'success',
								center: true
							}).then(() => {
								this.$router.replace({
									path: '/login'
								})
							}).catch(() => {})
						}
					} else {
						return false
					}
				})
			}
		}
	}
</script>

<style>
</style>
