<template>
  <div class="password-validator-wrap">
    <div class="item">
      <el-icon color="#43CF7C" v-show="v1"><Select /></el-icon>
      <el-icon color="#D43030" v-show="!v1"><CloseBold /></el-icon>
      <el-text :type="v1 ? 'success' : 'danger'">{{ t("passwordValidator.v1", { min: min, max: max }) }}</el-text>
    </div>
    <div class="item" v-if="needCapital">
      <el-icon color="#43CF7C" v-show="v2"><Select /></el-icon>
      <el-icon color="#D43030" v-show="!v2"><CloseBold /></el-icon>
      <el-text :type="v2 ? 'success' : 'danger'">{{ t("passwordValidator.v2") }}</el-text>
    </div>
    <div class="item" v-if="needNumber">
      <el-icon color="#43CF7C" v-show="v3"><Select /></el-icon>
      <el-icon color="#D43030" v-show="!v3"><CloseBold /></el-icon>
      <el-text :type="v3 ? 'success' : 'danger'">{{ t("passwordValidator.v3") }}</el-text>
    </div>
    <div class="item" v-if="needSpechars">
      <el-icon color="#43CF7C" v-show="v4"><Select /></el-icon>
      <el-icon color="#D43030" v-show="!v4"><CloseBold /></el-icon>
      <el-text :type="v4 ? 'success' : 'danger'">{{ t("passwordValidator.v4") }}</el-text>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useLocale } from "element-plus";
import { hasCapital, hasLowercase, hasNumber, hasOther2 } from '@/utils/htfx'

const { t } = useLocale();
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  min: {
    type: Number,
    default: 8,
  },
  max: {
    type: Number,
    default: 15,
  },
  needNumber: {
    type: Boolean,
    default: true,
  },
  needSpechars: {
    type: Boolean,
    default: true,
  },
  needCapital: {
    type: Boolean,
    default: true,
  },
});

function checkV1() {
   return props.modelValue &&
    props.modelValue.length >= props.min &&
    props.modelValue.length <= props.max
}

function checkV2() {
  return props.modelValue &&
  (!props.needCapital || (hasCapital(props.modelValue) && hasLowercase(props.modelValue)))
}

function checkV3() {
  return props.modelValue &&
  (!props.needNumber || hasNumber(props.modelValue))
}

function checkV4() {
  return props.modelValue &&
  (!props.needSpechars || hasOther2(props.modelValue))
}

const v1 = computed(() => {
  return checkV1()
});

const v2 = computed(() => {
  return checkV2()
});

const v3 = computed(() => {
  return checkV3()
});

const v4 = computed(() => {
  return checkV4()
});

const check = () => {
  return checkV1() && checkV2() && checkV3() && checkV4()
};

defineExpose({
  check,
});
</script>

<style lang="scss" scoped>
.password-validator-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;

  .item {
    display: flex;
    align-items: center;
    column-gap: 6px;
    line-height: 28px;
    --el-color-success: #43CF7C;
    --el-color-danger: #D43030;
  }
}
</style>
