<template>
  <div class="kole-pwd">
    <div class="kole-pwd-field" :class="{ 'is-focus': focused }">
      <input
        ref="input"
        class="kole-pwd-input"
        :type="visible ? 'text' : 'password'"
        :value="modelValue"
        :placeholder="placeholder"
        @input="onInput"
        @focus="focused = true"
        @blur="focused = false"
      />
      <button class="kole-pwd-toggle" type="button" @click="visible = !visible">
        {{ visible ? '隐藏' : '显示' }}
      </button>
    </div>
    <div v-if="showStrength" class="kole-pwd-strength">
      <span
        v-for="(b, i) in 3"
        :key="i"
        class="kole-pwd-bar"
        :class="barClass(i)"
      ></span>
    </div>
    <div class="kole-pwd-tip">{{ tip }}</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  modelValue: { type: String, default: '' },
  placeholder: { type: String, default: '请输入密码' },
  showStrength: { type: Boolean, default: true }
});
const emit = defineEmits(['update:modelValue', 'change']);

const visible = ref(false);
const focused = ref(false);

const level = computed(() => {
  const v = props.modelValue;
  if (!v) return '';
  let s = 0;
  if (v.length >= 8) s++;
  if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;
  if (/\d/.test(v)) s++;
  if (/[^A-Za-z0-9]/.test(v)) s++;
  if (v.length >= 12) s++;
  if (s <= 2) return 'weak';
  if (s <= 3) return 'mid';
  return 'strong';
});

const tip = computed(() => {
  if (level.value === 'weak') return '弱：建议使用字母、数字与符号组合';
  if (level.value === 'mid') return '中：再增加长度或符号更安全';
  if (level.value === 'strong') return '强：密码强度良好';
  return '';
});

function onInput(e) {
  emit('update:modelValue', e.target.value);
  emit('change', e.target.value);
}
function barClass(i) {
  if (!props.showStrength || !level.value) return '';
  const on =
    (level.value === 'weak' && i < 1) ||
    (level.value === 'mid' && i < 2) ||
    (level.value === 'strong' && i < 3);
  return on ? 'on ' + level.value : '';
}
</script>

<style src="./PasswordInput.css"></style>
