<!-- 课程考核 -->
<script setup lang="ts">
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([])

// 树列表
const treeList = $computed(() => {
  return makeTree(list)
})

// 扁平列表
const flatList = $computed(() => {
  return tree2List(list)
})

// 累计学习时长
const studyTime = $computed(() => {
  return list.reduce((total, item) => {
    return total + item.watch_video_length || 0
  }, 0)
})
// 视频统计
const videoStatistics = $computed(() => {
  return flatList.reduce(
    (results, item) => {
      if (item.depth === 3) {
        results.length++
        if (item.is_finished) {
          results.completedLength++
        }
      }
      return results
    },
    { length: 0, completedLength: 0 }
  )
})
// 完成率
const completedPercent = $computed(() => {
  const percent = (videoStatistics.completedLength / videoStatistics.length) * 100
  return parseFloat(percent.toFixed(2)) || 0
})
// 树结构转换为列表
function tree2List(tree, parent) {
  return tree.reduce(function (acc, item) {
    if (item.depth === 2) {
      item.chapter_id = parent.id
    }
    if (item.depth === 3) {
      item.chapter_id = parent.chapter_id
      item.section_id = parent.id
    }
    acc.push(item)
    if (item.sections) acc = acc.concat(tree2List(item.sections, item))
    if (item.resources) acc = acc.concat(tree2List(item.resources, item))
    return acc
  }, [])
}
// 将列表转换为树结构
function makeTree(list: any) {
  return list.map(item => {
    if (item.sections || item.resources) item.children = makeTree(item.sections || item.resources)
    return item
  })
}
function fetchList() {
  getChapterVideoTreeList({ course_id: courseId, semester_id: semesterId }).then(res => {
    list = res.data.items
  })
}
onMounted(() => {
  fetchList()
})
</script>
<template>
  <div class="course-assess">
    <div class="course-assess-hd">
      <p class="t1">课程“音视频”观看统计（累计学习时长：{{ 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' }"
    >
      <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" />
      <el-table-column prop="name" label="百分比" width="180" align="center">
        <template #default="{ row }">
          <el-progress :percentage="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;
  }
}
</style>
