<template>
    <el-dialog :title="modalTitle"
      :visible.sync="showDialog"
      width="500px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :show-close="false"
    >
        <el-form ref="form" :model="formData" :rules="rules">
            <el-form-item label="旧密码:" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    placeholder="请输入旧密码"
                ></el-input>
            </el-form-item>
            <el-form-item label="新密码:" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    placeholder="请输入4-25个数字、字母或符号组合"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item label="确认新密码:" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    placeholder="再次确认新密码"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">取 消</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
import md5 from "md5";
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.newPw) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            modalTitle:"修改密码",
            formLabelWidth:"100px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
                newPw: [
                    { required: true, message: "请输入新密码", trigger: "blur" },
                    { min:4,max:25, message: "请输入4-25个数字、字母或符号组合", trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: "请再次输入新密码", trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:'弱',
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:'中',
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:'强',
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            this.$refs.form.validate((valid) => {
                if(valid){
                    modifyPassword({
                        oldPwd:md5(this.formData.oldPw),
                        newPwd:md5(this.formData.newPw),
                    }).then(res=>{
                        this.$store.dispatch("user/showPwDialog",false);
                        this.dialogLoading=false;
                        this.formData={
                            oldPw:'',
                            newPw:'',
                            newPw2:'',
                        };
                        this.$message({
                            type:"success",
                            message:"修改成功！请重新登录"
                        });
                        setTimeout(()=>{
                            this.$store.dispatch("user/logout").then(()=>{
                                location=window.HIVUI_SETTING.loginUrl;
                            });
                        },1500);
                    });
                }else{

                }
            });
        },
        cancel(){
            this.$store.dispatch("user/showPwDialog",false);
            this.dialogLoading=false;
            this.formData={
                oldPw:'',
                newPw:'',
                newPw2:'',
            };
        },
        onChange(val){
            var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
			var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
            var enoughRegex = new RegExp("(?=.{4,}).*", "g"); 
            if(strongRegex.test(val)){
                this.currPwStrength=this.pwStrength[2];
            }else if(mediumRegex.test(val)){
                this.currPwStrength=this.pwStrength[1];
            }else if(enoughRegex.test(val)){
                this.currPwStrength=this.pwStrength[0];
            }else{
                this.currPwStrength={};
            }
        },
        format(){
            return this.currPwStrength.desc;
        },
        pwStrengthStyle(){
            return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})`
        },
    }
}
</script>