<!-- 学习 -->
<script setup lang="ts">
import * as api from '../api'
let chapterList = $ref<CourseType[]>([])
const { query } = useRoute()
const courseId = $ref(query.course_id as string)
const semesterId = $ref(query.semester_id as string)
// 获取章节列表
function fetchList() {
  if (!courseId || !semesterId) {
    return
  }
  api.getChapterTreeList({ course_id: courseId, semester_id: semesterId }).then(res => {
    chapterList = res.data.items
  })
}
onMounted(() => {
  fetchList()
})
</script>
<template>
  <div class="course-player-chapter">
    <el-tabs>
      <el-tab-pane label="章节"></el-tab-pane>
      <el-tab-pane label="讲义"></el-tab-pane>
    </el-tabs>
    <el-collapse>
      <el-collapse-item :title="item.name" :name="item.id" v-for="item in chapterList" :key="item.id">
        <el-collapse>
          <el-collapse-item :title="section.name" :name="section.id" v-for="section in item.sections" :key="section.id">
            <ul>
              <li v-for="resource in section.resources" :key="resource.id">
                <router-link
                  :to="`/course/player?course_id=${courseId}&section_id=${section.id}&semester_id=${semesterId}`"
                >
                  {{ resource.name }}
                </router-link>
              </li>
            </ul>
          </el-collapse-item>
        </el-collapse>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style lang="scss" scoped>
.course-player-chapter {
  width: 258px;
  padding: 20px;
  background-color: #1f1e24;
}
li {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #e6e6e6;
  a {
    flex: 1;
  }
}
</style>
