<script setup>
import {useQuasar} from "quasar";
import authApi from "app/src/api/auth/authApi";
import {ref} from 'vue'

import {useRouter} from "vue-router";
import userApi from "app/src/api/user/user";
import {useUserInfoStore} from "stores/user";
import {useMajorsStore} from "stores/majors";

const quasar = useQuasar()

const router = useRouter()

const username = ref('')
const password = ref('')

const userInfoStore = useUserInfoStore();

;(async () => {
  try {
    const ok = await userInfoStore.checkLoginStat()
    if (ok) {
      toMainPage(userInfoStore.info?.basic?.userType)
    }
  } catch (e) {
    console.error(e)
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message,
    });
  }
})();

function toMainPage(userType) {
  switch (userType) {
    case 'STUDENT':
      router.push('/student')
      break
    case 'TEACHER':
      router.push('/teacher')
      break
    case 'ADMIN':
      router.push('/admin')
      break
  }
}

const majorStore = useMajorsStore()

async function userLogin() {
  if (!username.value || !password.value) {
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '嗯？',
      message: '用户名和密码输入点什么吧...？',
    })
    return
  }

  quasar.loading.show({
    message: '与服务器通信中...'
  })

  try {
    const userBasic = await authApi.login(username.value, password.value);
    userInfoStore.info.basic = userBasic
    userInfoStore.info.details = await userApi.getInfo(userBasic.id, userBasic.userType)
    await majorStore.refreshMajors()
    quasar.loading.hide();
    toMainPage(userInfoStore.info?.basic?.userType);
  } catch (e) {
    quasar.dialog({
      transitionShow: 'fade',
      transitionHide: 'fade',
      title: '啊哈？',
      message: e.message,
    });
  } finally {
    quasar.loading.hide()
  }
}

</script>

<template>
  <div class="flex flex-center gap-12 sm:gap-12 content-start flex-col">
    <div class="flex justify-start flex-col text-left">
      <h1 class="app-title text-weight-bold la-align-left sm:text-5xl text-4xl">
        RadicalDreamers <span class="text-base">Rev</span>
      </h1>
      <h3 class="app-subtitle text-left sm:text-3xl text-2xl">需要登录</h3>
    </div>

    <div class="flex justify-start row gap-4 sm:pt-12">
      <q-input outlined v-model="username" color="indigo" label="用户名" type="text" class="full-width"/>
      <q-input outlined v-model="password" color="indigo" label="密码" type="password" class="full-width"
               @keyup="e => {if(e.key === 'Enter') userLogin()}"/>
      <div class="flex flex-col gap-2 mt-4 flex-grow">
        <q-btn unelevated @click="userLogin" color="green" class="flex-grow text-xl">登录</q-btn>
      </div>
    </div>

    <div>
      <p class="leading-8 font-bold">欢迎回来</p>
      <p class="leading-5">- 初次使用，如果没有账号，可以请求管理员手动添加账号。
        <del class="text-sm">Oauth2已经砍了</del>
      </p>
      <p class="leading-5">- 学生用户，可以直接使用武科大本科生系统账号登录，也可以请求管理员手动添加账号</p>
      <p class="leading-5">- 管理员手动添加的账号，默认密码即为用户名</p>
      <p class="leading-5">- 管理员账号使用root用户名登录。</p>
      <p class="leading-5">- 推荐在pc端使用，移动端也可</p>
      <p class="leading-5">- 建议使用Chrome以及Firefox（当然是越新越好）</p>
    </div>
  </div>
</template>

<style scoped lang="sass">
.app-title, .app-subtitle
  transition: all 0.2s linear 0s

@media not all and (min-width: 340px)
  .app-title
    font-size: 2rem
  .app-subtitle
    font-size: 1rem
</style>
