<template>
  <div>
    <el-form-item :prop="prop" :rules="rules" :label="label">
      <el-popover :placement="placement" :disabled="disabled" width="350" trigger="focus">
        <el-progress :percentage="percentage" :stroke-width="10" :status="status"></el-progress>
        <br/>
        <i v-if="flag" :class="currentValue && currentValue.length >= minL && currentValue.length <= maxL ? 'el-icon-success' : 'el-icon-close'"></i>
        <i v-else  class="el-icon-warning-outline"></i>
        <span>{{$t('common.pwdRule1').format({minL: minL, maxL: maxL})}}</span>
        <br/>
        <i v-if="flag"  class="el-icon-success"></i>
        <i v-else  class="el-icon-warning-outline"></i>
        <span>{{$t('common.pwdRule2')}}</span>
        <br/>
        <i v-if="flag"  :class="count >= 3 ? 'el-icon-success' : 'el-icon-close'"></i>
        <i v-else  class="el-icon-warning-outline"></i>
        <span>{{$t('common.pwdRule3')}}</span>
        <el-input :maxlength="maxL" slot="reference" onpaste="return false" oncopy="return false" :disabled="disabled" :clearable="clearable" type="password" :placeholder="placeholder" v-model="currentValue">
        </el-input>
      </el-popover>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      tyep: String,
      default: null
    },
    // prop字段
    prop: {
      type: String
    },
    // 密码最大长度
    maxL: {
      type: Number,
      default () {
        return 15
      }
    },
    // 密码最小长度
    minL: {
      type: Number,
      default () {
        return 8
      }
    },
    // 自定义的验证规则，会和默认规则同时生效
    rule: {
      type: Array,
      default () {
        return []
      }
    },
    // 密码组件的标签文本
    label: {
      type: String,
      default: '密码'
    },
    // 密码规则弹出框出现位置
    placement: {
      type: String,
      default: 'top'
    },
    // 密码组件的站位文本
    placeholder: {
      type: String,
      default: '请输入密码'
    },
    // 内容是否可清除
    clearable: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      percentage: 0,
      count: null,
      flag: false,
      checkPwd: null
    }
  },
  computed: {
    status () {
      if (this.percentage === 33) {
        return 'exception'
      } else if (this.percentage === 66) {
        return 'warning'
      } else if (this.percentage === 100) {
        return 'success'
      } else {
        return null
      }
    },
    rules () {
      return [{ validator: this.validatePwd, trigger: 'change' }, { required: true, message: this.$i18n.messages[this.$i18n.locale].common['enterPwd'], trigger: 'blur' }, ...this.rule]
    },
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    checkStrong (val) {
      let modes = 0
      // 正则表达式验证符合要求的
      if (!val || val.length < 1) return modes
      if (/\d/.test(val)) {
        modes++ // 数字
      }
      if (/[a-z]/.test(val)) {
        modes++ // 小写
      }
      if (/[A-Z]/.test(val)) {
        modes++ // 大写
      } // 大写
      if (/\W/.test(val)) {
        modes++ // 特殊字符
      }
      return modes
    },
    validatePwd (rule, value, callback) {
      let $this = this
      this.count = this.checkStrong($this.currentValue)
      switch (this.count) {
        case 1:
          this.percentage = 33
          break
        case 2:
          this.percentage = 66
          break
        case 3:
          this.percentage = $this.currentValue.length >= this.minL && $this.currentValue.length <= this.maxL ? 100 : 66
          break
        case 4:
          this.percentage = $this.currentValue.length >= this.minL && $this.currentValue.length <= this.maxL ? 100 : 66
          break
        case 0:
          this.percentage = 0
          break
      }
      if ($this.currentValue === '' || $this.currentValue === null) {
        this.flag = false
      } else {
        this.flag = true
      }
      if (this.percentage === 100) {
        callback()
      } else {
        callback(new Error('   '))
      }
    }
  }
}
</script>
<style scoped>
  .el-icon-success {
    color: #048D07;
    margin-right:10px;
  }
  .el-icon-close {
    color: red;
    margin-right:10px;
  }
  .el-icon-success {
    color: #048D07;
    margin-right:10px
  }
  .el-icon-warning-outline {
    margin-right:10px
  }
</style>
