<template>
    <div class="charge-box">
        <div class="routename">{{$route.meta.title}}</div>
        <div class="updatebox">
            <div class="frompwd">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px"
                    class="demo-ruleForm">
                    <el-form-item label="当前密码：" prop="currentPass">
                        <el-input type="password" v-model="ruleForm.currentPass" placeholder="请输入当前密码"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="修改密码：" prop="newPass">
                        <el-input type="password" v-model="ruleForm.newPass" placeholder="请输入修改密码" autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="确认修改密码：" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" placeholder="请输入确认修改密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePwd('ruleForm')" class="savefrom save">确定</el-button>
                        <el-button @click="resetForm('ruleForm')" class="reset exit">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
  
<script>
import './permission.scss';
import { updatepwd } from "@/api/user";
export default {
    name: "UpdatePassword",
    components: {},
    data() {
        var checkcurrentPass = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('当前密码不能为空'));
            }
            setTimeout(() => {
                if (value.length < 6) {
                    callback(new Error('密码不少于6位数'));
                }
                callback();
            });
        };
        var validatenewPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else if (value.length < 6) {
                callback(new Error('密码不应少于6位数'));
            }
            else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatecheckPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入确认密码'));
            } else if (value !== this.ruleForm.newPass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                currentPass: '',
                newPass: '',
                checkPass: ''
            },
            rules: {
                currentPass: [
                    { validator: checkcurrentPass, trigger: 'blur' }
                ],
                newPass: [
                    { validator: validatenewPass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatecheckPass, trigger: 'blur' }
                ]
            },
            loading:false
        };
    },
    mounted(){
        // console.log(this.$store.getters.roles)
    },
    methods: {
        updatePwd(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const params={
                        id:localStorage.getItem('userId')*1,
                        userAccount:this.$store.getters.name,
                        userPwd:this.ruleForm.currentPass,
                        newPwd:this.ruleForm.newPass
                    }
                    updatepwd(params).then(res => {
                        if(res.code === 0){
                            this.$message({
                                message: '修改成功,3秒之后将重新登录!',
                                type: 'success',
                                duration: 3 * 1000,
                            });
                            this.loading = true;
                            setTimeout(() =>{
                                this.$store.dispatch('user/logout').then(() => {
                                    this.$router.push({
                                        path: "/login",
                                    });
                                })
                            },3000)
                        }else{
                            return this.$message.error(res.msg)
                        }
                    })
                }else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
};
</script>
<style lang="scss" scoped>
.routename {
    padding: 25px 10px;
    font-size: 20px;
    color: white;
    font-weight: 600;
}

.updatebox {
    padding: 10px 35px;
    width: 100%;
    background-color: #111827;
    border: #192337 solid 1px;
    min-height: 488px;

    .frompwd {
        width: 520px;
        margin: 0 auto;
        padding-top: 80px;

        .savefrom {
            
            font-weight: 600;
            width: 80px;
            height: 38px;
        }

        .reset {
            height: 36px;
            box-sizing: content-box;
            padding: 0px 5px;
        }
    }
}
</style>