<!-- 课程考核 -->
<script setup lang="ts">
import type { CourseAssessChapterType } from '../types'
import format from 'format-duration'

import { getChapterVideoTreeList } from '../api'

const { query } = useRoute()
const courseId = $ref(query.course_id as string)
const semesterId = $ref(query.semester_id as string)

let list = $ref<CourseAssessChapterType[]>([])

// 树列表
const treeList = $computed<CourseAssessChapterType[]>(() => {
  return makeTree(list)
})
// 累计学习时长
const studyTime = $computed<number>(() => {
  return list.reduce((total, item) => {
    return total + item.watch_video_length || 0
  }, 0)
})
// 视频统计
const videoStatistics = $computed(() => {
  const results = { length: 0, completedLength: 0 }
  list.forEach(chapter => {
    chapter.sections.forEach(section => {
      section.resources.forEach(resource => {
        results.length++
        resource.is_finished && results.completedLength++
      })
    })
  })
  return results
})
// 完成率
const completedPercent = $computed(() => {
  const percent = (videoStatistics.completedLength / videoStatistics.length) * 100
  return parseFloat(percent.toFixed(2)) || 0
})
// 将列表转换为树结构
function makeTree(list: any, parent?: any) {
  return list.map((item: any) => {
    if (item.depth === 2 && parent) {
      item.chapter_id = parent.id
    }
    if (item.depth === 3 && parent) {
      item.chapter_id = parent.chapter_id
      item.section_id = parent.id
    }
    if (item.sections || item.resources) item.children = makeTree(item.sections || item.resources, item)
    return item
  })
}
function fetchList() {
  getChapterVideoTreeList({ course_id: courseId, semester_id: semesterId }).then(res => {
    list = res.data.items
  })
}
onMounted(() => {
  fetchList()
})
// 时长转换
function formatDuration(duration: number | undefined) {
  if (!duration) return ''
  return format(duration * 1000, { leading: true })
}
</script>
<template>
  <div class="course-assess">
    <div class="course-assess-hd">
      <p class="t1">课程“音视频”观看统计（累计学习时长：{{ formatDuration(studyTime) }}）</p>
      <div class="course-assess-hd__aside">
        <p class="t2">完成率</p>
        <el-progress :percentage="completedPercent" style="width: 200px" />
      </div>
    </div>
    <el-table
      :data="treeList"
      default-expand-all
      row-key="id"
      style="width: 100%"
      :header-cell-style="{ 'background-color': '#F7F8FA', 'font-size': '16px', 'font-weight': 400 }">
      <el-table-column prop="name" label="章节">
        <template #default="{ row }">
          <template v-if="row.depth === 3">
            <router-link
              :to="`/course/player?course_id=${courseId}&chapter_id=${row.chapter_id}&section_id=${row.section_id}&resource_id=${row.resource_id}&semester_id=${semesterId}`"
              target="_blank">
              {{ row.name }}
            </router-link>
          </template>
          <template v-else>{{ row.name }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="watch_video_length" label="学习时长" width="180" align="center">
        <template #default="{ row }">{{ formatDuration(row.watch_video_length) }}</template>
      </el-table-column>
      <el-table-column prop="name" label="百分比" width="180" align="center">
        <template #default="{ row }">
          <el-progress :percentage="parseFloat(row.schedule)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.course-assess-hd {
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  .t1 {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    color: var(--main-color);
  }
}
.course-assess-hd__aside {
  display: flex;
  .t2 {
    padding: 0 20px;
    font-size: 16px;
    color: #333333;
  }
}
:deep(.el-table__row--level-0) {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
:deep(.el-table__row--level-1) {
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
</style>
