<template>
    <div class="row  go-form-row flex-div pwd-strength" style="height: 35px;">
        <div class="go-label">密码强度:</div>
        <div
            :class="'go-content padding-l-bs ' + getInputWid()"
            style="height:33px"
        >
            <div class="one-level strength-item">
                <div class="level-label" v-show="level === 'one'">弱</div>
            </div>
            <div class="two-level strength-item">
                <div class="level-label" v-show="level === 'two'">中</div>
            </div>
            <div class="three-level strength-item">
                <div class="level-label" v-show="level === 'three'">强</div>
            </div>
            <div class="four-level strength-item">
                <div class="level-label" v-show="level === 'four'">好</div>
            </div>
        </div>
    </div>
</template>

<script>
    import formMixin from "../../mixins/formMixins";


    //密码强渡控件
    export default {
        data() {
            return {
                level: 'one'
            };
        },
        name: "go-pwd-strength",
        mixins: [formMixin],
        props: {

            width: {
                type: [String, Number],
                default: "big"
            }
        },
        computed: {},
        methods: {
            //返回密码的安全级别
            getLevel(){
                return this.level+"Level";
            },
            //获取密码级别
            getPwdLevel(val) {
                let modes = 0;
                if (val.length < 6) {
                    modes = 0;
                }
                if (/\d/.test(val)) modes++; //数字
                if (/[a-z]/.test(val)) modes++; //小写
                if (/[A-Z]/.test(val)) modes++; //大写
                if (/\W/.test(val)) modes++; //特殊字符
                if (val.length > 12) {
                    modes = 4;
                }
                let level = ["one", "one", "two", "three", "four"];
                return level[modes];
            }
        },
        mounted() {
        },
        watch: {
            value(newVal) {
                this.level = this.getPwdLevel(newVal);
            }
        },
        components: {}
    };
</script>
