<script setup lang="ts">
import { loginData } from "@/store/store.ts";
import { Lock, User } from "@element-plus/icons-vue";
defineProps<{
  showReInput?: boolean;
}>();
const clearLoginData = () => {
  loginData.username = "";
  loginData.password = "";
  loginData.repeatPass = "";
};
</script>

<template>
  <div class="input-div">
    <el-input
      v-model="loginData.username"
      placeholder="输入用户名"
      size="large"
      clearable
      autofocus
      class="input"
      @clear="clearLoginData"
      ><template #prefix>
        <el-icon><User /></el-icon></template
    ></el-input>
    <el-input
      v-model="loginData.password"
      placeholder="输入密码"
      size="large"
      type="password"
      clearable
      show-password
      class="input"
      ><template #prefix>
        <el-icon><Lock /></el-icon> </template
    ></el-input>
    <el-input
      v-if="showReInput"
      v-model="loginData.repeatPass"
      placeholder="重复输入密码"
      size="large"
      type="password"
      clearable
      show-password
      class="input"
      ><template #prefix>
        <el-icon><Lock /></el-icon> </template
    ></el-input>
  </div>
</template>

<style scoped>
.input-div {
  position: relative;
  text-align: center;
}
.input {
  margin: 2rem;
  height: 3rem;
  width: calc(100% - 8rem);
}
.input > :global(.el-input__wrapper) {
  background-color: #e8f0fe !important;
  border-radius: 2rem !important;
}
</style>
