<script setup>
import {ref} from 'vue'
import AsideAvatar from "app/src/component/AsideAvatar.vue";
import {useMajorsStore} from "stores/majors";
import authApi from "app/src/api/auth/authApi";
import {useRouter} from "vue-router";
import AdminUserinfoPane from "pages/admin/main/AdminUserinfoPane.vue";
import InfoSvg from '/icons/info.svg'
import {useUserInfoStore} from "stores/user";

const leftDrawerOpen = ref(false)

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

const router = useRouter()

const logoutLoading = ref(false)

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 userInfoPaneState = ref(false)

</script>

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

    <q-header class="bg-cyan-600 flex justify-center h-16 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="'root'" :sub-title='"管理员"'></AsideAvatar>
        <div class="flex-grow flex flex-col p-6 justify-between w-full">
          <div class="flex flex-col gap-3">
            <q-separator/>
            <span class="text-base">选择一个管理项</span>

            <q-separator/>

            <router-link to="/admin/course">
              <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default">课程</q-btn>
            </router-link>

            <router-link to="/admin/activity">
              <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default" label="选课活动"/>
            </router-link>

            <q-btn-dropdown flat rounded align="left" label="用户" class="h-10 text-xl w-full cursor-default"
                            content-class="text-lg cursor-default">
              <q-list bordered>
                <router-link to="/admin/user-teacher">
                  <q-item clickable v-close-popup style="cursor: default !important;">
                    <q-item-section>
                      <q-item-label class="text-base">教师</q-item-label>
                    </q-item-section>
                  </q-item>
                </router-link>

                <router-link to="/admin/user-student">
                  <q-item clickable v-close-popup style="cursor: default !important;">
                    <q-item-section>
                      <q-item-label class="text-base">学生</q-item-label>
                    </q-item-section>
                  </q-item>
                </router-link>
              </q-list>
            </q-btn-dropdown>

            <q-btn rounded align="left" flat class="h-10 text-xl w-full cursor-default" label="账号"
                   @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>

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

  </q-layout>
</template>

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

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

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

</style>
