<template>
  <div id="passwordDialog" class="password-dialog">
    <div class="password-container">
      <div class="modal-container">
        <div class="wrapper">
          <div class="header-container">
            <span class="title"></span>
            <Button class="close-button" id="passwordCancel"><CloseModal /></Button>
          </div>
          <Lock class="lock-icon" />
          <!-- <Lockup v-show="visible" class="lock-icon" /> -->
          <div class="password-title">{{ $t('passwordDialog.enterPwd') }}</div>
          <div class="input-container">
            <input id="password" :type="visible ? 'text' : 'password'" name="password" :placeholder="$t('passwordDialog.enterPwdPlaceholder')">
            <span class="eye-btn" id="eyeVisible" @click="showEye">
              <EyesVisible v-if="visible" />
              <EyesInvisible v-else />
            </span>
          </div>
          <div class="wrong-password" id="passwordText"></div>
          <span class="set-btn" id="passwordSubmit">{{ $t('ok') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const visible = ref(false)

  const showEye = (val) => {
    if (val.param === true || val.param === false) {
      visible.value = val.param
    } else {
      visible.value = !visible.value
    }
  }

</script>

<style lang="scss">
.password-dialog {
  display: none;
  &.show {
    display: block;
  }
  .password-container {
    .wrong-password {
      align-self: flex-start;
    }
  }
}
.set-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}
</style>
