<template>
    <main>
        <section class="layout-box">
            <div class="center-title clearfix">
                <h3>通过登录密码进行校验</h3>
                <a href="javascript:;" class="back-btn" @click="goBack">返回</a>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="oldPass">
                    <el-input
                        type="password"
                        v-model.trim="ruleForm.oldPass"
                        autocomplete="off"
                        placeholder="请输入登录密码"
                        v-if="showOldPassword"
                        maxlength="20"
                    ></el-input>
                    <el-input
                        type="text"
                        v-model.trim="ruleForm.oldPass"
                        autocomplete="off"
                        placeholder="请输入登录密码"
                        v-else
                        maxlength="20"
                    ></el-input>
                    <div
                        :class="showOldPassword ? 'show-password' : 'hide-password'"
                        @click="toggleshowOldPassword"
                    ></div>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input
                        type="password"
                        v-model.trim="ruleForm.pass"
                        autocomplete="off"
                        placeholder="请输入新登录密码"
                        v-if="showPassword"
                        maxlength="20"
                    ></el-input>
                    <el-input
                        type="text"
                        v-model.trim="ruleForm.pass"
                        autocomplete="off"
                        placeholder="请输入新登录密码"
                        v-else
                        maxlength="20"
                    ></el-input>
                    <div
                        :class="showPassword ? 'show-password' : 'hide-password'"
                        @click="toggleShowPassword"
                    ></div>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input
                        type="password"
                        v-model.trim="ruleForm.checkPass"
                        autocomplete="off"
                        placeholder="请再次确认新登录密码"
                        v-if="showCheckPassword"
                        maxlength="20"
                    ></el-input>
                    <el-input
                        type="text"
                        v-model.trim="ruleForm.checkPass"
                        autocomplete="off"
                        placeholder="请再次确认新登录密码"
                        v-else
                        maxlength="20"
                    ></el-input>
                    <div
                        :class="showCheckPassword ? 'show-password' : 'hide-password'"
                        @click="toggleShowCheckPassword"
                    ></div>
                </el-form-item>
                <el-form-item class="btn-reg">
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm')"
                        :loading="submitLoading"
                    >确定</el-button>
                </el-form-item>
            </el-form>
        </section>
    </main>
</template>

<script>
import { mapState } from "vuex";
import { api_changePwd } from "api/center.js";
import utils from "utils/utils.js";
export default {
    name: "setLoginPass",
    computed: {
        ...mapState(["userInfo"])
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        toggleshowOldPassword() {
            this.showOldPassword = !this.showOldPassword;
        },
        toggleShowPassword() {
            this.showPassword = !this.showPassword;
        },
        toggleShowCheckPassword() {
            this.showCheckPassword = !this.showCheckPassword;
        },
        submitForm(formName) {
            this.submitLoading = true;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.ruleForm.oldPass === this.ruleForm.pass) {
                        this.$message.error("新密码与原密码相同！");
                        this.submitLoading = false;
                        return false;
                    }
                    let changePwdData = {
                        data: {
                            oldPwd: this.ruleForm.oldPass,
                            newPwd: this.ruleForm.pass
                        }
                    };
                    api_changePwd(changePwdData).then(res => {
                        if (res.success) {
                            this.$message.success("密码修改成功，请重新登录！");
                            utils.delCookie("token");
                            localStorage.removeItem("initVuex");
                            this.$router.push({ path: "/login" });
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.submitLoading = false;
                    });
                } else {
                    this.submitLoading = false;

                    return false;
                }
            });
        }
    },
    data() {
        var validateOldPass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (!utils.isvalidPass(value)) {
                callback(
                    new Error(
                        "密码位数最少8位且必须含有数字、小写字母、大写字母"
                    )
                );
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (!utils.isvalidPass(value)) {
                callback(
                    new Error(
                        "密码位数最少8位且必须含有数字、小写字母、大写字母"
                    )
                );
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };

        return {
            ruleForm: {
                oldPass: "",
                pass: "",
                checkPass: ""
            },
            rules: {
                oldPass: [{ validator: validateOldPass, trigger: "blur" }],
                pass: [{ validator: validatePass, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }]
            },
            showOldPassword: true,
            showPassword: true,
            showCheckPassword: true,
            submitLoading: false
        };
    },
    created() {}
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.el-form {
    width: 330px;
    margin: 60px;
    .el-button {
        width: 330px;
    }
}
.layout-box {
    overflow: hidden;
    min-height: calc(100vh - 184px);
    background: #fff;
}
.center-title {
    position: relative;
}
.show-password {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -2px;
    width: 24px;
    height: 12px;
    background: url(~assets/images/icon-close-eye.png) no-repeat;
    cursor: pointer;
}
.hide-password {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -6px;
    width: 24px;
    height: 12px;
    background: url(~assets/images/icon-open-eye.png) no-repeat;
    cursor: pointer;
}
.back-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding-left: 22px;
    font-size: 14px;
    background: url(~assets/images/icon-center-back.png) left center no-repeat;
    color: #3d86e9;
}
</style>
