<template>
  <div class="password-strength" v-if="password.length > 0">
    <div class="strength-bars">
      <div class="strength-bar" :class="level >= 1 ? barColorClass : ''"></div>
      <div class="strength-bar" :class="level >= 2 ? barColorClass : ''"></div>
      <div class="strength-bar" :class="level >= 3 ? barColorClass : ''"></div>
    </div>
    <span class="strength-label" :class="labelColorClass">{{ levelText }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  password: string;
}>();

/**
 * 计算密码强度等级：
 * 0 = 空 / 过短
 * 1 = 弱：< 8 位或仅单一字符类型
 * 2 = 中：≥ 8 位 + 2 种字符类型
 * 3 = 强：≥ 8 位 + 3 种及以上字符类型
 */
const level = computed(() => {
  const pwd = props.password || "";
  if (pwd.length === 0) return 0;
  if (pwd.length < 8) return 1;

  let types = 0;
  if (/[a-z]/.test(pwd)) types++;
  if (/[A-Z]/.test(pwd)) types++;
  if (/[0-9]/.test(pwd)) types++;
  if (/[^a-zA-Z0-9]/.test(pwd)) types++;

  if (types <= 1) return 1;
  if (types === 2) return 2;
  return 3;
});

const levelText = computed(() => {
  const texts = ["", "弱", "中", "强"];
  return texts[level.value] || "";
});

const barColorClass = computed(() => {
  const classes = ["", "bar-weak", "bar-medium", "bar-strong"];
  return classes[level.value] || "";
});

const labelColorClass = computed(() => {
  const classes = ["", "label-weak", "label-medium", "label-strong"];
  return classes[level.value] || "";
});
</script>

<style scoped>
.password-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.strength-bars {
  display: flex;
  gap: 4px;
  flex: 1;
}

.strength-bar {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--wo-border-light, #e4e7ed);
  transition: background 0.3s ease;
}

.bar-weak {
  background: #f56c6c;
}

.bar-medium {
  background: #e6a23c;
}

.bar-strong {
  background: #67c23a;
}

.strength-label {
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
  text-align: right;
}

.label-weak {
  color: #f56c6c;
}

.label-medium {
  color: #e6a23c;
}

.label-strong {
  color: #67c23a;
}
</style>
