<template>
  <div class="g-xs eye" :class="{ 'eye--open': isViewPassword }" @click="onClick"></div>
</template>

<script lang="ts" setup>
  const isViewPassword = ref(false)
  const onClick = () => {
    isViewPassword.value = !isViewPassword.value
    emit('onIsViewChange', isViewPassword.value)
  }
  const emit = defineEmits(['onIsViewChange'])
</script>

<style lang="less" scoped>
  .eye {
    width: 24px;
    height: 24px;
    background: url(../../assets/icon/eye.png);
    background-repeat: no-repeat;
    background-size: contain;
    &--open {
      background: url(../../assets/icon/eye-open.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
</style>
