<template>
  <layout-card>
    <el-divider content-position="left">课程信息</el-divider>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="课程名称">
        {{ data.info.CURRICULUMNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="培训行业类型">
        {{ data.info.CURRENCY === "1" ? "通用" : data.info.train_type_name }}
      </el-descriptions-item>
      <el-descriptions-item label="岗位培训类型">
        {{ data.info.post_type_name }}
      </el-descriptions-item>
      <el-descriptions-item label="课程图片">
        <img
          v-viewer
          :src="VITE_FILE_URL + data.info.CAPTURE"
          width="100"
          height="100"
          alt=""
        />
      </el-descriptions-item>
      <el-descriptions-item label="课程介绍">
        {{ data.info.CURRICULUMINTRODUCE }}
      </el-descriptions-item>
    </el-descriptions>
    <template v-for="(item, index) in data.chapterList" :key="index">
      <el-divider content-position="center">{{ item.NAME }}</el-divider>
      <el-divider content-position="left">视频课件</el-divider>
      <layout-table :data="item.xzVideoList" :show-pagination="false">
        <el-table-column
          show-overflow-tooltip
          prop="COURSEWARENAME"
          label="视频课件名称"
        >
          <template v-slot="{ row }">
            <el-button type="primary" text link @click="fnPreviewVideo(row)">
              {{ row.COURSEWARENAME }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="post_type_name"
          label="岗位培训类型"
        />
        <el-table-column
          show-overflow-tooltip
          prop="train_type_name"
          label="培训行业类型"
        />
        <el-table-column show-overflow-tooltip prop="CLASSHOUR" label="学时" />
        <el-table-column
          show-overflow-tooltip
          prop="COURSEWAREINTRODUCE"
          label="课件描述"
        />
        <el-table-column show-overflow-tooltip prop="SPEAKER" label="讲师" />
      </layout-table>
      <el-divider content-position="left">资料课件</el-divider>
      <layout-table :data="item.xzDataList" :show-pagination="false">
        <el-table-column
          show-overflow-tooltip
          prop="COURSEWARENAME"
          label="资料课件名称"
        >
          <template v-slot="{ row }">
            <el-button
              type="primary"
              text
              link
              @click="fnPreviewPdf(row.COURSEWAREFILES)"
            >
              {{ row.COURSEWARENAME }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="post_type_name"
          label="岗位培训类型"
        />
        <el-table-column
          show-overflow-tooltip
          prop="train_type_name"
          label="培训行业类型"
        />
        <el-table-column show-overflow-tooltip prop="CLASSHOUR" label="学时" />
        <el-table-column
          show-overflow-tooltip
          prop="COURSEWAREINTRODUCE"
          label="课件描述"
        />
        <el-table-column show-overflow-tooltip prop="SPEAKER" label="讲师" />
      </layout-table>
    </template>
    <layout-pdf
      :src="data.pdfDialog.src"
      v-model:visible="data.pdfDialog.visible"
    />
    <layout-video
      :src="data.videoDialog.src"
      :vid="data.videoDialog.vid"
      :play-auth="data.videoDialog.playAuth"
      v-model:visible="data.videoDialog.visible"
    />
  </layout-card>
</template>

<script setup>
import { reactive } from "vue";
import { useRoute } from "vue-router";
import LayoutPdf from "@/components/pdf/index.vue";
import LayoutVideo from "@/components/video/index.vue";
import useAliYunVideoPreview from "@/assets/js/useAliYunVideoPreview.js";
import { getCurriculumView } from "@/request/online_learn_exam.js";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const route = useRoute();
const { CURRICULUM_ID } = route.query;
const data = reactive({
  info: {},
  chapterList: [],
  pdfDialog: {
    src: "",
    visible: false,
  },
  videoDialog: {
    src: "",
    vid: "",
    playAuth: "",
    visible: false,
  },
});
const fnGetData = async () => {
  const resData = await getCurriculumView({ CURRICULUM_ID });
  if (resData) {
    data.info = resData.pd;
    data.chapterList = resData.chapterList;
  }
};
fnGetData();
const fnPreviewPdf = (FILEPATH) => {
  data.pdfDialog.visible = true;
  data.pdfDialog.src = FILEPATH;
};
const fnPreviewVideo = async (row) => {
  const { src, vid, playAuth, visible } = await useAliYunVideoPreview(row);
  data.videoDialog.src = src;
  data.videoDialog.vid = vid;
  data.videoDialog.playAuth = playAuth;
  data.videoDialog.visible = visible;
};
</script>

<style scoped lang="scss"></style>
