<script setup lang="ts">
const CourseViewChapter = defineAsyncComponent(() => import('../components/CourseViewChapter.vue'))
const CourseViewBBS = defineAsyncComponent(() => import('../components/CourseViewBBS.vue'))
const CourseViewWork = defineAsyncComponent(() => import('../components/CourseViewWork.vue'))
const CourseViewExam = defineAsyncComponent(() => import('../components/CourseViewExam.vue'))
const CourseViewAssess = defineAsyncComponent(() => import('../components/CourseViewAssess.vue'))
const CourseViewLive = defineAsyncComponent(() => import('../components/CourseViewLive.vue'))

defineProps<{ id: string }>()
</script>

<template>
  <section class="course-view-header">
    <h1>Design Thinking for Managers 设计思维与管理创新</h1>
    <ul>
      <li>必修课</li>
      <li>3学分</li>
      <li>第二学期</li>
    </ul>
  </section>
  <el-tabs>
    <el-tab-pane label="学习">
      <CourseViewChapter />
    </el-tab-pane>
    <el-tab-pane label="论坛" lazy>
      <CourseViewBBS />
    </el-tab-pane>
    <el-tab-pane label="大作业" lazy>
      <CourseViewWork />
    </el-tab-pane>
    <el-tab-pane label="考试" lazy>
      <CourseViewExam />
    </el-tab-pane>
    <el-tab-pane label="课程考核" lazy>
      <CourseViewAssess />
    </el-tab-pane>
    <el-tab-pane label="直播" lazy>
      <CourseViewLive />
    </el-tab-pane>
  </el-tabs>
</template>
