<template>
  <div class="pwd-container">
    <div class="label">Reset Password</div>
    <div class="input-group flex flex-align-center">
      <input
        :type="showPwd ? 'text' : 'password'"
        v-model="formData.password"
        placeholder="Enter your new password"
        class="input-field flex-1"
      />
      <van-icon v-if="showPwd" name="eye-o" @click="showPwd = !showPwd" />
      <van-icon v-else name="closed-eye" @click="showPwd = !showPwd" />
    </div>
    <div class="btn" @click="handleNext">Submit</div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['sucess'])
const showPwd = ref(false)

const formData = ref({
  password: ''
})

const handleNext = () => {
  emit('sucess')
}
</script>
<style lang="less" scoped>
.pwd-container {
  font-family: 'satoshiRegular';
  .label {
    font-size: 4.8rem;
    letter-spacing: 0.01em;
    margin-bottom: 6rem;
  }
  .input-group {
    width: 100%;
    height: 10rem;
    padding: 0 2.2rem 0 5.5rem;
    border: 2px solid #fff;
    border-radius: 7.1rem;
  }
  .input-field {
    background: transparent;
    color: white;
    outline: none;
    border: none;
    font-size: 3.83rem;
    // padding: 0 5.5rem;
    &::placeholder {
      color: rgba(255, 255, 255, 0.6);
      font-size: 3.83rem;
    }
  }
  .btn {
    margin-top: 10.6rem;
    width: 100%;
    height: 10rem;
    background: #000;
    color: white;
    border: none;
    border-radius: 7rem;
    font-size: 4rem;
    margin-bottom: 1.67rem;
    text-align: center;
    line-height: 10rem;
  }
}
</style>
