<!-- 学习 -->
<script setup lang="ts">
import type { CourseChapterType } from '../types'
interface Props {
  chapterList: CourseChapterType[]
}
defineProps<Props>()

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
})
</script>

<template>
  <div class="course-player-chapter">
    <el-tabs>
      <el-tab-pane label="章节">
        <dl v-for="(item, index) in chapterList" :key="item.id">
          <dt>
            <span>{{ index + 1 }}</span>
            <p>{{ item.name }}</p>
          </dt>
          <dd v-for="section in item.sections" :key="section.id" :class="{ 'is-active': section.id === sectionId }">
            <router-link
              :to="`/course/player?course_id=${courseId}&chapter_id=${item.id}&section_id=${section.id}&semester_id=${semesterId}`"
            >
              {{ section.name }}
            </router-link>
          </dd>
        </dl>
      </el-tab-pane>
      <el-tab-pane label="讲义"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.course-player-chapter {
  width: 258px;
  height: 100%;
  padding: 20px;
  background-color: #1f1e24;
  box-sizing: border-box;
  :deep(.el-tabs__nav) {
    float: none;
    display: flex;
  }
  :deep(.el-tabs__item) {
    flex: 1;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    &.is-active {
      color: var(--main-color);
    }
  }
  dl {
    color: #fff;
    padding: 20px 0;
  }
  dl + dl {
    border-top: 1px dashed #b2b2b2;
  }
  dt {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    span {
      display: inline-block;
      width: 26px;
      height: 26px;
      color: var(--main-color);
      line-height: 26px;
      text-align: center;
      background-color: #fff;
      border-radius: 50%;
    }
    p {
      margin-left: 8px;
      font-size: 16px;
      font-weight: 500;
      line-height: 26px;
      color: #fff;
    }
  }
  dd {
    margin-left: 34px;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    &.is-active {
      color: var(--main-color);
    }
  }
}
</style>
