<script setup lang="ts">
import AppMessage from '@/components/Message.vue'
import Total from '../components/Total.vue'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const AdminHome = defineAsyncComponent(() => import('../components/AdminHome.vue'))
const TeacherHome = defineAsyncComponent(() => import('../components/TeacherHome.vue'))
const StudentHome = defineAsyncComponent(() => import('../components/StudentHome.vue'))
</script>

<template>
  <div class="home">
    <Total></Total>
    <AdminHome v-if="userStore.role?.id === 6"></AdminHome>
    <TeacherHome v-else-if="userStore.role?.id === 5"></TeacherHome>
    <StudentHome v-else></StudentHome>
  </div>
  <AppMessage></AppMessage>
</template>

<style lang="scss" scoped>
.home {
  margin: 0 30px;
}
</style>
