<template>
    <el-dialog :title="modalTitle"
      :visible.sync="showDialog"
      width="500px"
      :close-on-click-modal="false"
      :append-to-body="true"
      :show-close="false"
    >
        <el-form class="modifyPw" ref="form" :model="formData" :rules="rules">
            <el-form-item :label="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_oldpw')"
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    :placeholder="$t('hivuiMain_modifypw_newpw_ph')"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_newpw2_ph')"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
import md5 from "js-md5";
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2')));
            } else if (value !== this.formData.newPw) {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg')));
            } else {
                callback();
            }
        };
        return {
            modalTitle:this.$t('hivuiMain_modifypw_title'),
            formLabelWidth:"140px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }],
                newPw: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" },
                    { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:this.$t('hivuiMain_modifypw_weak'),
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:this.$t('hivuiMain_modifypw_middle'),
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:this.$t('hivuiMain_modifypw_strong'),
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            let me=this;
            this.$refs.form.validate((valid) => {
                if(valid){
                    this.dialogLoading=true;
                    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:me.$t('hivuiMain_modifypw_success')
                        });
                        setTimeout(()=>{
                            if(window.modifyPwAfterSubmit){//自定义确定事件
                                window.modifyPwAfterSubmit();
                            }else{
                                this.$store.dispatch("user/logout").then(()=>{
                                    location=window.HIVUI_SETTING.loginUrl;
                                });
                            }
                        },1500);
                    }).catch(err=>{
                        this.dialogLoading=false;
                    });
                }else{

                }
            });
        },
        cancel(){
            if(window.modifyPwAfterCancel){//自定义关闭事件
                window.modifyPwAfterCancel();
            }else{
                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>
<style lang="less" scoped>
    .modifyPw{
        /deep/.el-dialog__body{
            word-break: break-word;
        }
    }
    
</style>