<template>
  <div class="password-strength-indicator">
    <!-- 密码强度进度条 -->
    <div class="strength-bar-container">
      <div
        class="strength-bar"
        :class="strengthClass"
        :style="{ width: strengthPercentage + '%' }"
      ></div>
    </div>

    <!-- 强度文本提示 -->
    <div class="strength-text" :class="strengthClass">
      <span v-if="password && password.length > 0">
        {{ $t(`passwordStrength.${strengthLevel}`) }}
      </span>
    </div>

    <!-- 详细的校验项列表 -->
    <div v-if="showDetails && password && password.length > 0" class="validation-checklist">
      <div
        v-for="(rule, key) in validationDetails"
        :key="key"
        class="validation-item"
        :class="{ 'valid': rule.passed, 'invalid': !rule.passed }"
      >
        <i :class="rule.passed ? 'el-icon-circle-check' : 'el-icon-circle-close'"></i>
        <span>{{ $t(rule.message) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { checkPasswordStrength } from '@/utils/passwordValidator'

export default {
  name: 'PasswordStrengthIndicator',
  props: {
    // 要校验的密码
    password: {
      type: String,
      default: ''
    },
    // 是否显示详细的校验项
    showDetails: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    // 密码强度分析结果
    strengthAnalysis() {
      if (!this.password) {
        return {
          score: 0,
          level: 'none',
          validation: {
            valid: false,
            errors: [],
            details: {
              length: false,
              hasLowercase: false,
              hasUppercase: false,
              hasNumber: false,
              hasSpecialChar: false,
              noChinese: false
            }
          }
        }
      }
      return checkPasswordStrength(this.password)
    },

    // 强度等级
    strengthLevel() {
      return this.strengthAnalysis.level
    },

    // 强度百分比
    strengthPercentage() {
      return this.strengthAnalysis.score
    },

    // 强度等级对应的样式类
    strengthClass() {
      return `strength-${this.strengthLevel}`
    },

    // 校验详情(用于显示✓和✗)
    validationDetails() {
      const details = this.strengthAnalysis.validation.details
      return {
        length: {
          passed: details.length,
          message: 'passwordRules.length'
        },
        noChinese: {
          passed: details.noChinese,
          message: 'passwordRules.noChinese'
        },
        lowercase: {
          passed: details.hasLowercase,
          message: 'passwordRules.lowercase'
        },
        uppercase: {
          passed: details.hasUppercase,
          message: 'passwordRules.uppercase'
        },
        number: {
          passed: details.hasNumber,
          message: 'passwordRules.number'
        },
        specialChar: {
          passed: details.hasSpecialChar,
          message: 'passwordRules.specialChar'
        }
      }
    }
  },
  watch: {
    // 密码变化时通知父组件校验结果
    strengthAnalysis: {
      handler(newVal) {
        this.$emit('strength-change', newVal)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
.password-strength-indicator {
  margin-top: 8px;
}

// 强度进度条容器
.strength-bar-container {
  width: 100%;
  height: 6px;
  background-color: #e4e7ed;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

// 强度进度条
.strength-bar {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 3px;

  &.strength-weak {
    background-color: #f56c6c; // 红色 - 弱
  }

  &.strength-medium {
    background-color: #e6a23c; // 橙色 - 中等
  }

  &.strength-strong {
    background-color: #67c23a; // 绿色 - 强
  }

  &.strength-none {
    background-color: #e4e7ed; // 灰色 - 无
  }
}

// 强度文本
.strength-text {
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 500;

  &.strength-weak {
    color: #f56c6c;
  }

  &.strength-medium {
    color: #e6a23c;
  }

  &.strength-strong {
    color: #67c23a;
  }

  &.strength-none {
    color: #909399;
  }
}

// 校验项列表
.validation-checklist {
  margin-top: 10px;
}

.validation-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
  transition: all 0.2s ease;

  i {
    margin-right: 6px;
    font-size: 14px;
  }

  &.valid {
    color: #67c23a;

    i {
      color: #67c23a;
    }
  }

  &.invalid {
    color: #909399;

    i {
      color: #dcdfe6;
    }
  }
}
</style>
