<script setup lang="ts">
import type { CourseResourceType, CourseChapterType } from '../types'
import { getCourseSection, getChapterTreeList } from '../api'
import CoursePlayerResourceList from '../components/CoursePlayerResourceList.vue'
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import type { VideoJsPlayer } from 'video.js'
import type { PptType } from '@/types'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()

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_alias_name: string
  course_name: string
  coursewares: CourseResourceType[]
  exams: CourseResourceType[]
  jobs: CourseResourceType[]
  lesson_plans: CourseResourceType[]
  other_infos: CourseResourceType[]
  meetings: CourseResourceType[]
}>({
  course_name: '',
  course_alias_name: '',
  coursewares: [],
  exams: [],
  jobs: [],
  lesson_plans: [],
  other_infos: [],
  meetings: []
})
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()
})
const videoJsPlayer = $ref<VideoJsPlayer | null>()
provide('videoJsPlayer', $$(videoJsPlayer))

let currentVideoResource = $ref<CourseResourceType | undefined>()
const pptList = $computed(() => {
  return currentVideoResource?.info?.ppt_arr ?? []
})
function onUpdateResource(resource: CourseResourceType | undefined) {
  currentVideoResource = resource
}
let pptIndex = $ref<number>(0)
function onTimeUpdate(time: number) {
  const index = pptList.findIndex(item => item.point > time)
  pptIndex = index !== -1 ? index - 1 : pptList.length - 1
}
// ppt点击
function onClickPPT(ppt: PptType) {
  videoJsPlayer?.currentTime(ppt.point)
}

let sidebarVisible = $ref<boolean>(true)
function toggleSidebar() {
  sidebarVisible = !sidebarVisible
}
</script>

<template>
  <div class="course-player">
    <div class="course-player-hd">
      <h1 class="course-player-main__title">{{ detail.course_alias_name || detail.course_name }}</h1>
    </div>
    <div class="course-player-bd">
      <div class="course-player-main" v-loading="loading">
        <CoursePlayerVideo :chapterList="chapterList" :key="sectionId" @updateResource="onUpdateResource" @timeupdate="onTimeUpdate" />
        <el-tabs :stretch="mobile">
          <el-tab-pane label="课件">
            <CoursePlayerResourceList :list="detail.coursewares" />
          </el-tab-pane>
          <el-tab-pane label="教案" lazy>
            <CoursePlayerResourceList :list="detail.lesson_plans" />
          </el-tab-pane>
          <el-tab-pane label="作业" lazy>
            <CoursePlayerResourceList :list="detail.jobs" />
          </el-tab-pane>
          <el-tab-pane label="资料" lazy>
            <CoursePlayerResourceList :list="detail.other_infos" />
          </el-tab-pane>
          <el-tab-pane label="考试/测验" lazy>
            <CoursePlayerResourceList :list="detail.exams" />
          </el-tab-pane>
          <el-tab-pane label="直播" lazy>
            <CoursePlayerResourceList :list="detail.meetings" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="course-player-aside" :class="{ 'is-hidden': !sidebarVisible }">
        <div class="course-player-aside__inner">
          <CoursePlayerChapter :chapterList="chapterList" :pptList="pptList" :pptIndex="pptIndex" @clickPPT="onClickPPT" />
        </div>
        <div class="toggle-button" :class="{ 'is-hidden': !sidebarVisible }" @click="toggleSidebar">
          <el-icon>
            <ArrowRightBold v-if="sidebarVisible" />
            <ArrowLeftBold v-else />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.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;
}
.course-player-aside {
  position: relative;
  width: 258px;
  margin-left: 20px;
  background-color: #1f1e24;
  transition: width 0.1s;
  &.is-hidden {
    width: 0;
    margin-left: 0;
  }
}
.course-player-aside__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.toggle-button {
  position: absolute;
  top: 235px;
  left: -20px;
  width: 40px;
  height: 40px;
  font-size: 14px;
  border-radius: 50%;
  background: #303133;
  font-size: 14px;
  color: #fff;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // 右半圆
  clip: rect(0px 40px 40px 20px);
  box-sizing: border-box;
  cursor: pointer;
  &.is-hidden {
    // 左半圆
    clip: rect(0px 20px 40px 0px);
    justify-content: flex-start;
  }
}
:deep(.el-tabs__item) {
  --el-font-size-base: 16px;
  padding: 0 20px !important;
  min-width: 60px;
  font-weight: 400;
  text-align: center;
  &.is-active {
    font-weight: 500;
  }
}
:deep(.el-tabs__active-bar) {
  padding: 0 20px;
  margin-left: -20px;
}
.is-h5 {
  .course-player {
    padding: 0;
    background-color: transparent;
  }
  .course-player-bd {
    position: relative;
    flex-direction: column;
  }
  .course-player-aside {
    margin-top: 220px;
    order: -1;
    flex: 1;
    width: 100%;
    margin-left: 0;
  }
  .course-player-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 220px !important;
  }
  .toggle-button {
    display: none;
  }
  .course-player-main {
    .course-resource-item {
      padding: 0;
    }
  }
}
</style>
