<template>
    <div>
        <div class="center">
            <div class="box">
                <el-form ref="loginform" :model="loginForm" :rules="loginRules" label-width="140px" class="loginClass">
                    <el-form-item label="输入密码" prop="pwd">
                        <el-input
                            v-model.trim="loginForm.pwd"
                            placeholder="请输入密码"
                            show-password
                            auto-complete="new-password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="surePwd">
                        <el-input
                            v-model.trim="loginForm.surePwd"
                            placeholder="请输入密码"
                            show-password
                            auto-complete="new-password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="foot-button">
                            <el-button :loading="loading" type="primary" @click.native.prevent="handleNext">
                                下一步
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
// import md5 from "md5";
// import sha1 from "js-sha1";
    export default {
        data() {
            var validatePass = async (rules, value, callback) => {
                const reg =
                    /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*.\/,;'])[\da-zA-Z~!@#$%^&*.\/,;']{8,16}$/;
                if (reg.test(value)) {
                    callback();
                } else {
                    callback(new Error("必须包含数字、英文字母、特殊符号且8-16位"));
                }
            };
            var validatesurePass = (rules, value, callback) => {
                if (value === this.loginForm.pwd) {
                    callback();
                } else {
                    callback(new Error("请保持两次输入一致"));
                }
            };
            return {
                loading: false,
                loginForm:{
                    pwd: "",
                    surePwd: "",
                },
                loginRules: {
                    pwd: [
                        {
                            required: true,
                            message: "请输入密码",
                            trigger: "blur"
                        },
                        {
                            validator: validatePass,
                            trigger: "blur"
                        }
                    ],
                    surePwd: [
                        {
                            required: true,
                            message: "请确认密码",
                            trigger: "blur"
                        },
                        {
                            validator: validatesurePass,
                            trigger: "blur"
                        }
                    ]
                },
                newpass: "",
                surenewpass: "",
            }
        },
        methods: {
            // 下一步
            handleNext(){
                // if(this.loginForm.newPwd){
                //     this.newpass = this.loginForm.newPwd
                //     this.loginForm.newPwd = md5(sha1(this.loginForm.newPwd).toUpperCase()).toUpperCase();
                // }
                // if (this.loginForm.surePwd) {
                //     this.surenewpass = this.loginForm.surePwd
                //     this.loginForm.surePwd = md5(sha1(this.loginForm.surePwd).toUpperCase()).toUpperCase();
                // }
                this.$refs.loginform.validate((valid) => {
                    if(valid){
                        this.loading = true;
                        this.$store.dispatch('user/logout')
                        this.$router.push('/login');
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
.center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 40%;
    height: 40%;
    // background-color: antiquewhite;
}
.box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 80%;
}
::v-deep .loginClass .el-form-item{
    margin-bottom: 40px;
}
::v-deep .loginClass .el-form-item:last-of-type {
    margin-bottom: 0;
}
::v-deep .loginClass .el-form-item__label{
    font-size: 20px;
    line-height: 40px;
}
::v-deep .loginClass .el-button{
    font-size: 16px;
}
::v-deep .loginClass .el-input__inner{
    font-size: 16px;
    height: 40px;
    line-height: 40px;
}
</style>