<!-- 学习 -->
<script setup lang="ts">
import format from 'format-duration'
import type { PptType } from '@/types'
import type { CourseChapterType } from '../types'

interface Props {
  chapterList: CourseChapterType[]
  pptList: PptType[]
  pptIndex: number
}
const props = defineProps<Props>()

defineEmits<{
  (e: 'clickPPT', ppt: PptType): void
}>()

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

let activeTab = $ref<string>('chapter')
watchEffect(() => {
  if (!props.pptList.length) {
    activeTab = 'chapter'
  }
})

// 时长转换
function formatDuration(duration: number | undefined) {
  if (!duration) return ''
  return format(duration * 1000, { leading: true })
}
</script>

<template>
  <div class="course-player-chapter">
    <el-tabs v-model="activeTab" stretch>
      <el-tab-pane label="章节" name="chapter">
        <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="讲义" name="ppt" v-if="pptList && pptList.length">
        <ul class="lecture-list">
          <li
            v-for="(item, index) in pptList"
            :class="{ 'is-active': index === pptIndex }"
            :key="item.url"
            @click="$emit('clickPPT', item)"
          >
            <img :src="`${item.url}?x-oss-process=image/resize,m_fill,h_128,w_218`" loading="lazy" />
            <span>{{ formatDuration(item.point) }}</span>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.course-player-chapter {
  height: 100%;
  padding: 20px;
  background-color: #1f1e24;
  box-sizing: border-box;
  :deep(.el-tabs__nav) {
    float: none;
    display: flex;
  }
  :deep(.el-tabs__active-bar) {
    display: none;
  }
  :deep(.el-tabs__item) {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #89898b;
    &.is-active {
      color: #fff;
    }
  }
  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 {
      flex: 1;
      margin-left: 8px;
      font-size: 16px;
      font-weight: 500;
      line-height: 26px;
      color: #fff;
    }
  }
  dd {
    margin-left: 34px;
    padding: 5px 0 5px 1em;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    &.is-active {
      color: var(--main-color);
    }
  }

  .lecture-list {
    li {
      position: relative;
      margin: 10px 0;
      height: 128px;
      cursor: pointer;
      &.is-active {
        border: solid 2px var(--main-color);
      }
    }
    img {
      display: block;
      width: 100%;
    }
    span {
      position: absolute;
      left: 10px;
      top: 10px;
      padding: 0 5px;
      font-size: 12px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 4px;
    }
  }
}
</style>
