<template>
    <div>
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
            <el-form-item label="旧密码" prop="old">
                <el-input v-model="formData.old" type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="newPassword" type="password"></el-input>
                密码强度：
                <el-tag :type="strength == '弱' ?  'danger' :  'gray' ">弱</el-tag>
                <el-tag :type="strength == '中' ?  'warning' : 'gray'">中</el-tag>
                <el-tag :type="strength == '强' ?'success' :  'gray' ">强</el-tag>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirm">
                <el-input v-model="formData.confirm" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import formValidator from '../formValidator'

export default {
    created() {
    },
    data() {
        return {
            saving: false,
            formData: {
                old: '',
                newPassword: '',
                confirm: ''
            },
            rules: {
                old: [
                    { required: true, message: '请填写原始密码', trigger: 'blur' },
                ],
                confirm: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                ],
            },
            newPassword: '',
            strengthType: '',
            strength: ''

        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {

            if (this.strengthType != 'warning' && this.strengthType != 'success') {
                this.$message.error('密码必须包含数字与字母混合，无法修改');
            }
            else if (this.newPassword != this.formData.confirm) {
                this.$message.error('新密码不一致');
            } else if (this.strengthType == "danger") {
                this.$message.error("密码强度太弱，安全程度不高！");
            }
            else {
                this.formData.newPassword = this.newPassword;
                var data = JSON.parse(JSON.stringify(this.formData));
                this.$http.post({
                    url: '/userInfo/changePassword',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.$message.success('成功');
                        this.$router.go(-1);
                    } else {
                        this.$message.warning(res.error)
                    }
                });
            }


        },
        pwStrength() {
            //正则表达式
            var is_all_num = /^\d+$/.test(this.newPassword);
            var have_num = /\d/.test(this.newPassword);
            var is_all_abc = /^[a-zA-Z]+$/.test(this.newPassword);
            var have_abc = /[a-zA-Z]/.test(this.newPassword);
            var have_strong = /[^a-zA-Z0-9]/.test(this.newPassword);
            var is_very_strong = this.newPassword.split(/[^a-zA-Z_0-9]/).length > 2;

            //空白
            var tmppwd = this.newPassword.replace(/\s+/g, "");
            if (tmppwd != this.newPassword) {
                this.$message.error('新密码不能含有空白字符');
            }

            /**
             * 弱:
             *  1)全部为数字或字母
             *  2)数字与字母混合且少于8位
             */
            if ((is_all_num || is_all_abc) || (have_num && have_abc && this.newPassword.length < 8)) {
                this.strength = "弱";
                this.strengthType = "danger";
            }
            /**
              * 中:
              *  1)数字与字母混合且大于等于8位
              *  2)数字与字母与其它可打印字符且小于8位
              *  3)两两组合
           */
            if ((have_num && have_abc && this.newPassword.length >= 6) || (have_num && have_abc && have_strong && this.newPassword.length >= 6)
                || ((have_num && have_strong && this.newPassword.length >= 6) || (have_abc && have_strong && this.newPassword.length >= 6))) {
                this.strength = "中";
                this.strengthType = "warning";
            }

            /**
                 * 强:
                 *  1)数字与字母与其它可打印字符且大于等于8位
                 *  2)数字与字母与其它可打印字符(大于2位)且小于8位
                 *  3)两两组合大于等于8位
                 */
            if ((have_num && have_abc && have_strong && this.newPassword.length >= 8)
                || (have_num && have_abc && is_very_strong && this.newPassword.length >= 8)
                || (((have_num && have_strong) || (have_abc && have_strong)) && this.newPassword.length >= 8)) {
                this.strength = "强";
                this.strengthType = "success";
            }
        }
    },
    watch: {
        newPassword: function () {
            this.pwStrength();
        }
    }
}
</script>
<style lang="less" scoped>
</style>
