<script setup>
import {ref} from 'vue'
import AsideAvatar from "app/src/component/AsideAvatar.vue";

import ScheduleSvg from '/icons/schedule.svg'
import ScoreSvg from '/icons/score.svg'
import {useRouter} from "vue-router";
import InfoSvg from '/icons/info.svg'
import TeacherUserinfoPane from "pages/teacher/main/TeacherUserinfoPane.vue";
import {useCurrentActivityStore} from "stores/activity";
import {useUserInfoStore} from "stores/user";

const leftDrawerOpen = ref(false)

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value
}

const router = useRouter()

const currentActivity = useCurrentActivityStore()
currentActivity.loadCurrentActivity()

const userInfoStore = useUserInfoStore()

async function logout() {
  logoutLoading.value = true;
  try {
    await userInfoStore.logout();
    await router.push("/");
  } catch (error) {
    console.warn(error);
  } finally {
    logoutLoading.value = false;
  }
}

;(async () => {
  if (!(await userInfoStore.checkLoginStat())) {
    await router.push("/")
  }
})()

const logoutLoading = ref(false)

const userInfoPaneState = ref(false)

</script>

<template>
  <q-layout view="HHH LpR lFr">

    <q-header class="flex justify-center h-16 bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" class="lg:hidden"/>
        <q-toolbar-title class="text-2xl font-bold select-none">
          RadicalDreamers
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model=leftDrawerOpen side="left"
              class="flex flex-col content-start lg:content-end justify-start">
      <div class="flex flex-col content-start lg:content-end flex-grow w-full">
        <AsideAvatar :username="userInfoStore.info?.details?.name" :sub-title='"教师"'></AsideAvatar>
        <div class="flex-grow flex flex-col p-6 justify-between w-full">
          <div class="flex flex-col gap-3">
            <router-link to="/teacher/courses">
              <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default" label="课堂"
                     :icon="'img:' + ScheduleSvg"></q-btn>
            </router-link>
            <router-link to="/teacher/score">
              <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default" label="成绩"
                     :icon="'img:' + ScoreSvg"></q-btn>
            </router-link>
            <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default" label="信息"
                   :icon="'img:' + InfoSvg" @click="userInfoPaneState = true"></q-btn>
          </div>

          <q-btn rounded unelevated class="h-8 text-xl mt-8" color="red" @click="logout" :loading="logoutLoading"
                 :disable="logoutLoading" label="退出登录"/>
        </div>
      </div>
    </q-drawer>

    <q-page-container class="flex flex-col min-h-screen">
      <div class="max-w-full h-full">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component"></component>
          </transition>
        </router-view>
      </div>
    </q-page-container>

    <TeacherUserinfoPane v-model:open="userInfoPaneState" ref="userInfoPane" @on-ok="logout"/>

  </q-layout>
</template>

<style scoped lang="sass">
aside
  transition: all 1s linear 1s

.header
  background: rgba(255, 255, 255, 0.5)
  backdrop-filter: blur(3px)

.fade-enter-active,
.fade-leave-active
  transition: opacity 0.2s ease

.fade-enter-from,
.fade-leave-to
  opacity: 0

</style>
