<!-- 学习 -->
<script setup lang="ts">
import type { CourseChapterType, CourseSectionType, CourseResourceType } from '../types'
import ResourceIcon from '@/components/ResourceIcon.vue'
import { getChapterTreeList, collectionResource } from '../api'

let chapterList = $ref<CourseChapterType[]>([])
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
  }
  getChapterTreeList({ course_id: courseId, semester_id: semesterId }).then(res => {
    chapterList = res.data.items
  })
}
onMounted(() => {
  fetchList()
})
// 是否可以收藏
function canCollection(data: CourseResourceType) {
  return [4, 2, 10, 11, 3].includes(data.resource_type)
}
// 收藏/取消收藏
function toggleCollection(resource: CourseResourceType, section: CourseSectionType, chapter: CourseChapterType) {
  // 资源类型: 1章节，2视频，3作业，4其他，6腾讯会议，9考试，10课件，11教案
  // 收藏类型: 1其他， 2视频，3课件，4教案，5作业，6帖子
  const typeMap: Record<number, number> = { 4: 1, 2: 2, 10: 3, 11: 4, 3: 5, 9: 5 }
  collectionResource({
    course_id: courseId,
    semester_id: semesterId,
    chapter_id: chapter.id,
    section_id: section.id,
    source_id: resource.resource_id,
    type: typeMap[resource.resource_type],
    status: resource.collection_count > 0 ? 0 : 1
  }).then(res => {
    resource.collection_count = resource.collection_count > 0 ? 0 : 1
    console.log(res)
  })
}
</script>
<template>
  <el-collapse class="course-chapters">
    <el-collapse-item :name="item.id" v-for="item in chapterList" :key="item.id">
      <template #title><i class="icon-chapter"></i>{{ item.name }}</template>
      <el-collapse class="course-sections">
        <el-collapse-item :name="section.id" v-for="section in item.sections" :key="section.id">
          <template #title><i class="icon-chapter"></i>{{ section.name }}</template>
          <ul>
            <li class="course-resource-item" v-for="resource in section.resources" :key="resource.id">
              <router-link
                :to="`/course/player?course_id=${courseId}&chapter_id=${item.id}&section_id=${section.id}&resource_id=${resource.resource_id}&semester_id=${semesterId}`"
                target="_blank"
              >
                <ResourceIcon :resourceType="resource.resource_type" />
                {{ resource.name }}
              </router-link>
              <i
                class="icon-star"
                :class="!!resource.collection_count ? 'is-active' : ''"
                @click="toggleCollection(resource, section, item)"
                v-if="canCollection(resource)"
              ></i>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </el-collapse-item>
  </el-collapse>
</template>

<style lang="scss" scoped>
.course-resource-item {
  display: flex;
  align-items: center;
  padding: 0 48px 0 60px;
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #e6e6e6;
  a {
    flex: 1;
    &:hover {
      color: var(--main-color);
    }
  }
}
.icon-star {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(@/assets/images/icon_star.png) no-repeat;
  background-size: contain;
  cursor: pointer;
  &.is-active {
    background: url(@/assets/images/icon_star_hover.png) no-repeat;
    background-size: contain;
  }
}
.icon-chapter {
  margin-right: 10px;
  display: inline-block;
  width: 12px;
  height: 14px;
  background: url(@/assets/images/icon_chapter.png) no-repeat;
  background-size: contain;
}
.course-chapters {
  :deep(.el-collapse-item__header) {
    padding: 0 20px;
    background-color: #e8e9eb;
    border-bottom: none;
  }
}
.course-sections {
  margin-top: 10px;
  :deep(.el-collapse-item__header) {
    padding: 0 40px;
    background-color: #f7f8fa;
    border-bottom: none;
  }
}
.el-collapse {
  border-top: none;
  border-bottom: none;
}
:deep(.el-collapse-item__wrap) {
  border-bottom: none;
}
:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}
:deep(.el-collapse-item) {
  margin-bottom: 10px;
}
</style>
