<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="isLogin"></Edu>
      <Feedback></Feedback>
    </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 Feedback from '@/components/main/feedback.vue';
import Header from './header.vue'
import { userCurrentRole,userInfoStore } from '../stores/counter'

const user = userInfoStore()
const CurrentRole = userCurrentRole()
const isupdateCourse = ref(false)
const isLogin = ref(false)

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