<script setup>
// 引入依赖
import api from '@/api/course'
import {ref,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import custom from '@/utils/custom'
const router = useRouter()
const route = useRoute()
// 组件
// import examCom from '../components/examinationPool.vue'
import viewExamCom from '../components/viewExamination.vue'
// 变量
const course_id = ref(0)
const courseData = ref({})
const baseInfo = ref({})
// 生命周期
onMounted(() => {
  course_id.value = route.params.course_id
  getCourse()
})
//方法
async function getCourse() { // 获取课程信息
  const res = await api.getCourse({id:course_id.value})
  if(res.code === 0) {
    courseData.value = res.data
    baseInfo.value = res.data.course
    // console.log(res.data.course)
  }
}
function downloadChapterChildFunc(item) { // 点击下载
  // console.log(item)
  window.open(row.url)
}
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="gva-search-box">
      <div class="baseinfoBox">
        <div class="base-card course-name">
          <div class="bc-left" style="font-size: 18px">课程名称：</div>
          <div class="bc-right" style="font-size: 18px">{{courseData.name}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程名称：</div>
          <div class="bc-right">{{baseInfo.name}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程科目：</div>
          <div class="bc-right">{{baseInfo.subject}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程状态：</div>
          <div class="bc-right">{{custom.getCourseStateName(baseInfo.status)}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程价格：</div>
          <div class="bc-right">{{custom.getStdPrice(baseInfo.price)}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">教师姓名：</div>
          <div class="bc-right">{{courseData.teacher_name}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">创建时间：</div>
          <div class="bc-right">{{custom.dateFmt(baseInfo.CreatedAt)}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程简介：</div>
          <div class="bc-right">{{baseInfo.intro}}</div>
        </div>
      </div>
    </div>
    <!--    章节信息-->
    <div class="gva-table-box">
      <div class="list-box">
        <div class="lb-card" v-for="(item,i) in courseData.course_ware_json">
          <!--大章节标题-->
          <div class="lb-title-part">
            <div class="lbt-title">{{item.name}}</div>
          </div>
          <!--表格数据-->
          <div class="lb-table-part" style="margin-bottom: 20px">
            <el-table :data="item.course_sub" border >
              <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">
                <template #default="scope">
<!--                  {{scope.row.url === ''?'未上传课件':scope.row.url}}-->
                  <el-button v-if="scope.row.url" @click="viewFunc(scope.row,1)" size="small"  type="plain">点击查看</el-button>
<!--                  <div v-if="scope.row.url" @click="viewFunc(scope.row,1)" class="view-css">查看</div>-->
                  <div v-else>未上传课件</div>
                </template>
              </el-table-column>
              <el-table-column align="left" label="试卷习题" min-width="60" prop="is_contain_exercise">
                <template #default="scope">
<!--                  {{scope.row.exam_id === 0?'未添加习题':scope.row.exam_id}}-->
<!--                  <div v-if="scope.row.exam_id" @click="viewFunc(scope.row,2)" class="view-css">查看</div>-->
                  <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-column align="left" label="操作" min-width="60">-->
<!--                <template #default="scope">-->
<!--                  <el-button v-if="scope.row.url"-->
<!--                    icon="edit"-->
<!--                    size="small"-->
<!--                    type="primary"-->
<!--                    link-->
<!--                    @click="downloadChapterChildFunc(scope.row)"-->
<!--                  >下载</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </div>
        </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{
  color: #4d70ff;
  cursor: pointer;
}
.lbt-title{
  margin-right: 20px;
  font-size: 18px;
  margin-bottom: 10px;
}
.base-card{
  display: flex;
  float: left;
  white-space: nowrap;
  width: 33%;
  padding: 10px 0px;
  color: gray;
}
.course-name{
  font-weight: 900;
  font-size: 18px !important;
  width: 100%;
  color:black
}
.baseinfoBox{
  overflow: hidden;
}
</style>
