<script setup lang="ts">
import { getCharacter } from '../api'
import ViewCourseChapter from '../components/ViewCourseChapter.vue'
import ViewDetailsVideo from '../components/ViewDetailsVideo.vue'
import PreviewFiles from '@/components/base/PreviewFiles.vue'

interface IChapterDetails {
  name: string
  children: any[]
}

// 路由
const route = useRoute()
const router = useRouter()
const courseId = route.params.courseId as string
const chapterId = route.params.id

// 章节数
const chapterTree: any = ref([])
// 当前章节的资源内容
const chapterDetails = ref<IChapterDetails>()
onMounted(() => {
  initData()
})

const initData = () => {
  getCharacter({ course_id: courseId, type: 'tree' }).then((res: any) => {
    if (res.code === 0) {
      chapterTree.value = res.data[0]?.children || []
      res.data[0]?.children.forEach((item: any) => {
        const findItem = item.children.find((i: { id: string }) => i.id === chapterId)
        if (findItem) {
          chapterDetails.value = findItem
        }
      })
    }
    getChapterResource()
  })
}

// 所有资源集合
interface IResourceAll {
  videoData: { cover: string; id: string }[]
  courseware: { id: string; url: string }[]
  lessonPlan: { id: string; url: string }[]
  data: { id: string; url: string }[]
  exam: any[]
  live: any[]
  homework: any[]
}

// 所有要渲染的资源
const resourceData = reactive<IResourceAll>({
  videoData: [],
  courseware: [],
  lessonPlan: [],
  data: [],
  exam: [],
  live: [],
  homework: []
})

// 分配资源
interface IResource {
  resource_type: string
  resource: {
    cover: string
    id: string
    url: string
  }
}
const getChapterResource = () => {
  chapterDetails.value?.children.forEach((item: IResource) => {
    switch (item.resource_type) {
      case '2':
        resourceData.videoData.push(item.resource)
        break
      case '10':
        resourceData.courseware.push(item.resource)
        break
      case '11':
        resourceData.lessonPlan.push(item.resource)
        break
      case '4':
        resourceData.data.push(item.resource)
        break
      case '9':
        resourceData.exam.push(item.resource)
        break
      case '6':
        resourceData.live.push(item.resource)
        break
      case '3':
        resourceData.homework.push(item.resource)
        break
    }
  })
}

// 资料切换
const activeName = ref('1')

// 考试参数
const listOptions = computed(() => {
  return {
    columns: [
      { type: 'index', label: '序号', fixed: 'center', width: '100px' },
      {
        label: '组卷模式',
        prop: 'paper_type',
        computed: (row: any) => {
          return row.row.paper_type === 1 ? '选题组卷' : '自动组卷'
        },
        align: 'center'
      },
      {
        label: '试卷用途',
        prop: 'paper_uses',
        computed: (row: any) => {
          const map = { 1: '考试', 2: '课后作业', 3: '课程测试' }
          return map[row.row.paper_uses] || row.row.paper_uses
        },
        align: 'center'
      },
      { label: '试卷分类', prop: 'paper_category.name', align: 'center' },
      { label: '试卷名称', prop: 'paper_title', align: 'center' },
      { label: '总分', prop: 'paper_total_score', align: 'center' },
      { label: '及格分数', prop: 'pass_score', align: 'center' },
      { label: '更新时间', prop: 'updated_at', align: 'center' },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ],
    data: resourceData.exam
  }
})
// 作业参数
const homeworkOptions = computed(() => {
  return {
    columns: [
      { type: 'index', label: '序号', fixed: 'center', width: '100px' },
      {
        label: '组卷模式',
        prop: 'paper_type',
        computed: (row: any) => {
          return row.row.paper_type === 1 ? '选题组卷' : '自动组卷'
        },
        align: 'center'
      },
      {
        label: '试卷用途',
        prop: 'paper_uses',
        computed: (row: any) => {
          const map = { 1: '考试', 2: '课后作业', 3: '课程测试' }
          return map[row.row.paper_uses] || row.row.paper_uses
        },
        align: 'center'
      },
      { label: '试卷分类', prop: 'paper_category.name', align: 'center' },
      { label: '试卷名称', prop: 'paper_title', align: 'center' },
      { label: '总分', prop: 'paper_total_score', align: 'center' },
      { label: '及格分数', prop: 'pass_score', align: 'center' },
      { label: '更新时间', prop: 'updated_at', align: 'center' }
    ],
    data: resourceData.homework
  }
})

// 直播
const add0 = (m: number) => {
  return m < 10 ? '0' + m : m
}
const format = (n: number) => {
  const time = new Date(n)
  const y = time.getFullYear()
  const m = time.getMonth() + 1
  const d = time.getDate()
  const h = time.getHours()
  const mm = time.getMinutes()
  const s = time.getSeconds()
  return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s)
}
const liveOptions = computed(() => {
  return {
    columns: [
      { label: '会议code', prop: 'meeting_code', align: 'center' },
      { label: '主题', prop: 'subject', align: 'center' },
      {
        label: '开始时间',
        prop: 'start_time',
        align: 'center',
        computed({ row }: any) {
          return format(parseInt(row.start_time) * 1000)
        }
      },
      {
        label: '结束时间',
        prop: 'end_time',
        align: 'center',
        computed({ row }: any) {
          return format(parseInt(row.end_time) * 1000)
        }
      },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ],
    data: resourceData.live
  }
})
const goLive = (url: string) => {
  window.open(url)
}

// 监听路由变化重新渲染页面
watch(
  () => route.params.id,
  () => {
    initData()
    router.go(0)
  }
)
const handleExamDetail = (row: any) => {
  window.open(`https://qa-center.ezijing.com/paper/detail/${row.id}`)
}
</script>
<template>
  <AppCard title="查阅课程">
    <div class="chapter-box">
      <div class="title">{{ chapterDetails?.name }}</div>
      <div class="chapter-content">
        <div class="content-top">
          <ViewDetailsVideo
            v-if="Object.keys(resourceData.videoData).length"
            :data="resourceData.videoData"
            :chapterTree="chapterTree"
            class="video_con"
          ></ViewDetailsVideo>
          <div v-else style="display: flex">
            <!-- <el-empty description="暂无数据" style="width: 85%" /> -->
            <ViewCourseChapter :isBlack="true" :data="chapterTree" style="max-height: 500px"></ViewCourseChapter>
          </div>
        </div>

        <div class="content-bottom">
          <el-tabs :lazy="true" v-model="activeName" class="demo-tabs">
            <el-tab-pane label="课件" name="1">
              <PreviewFiles
                v-for="item in resourceData.courseware"
                :key="item.id"
                :item="item"
                style="margin-top: 10px"
              ></PreviewFiles>
              <!-- <el-empty description="暂无数据" v-if="!resourceData.courseware.length" /> -->
            </el-tab-pane>
            <el-tab-pane label="教案" name="2">
              <PreviewFiles
                :item="item"
                v-for="item in resourceData.lessonPlan"
                :key="item.id"
                style="margin-top: 10px"
              ></PreviewFiles>
              <!-- <el-empty description="暂无数据" v-if="!resourceData.lessonPlan.length" /> -->
            </el-tab-pane>
            <el-tab-pane label="资料" name="3">
              <PreviewFiles
                :item="item"
                v-for="item in resourceData.data"
                :key="item.id"
                style="margin-top: 10px"
              ></PreviewFiles>
              <!-- <el-empty description="暂无数据" v-if="!resourceData.data.length" /> -->
            </el-tab-pane>
            <el-tab-pane label="作业" name="4">
              <AppList v-bind="homeworkOptions">
                <template #table-operate="{ row }">
                  <el-link type="primary" @click="handleExamDetail(row)">进入</el-link>
                </template>
              </AppList>
            </el-tab-pane>
            <el-tab-pane label="考试 / 测验" name="5">
              <AppList v-bind="listOptions">
                <template #table-operate="{ row }">
                  <el-link type="primary" @click="handleExamDetail(row)">进入</el-link>
                </template>
              </AppList>
            </el-tab-pane>
            <el-tab-pane label="直播" name="6">
              <AppList v-bind="liveOptions">
                <template #table-operate="{ row }">
                  <el-button type="primary" plain @click="goLive(row.join_url)">查看</el-button>
                </template>
              </AppList>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </AppCard>
</template>
<style lang="scss" scoped>
.chapter-box {
  .title {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
  }
  .content-bottom {
    margin-top: 70px;
    .demo-tabs {
      margin-bottom: 20px;
    }
  }
}
:deep(.el-tabs__content) {
  margin-top: 40px;
}
</style>
