<template>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="400px">
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            label-position="top"
            @submit.native.prevent
            @keyup.enter.native="handleChangePass('ruleForm')"
        >
            <el-form-item label="原密码" prop="pass">
                <el-input type="password" placeholder="请输入原密码" v-model="ruleForm.pass" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
                <el-input type="password" placeholder="请输入新密码" v-model="ruleForm.newPass" show-password autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" placeholder="确认密码" v-model="ruleForm.checkPass" show-password autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleChangePass('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import frameworkApi from "@/api/framework";
import { queryUsers, updateUsersPass } from "@/api/system/persagy-sso-server";

export default {
    data() {
        var validatePass = async (rule, value, callback) => {
            if (!value) {
                return callback(new Error("原密码不能为空"));
            }
            const params = {
                filters: [
                    { ops: "EQ", obj: "id", arg: this.userId },
                    { ops: "EQ", obj: "password", arg: value },
                ],
            };
            const res = await queryUsers(params);
            if (res.code === "Success" && res.data && res.data.length) {
                callback();
            } else {
                callback(new Error("密码错误"));
            }
        };
        var validatePass1 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } 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.newPass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            ruleForm: {
                pass: "",
                newPass: "",
                checkPass: "",
            },
            rules: {
                pass: [{ validator: validatePass, required: true, trigger: "blur" }],
                newPass: [{ validator: validatePass1, required: true, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, required: true, trigger: "blur" }],
            },
        };
    },
    computed: {
        ...mapGetters("layout", ["userId"]),
    },
    methods: {
        /**
         * 打开弹窗
         */
        handleOpenDialog() {
            this.dialogVisible = true;
        },
        /**
         * 修改密码
         */
        handleChangePass(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const params = {
                        data: {
                            content: {
                                id: this.userId,
                                password: this.ruleForm.newPass,
                            },
                        },
                    };
                    const res = await updateUsersPass(params);
                    if (res.code === "Success") {
                        this.$message.success("密码修改成功，请重新登录！");
                        this.dialogVisible = false;
                        frameworkApi.toLogout();
                    } else {
                        this.$message.error(`密码修改失败，失败原因：${res.message}`);
                    }
                } else {
                    return false;
                }
            });
        },
    },
    watch: {
        dialogVisible: {
            handler(val, oldVal) {
                if (!val && this.$refs.ruleForm) {
                    this.$refs.ruleForm.resetFields();
                }
            },
            immediate: true,
        },
    },
};
</script>

<style>
</style>