<script setup lang="ts">
  import { PageType } from '~/stores/login';

  const store = useLoginStore();
  const { currentType, loginForm } = 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">
        <button class="w-56 h-10 bg-qqColor text-white rounded-md"
          ><img class="max-h-7 inline" src="/QQ.png" alt="QQ logo" />
          <span class="text-white">QQ登录</span>
        </button>
        <button class="w-56 h-10 bg-wechatColor rounded-md"
          ><img
            class="max-h-7 inline"
            src="public/微信.png"
            alt="wechat logo"
          />
          <span class="text-white">微信登录</span>
        </button>
        <button class="w-56 h-10 bg-alipayColor rounded-md"
          ><img
            class="max-h-7 inline"
            src="public/支付,支付宝.png"
            alt="alipay logo"
          />
          <span class="text-black">支付宝登录</span>
        </button>
      </div>
      <div
        class="relative 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="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"
        >
          <span
            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-1"
            >or
          </span>
        </div>
      </div>
      <div class="flex flex-col items-center gap-4 mt-3 md:mt-0">
        <TInput
          v-model="loginForm.username"
          class="w-56"
          placeholder="请输入用户名"
        />
        <TInput
          v-model="loginForm.password"
          class="w-56"
          type="password"
          placeholder="请输入密码"
        />
        <TButton class="w-56" @click="store.login">登录</TButton>
      </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="currentType = PageType.register"
        >注册
      </button>
      <button class="text-white" @click="currentType = PageType.reset"
        >忘记密码
      </button>
    </div>
  </div>
</template>
