<template>
	<div class="pwStrength" id="container">
		<el-row>
			<el-col :span="8">
				<el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat"></el-progress>
			</el-col>
			<el-col :span="8">
				<el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat"></el-progress>
			</el-col>
			<el-col :span="8">
				<el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat"></el-progress>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		name: "PasswordStrength",
		model: {
			event: 'change',
			prop: 'password'
		},
		props: {
			//密码
			password: {
				type: [String,Boolean,Number,Object],
				required: true,
				default: "",
			},
			minPw:{
				type: [String,Boolean,Number,Object],
				default: 6,
			}
		},
		watch:{
			password(newValue){
				const mode = this.checkPasswordStrength(newValue);
				//逻辑处理
				switch (mode) {
				//初始化状态
					case 0:
						this.content = '';
						this.onePercentage = 0;
						this.twoPercentage = 0;
						this.ThreePercentage = 0;
						break;
					case 1:
						this.content = this.$t('hivuiLogin_pw_weak');
						this.onePercentage = 100;
						this.twoPercentage = 0;
						this.ThreePercentage = 0;
						break;
					case 2:
						this.content = this.$t('hivuiLogin_pw_middle');
						this.onePercentage = 100;
						this.twoPercentage = 100;
						this.ThreePercentage = 0;
						break;
					case 3:
						this.content = this.$t('hivuiLogin_pw_middle');
						this.onePercentage = 100;
						this.twoPercentage = 100;
						this.ThreePercentage = 0;
						break;
					default:
						this.content = this.$t('hivuiLogin_pw_strong');
						this.onePercentage = 100;
						this.twoPercentage = 100;
						this.ThreePercentage = 100;
						break;
				}
			}
		},
		data(){
			return{
				content:"",
				onePercentage:0,
				twoPercentage:0,
				ThreePercentage:0,
				oneCustomColors: [
					{color: '#7ecef4', percentage: 100}
				],
				twoCustomColors: [
					{color: '#fbae65', percentage: 100}
				],
				ThreeCustomColors: [
					{color: '#ff7665', percentage: 100}
				]
			}
		},
		methods:{
			oneFormat() {
				return "";
			},
			twoFormat() {
				return "";
			},
			ThreeFormat() {
				return "";
			},
			//密码强度验证
			checkPasswordStrength(value) {
				let mode = 0;
				//正则表达式验证符合要求的
				if (value.length < this.minPw) return mode;
				if (/\d/.test(value)) mode++; //数字
				if (/[a-z]/.test(value)) mode++; //小写
				if (/[A-Z]/.test(value)) mode++; //大写
				if (/\W/.test(value)) mode++; //特殊字符
				return mode;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px2vw($px) {
		@return ($px / 1920) * 100vw;
	}
	.pwStrength{
		::v-deep.el-progress__text {
			display: none;
		}
		::v-deep.el-progress-bar {
			padding: 0 px2vw(5);
			margin: 0px;
		}
		::v-deep.el-progress-bar__outer{
			height:px2vw(10);
		}
	}
	
</style>