<script setup lang="ts">
import type { CourseResourceType, CourseChapterType } from '../types'
import { getCourseSection, getChapterTreeList } from '../api'
import CoursePlayerResourceItem from '../components/CoursePlayerResourceItem.vue'

const CoursePlayerVideo = defineAsyncComponent(() => import('../components/CoursePlayerVideo.vue'))
const CoursePlayerChapter = defineAsyncComponent(() => import('../components/CoursePlayerChapter.vue'))

const route = useRoute()
let courseId = $ref<string>('')
let sectionId = $ref<string>('')
let semesterId = $ref<string>('')
watchEffect(() => {
  courseId = route.query.course_id as string
  sectionId = route.query.section_id as string
  semesterId = route.query.semester_id as string
})

const detail = reactive<{
  course_name: string
  coursewares: CourseResourceType[]
  exams: CourseResourceType[]
  jobs: CourseResourceType[]
  lesson_plans: CourseResourceType[]
  other_infos: CourseResourceType[]
}>({ course_name: '', coursewares: [], exams: [], jobs: [], lesson_plans: [], other_infos: [] })
let loading = $ref<boolean>(false)
// 获取详情信息
function fetchInfo() {
  if (!sectionId) return
  loading = true
  getCourseSection({ section_id: sectionId, semester_id: semesterId }).then(res => {
    Object.assign(detail, res.data)
    loading = false
  })
}
watchEffect(() => {
  fetchInfo()
})
let chapterList = $ref<CourseChapterType[]>([])
// 获取章节列表
function fetchList() {
  getChapterTreeList({ course_id: courseId, semester_id: semesterId }).then(res => {
    chapterList = res.data.items
  })
}

onMounted(() => {
  fetchList()
})
</script>

<template>
  <div class="course-player">
    <div class="course-player-hd">
      <h1 class="course-player-main__title">{{ detail.course_name }}</h1>
    </div>
    <div class="course-player-bd">
      <div class="course-player-main" v-loading="loading">
        <CoursePlayerVideo :chapterList="chapterList" :key="sectionId" />
        <el-tabs>
          <el-tab-pane label="课件">
            <CoursePlayerResourceItem
              v-for="item in detail.coursewares"
              :data="item"
              :key="item.id"
            ></CoursePlayerResourceItem>
          </el-tab-pane>
          <el-tab-pane label="教案" lazy>
            <CoursePlayerResourceItem
              v-for="item in detail.lesson_plans"
              :data="item"
              :key="item.id"
            ></CoursePlayerResourceItem>
          </el-tab-pane>
          <el-tab-pane label="作业" lazy>
            <CoursePlayerResourceItem
              v-for="item in detail.jobs"
              :data="item"
              :key="item.id"
            ></CoursePlayerResourceItem>
          </el-tab-pane>
          <el-tab-pane label="资料" lazy>
            <CoursePlayerResourceItem
              v-for="item in detail.other_infos"
              :data="item"
              :key="item.id"
            ></CoursePlayerResourceItem>
          </el-tab-pane>
          <el-tab-pane label="考试/测验" lazy>
            <CoursePlayerResourceItem
              v-for="item in detail.exams"
              :data="item"
              :key="item.id"
            ></CoursePlayerResourceItem>
          </el-tab-pane>
          <!-- <el-tab-pane label="直播" lazy></el-tab-pane> -->
        </el-tabs>
      </div>
      <div class="course-player-aside">
        <CoursePlayerChapter :chapterList="chapterList" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.course-player {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 6px;
  box-sizing: border-box;
}
.course-player-bd {
  flex: 1;
  display: flex;
}
.course-player-main {
  flex: 1;
  overflow: hidden;
}
.course-player-main__title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #333333;
}
</style>
