<template>
  <div style="height:100%">
    <Header></Header>
    <div class="main">
      <!-- <BannerVue></BannerVue> -->
      <CourseSelect></CourseSelect>
      <resource></resource>
      <Practice></Practice>
      <other v-if="isupdateCourse"></other>
      <Edu v-if="isupdateCourse"></Edu>
    </div>
  </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
import BannerVue from '@/components/main/banner.vue'
import CourseSelect from '@/components/main/courseSelect.vue'
import resource from '@/components/main/resource.vue';
import Practice from '@/components/main/Practice.vue';
import other from '@/components/main/other.vue';
import Edu from '@/components/main/edu.vue';
import Header from './header.vue'
import { userInfoStore } from '../stores/counter'

const user = userInfoStore()
const isupdateCourse = ref(false)

watchEffect(() => {
  if (JSON.stringify(user.user) != "{}") {
    if (user.user.currentRole == "areaAdministrator" || user.user.currentRole == "userAdministrator" || user.user.currentRole == "securityAuditor" || user.user.currentRole == "schoolAdministrator" || user.user.currentRole == "schoolSecurityAuditor" || user.user.currentRole == "teacher" || user.user.currentRole == "visitor") {
      isupdateCourse.value = true
    }
  }
})
</script>
<style lang="scss" scoped>
.main {
  background: #F0F2F5;
  padding: 20px 10%;
  min-height: calc(100% - 60px);
}
</style>