<script>
export default {
  name: 'chapterCom',
  methods: {

  }
}
</script>
<script setup>
// 引入依赖
import _ from 'lodash'
import api from '@/api/course'
import {ref,onMounted,watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()
import mediaCom from '../components/mediaPool.vue'
import exercisesCom from '../components/exercisesPool.vue'
import examCom from '../components/examinationPool.vue'
import viewExamCom from '../components/viewExamination.vue'

const props = defineProps(['course_id','chapter_info'])
const emit = defineEmits(['reload'])
// 变量

const chapter_data = ref([])
// 生命周期
onMounted(() => {
  chapter_data.value = props.chapter_info
})
watch(props,(old, newProps) => {
  chapter_data.value = props.chapter_info
})


// 方法
function indexMethod(index) {
  return index +=1
}
// 视频预览相关
const videoDialogTitle = ref('')
const dialogVideoVisible = ref(false)
const video_url = ref(null)
function viewFunc(row,type) { // 查看课件/试卷
  if(type ===1) { // 课件
    videoDialogTitle.value = '章节：'+row.name
    // console.log(row)
    dialogVideoVisible.value = true
    video_url.value = row.url
  }
  else{ // 试卷
    // dialogFormVisible.value = true
  }
}
function closeVideoDialog() {
  dialogVideoVisible.value = false
}

</script>
<template>
  <div>
    <div class="btn-box" style="text-align: right;margin: 10px 0 20px;">
<!--      <el-button type="primary" icon="plus" @click="addChapterFunc">添加章节</el-button>-->
    </div>
    <div class="list-box">
      <div class="lb-card" v-for="(item,i) in chapter_data">
        <!--大章节标题-->
        <div class="lb-title-part">
          <div class="lbt-title" style="margin-bottom: 10px">{{item.name}}</div>
        </div>
        <!--表格数据-->
        <div class="lb-table-part"  style="margin-bottom: 20px">
          <el-table border :data="item.course_sub" >
            <el-table-column align="left" type="index" :index="indexMethod" label="序号" width="60"   />
            <el-table-column align="left" label="ID" width="60" prop="course_subsection_id" />
            <el-table-column align="left" label="子章节名称" min-width="60" prop="name" />
            <el-table-column align="left" label="课件名称" min-width="60" prop="url">
              <template #default="scope">
                <div class="view-css" v-if="scope.row.url" @click="viewFunc(scope.row,1)">点击查看</div>
                <div v-else>未上传课件</div>
              </template>
            </el-table-column>

            <el-table-column align="left" label="章节试卷" min-width="60" prop="exam_id">
              <template #default="scope">
                <viewExamCom v-if="scope.row.exam_id" :exam_id = 'scope.row.exam_id' :chaper_name="scope.row.name" ></viewExamCom>
                <div v-else>未绑定试卷</div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="是否免费" min-width="60">
              <template #default="scope">
                {{scope.row.is_free === 1? '是':'否'}}
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVideoVisible" :before-close="closeVideoDialog" :title="videoDialogTitle">
      <video style="width: 100%" :src="video_url" controls></video>
    </el-dialog>
  </div>
</template>
<style scoped>
  .view-css{
    cursor: pointer;
  }
  .lbt-title{
    margin-right: 20px;
    font-size: 18px;
  }
  .lb-title-part{
    display: flex;
    align-items: center;
  }
</style>
