<script setup lang="ts">
  const store = useLoginStore();
  const { currentType } = storeToRefs(store);
</script>

<template>
  <div class="w-full">
    <div
      class="flex md:flex-row items-center md:justify-center w-full flex-col gap-4"
    >
      <div class="flex flex-col items-center gap-4">
        <!--      <TInput class="w-56" placeholder="请输入邮箱" />-->
        <!--      <TButton class="w-56">发送验证码</TButton>-->
        <!--      <TInput class="w-56" placeholder="请输入验证码" />-->
        <!--      <TInput class="w-56" type="password" placeholder="请输入新密码" />-->
        <!--      <TButton class="w-56">确认</TButton>-->
        <TInput class="w-56" placeholder="用户名" />
        <TInput class="w-56" placeholder="旧密码" />
      </div>
      <div
        class="hidden md:flex flex-col items-center gap-4 w-2/5 max-w-24 select-none"
      >
        <div class="w-1 h-44 bg-gray-200"></div>
        <!--        <div-->
        <!--          class="hidden absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-4 border-gray-200 w-10 h-10 bg-loginBG"-->
        <!--        >-->
        <!--&lt;!&ndash;          <span&ndash;&gt;-->
        <!--&lt;!&ndash;            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-1"&ndash;&gt;-->
        <!--&lt;!&ndash;            >or&ndash;&gt;-->
        <!--&lt;!&ndash;          </span>&ndash;&gt;-->
        <!--        </div>-->
      </div>
      <div class="flex flex-col items-center gap-4">
        <TInput class="w-56" placeholder="新密码" />
        <TInput class="w-56" placeholder="确认新密码" />
      </div>
    </div>
    <div
      class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
    >
      <button class="text-white" @click="store.register()">修改密码</button>
      <button class="text-white" @click="currentType = PageType.login"
        >返回登录
      </button>
    </div>
  </div>
</template>
