<template>
  <layout-card>
    <el-divider content-position="left">课件基本信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="课件名称">
        {{ data.info.COURSEWARENAME }}
      </el-descriptions-item>
      <el-descriptions-item label="培训类型">
        {{ data.info.TYPENAME }}
      </el-descriptions-item>
      <el-descriptions-item label="讲师名称">
        {{ data.info.SPEAKERNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="课件文件">
        {{ data.info.COURSEWARENAME }}
        <el-button type="primary" size="small" class="ml-10" @click="fnPreview">
          预览
        </el-button>
      </el-descriptions-item>
      <el-descriptions-item label="课件截图">
        <img
          v-viewer
          :src="data.info.VIDEOCAPTURE"
          alt=""
          width="100"
          height="100"
        />
      </el-descriptions-item>
      <el-descriptions-item label="课件描述">
        {{ data.info.COURSEWAREINTRODUCE }}
      </el-descriptions-item>
      <el-descriptions-item label="相关词条">
        {{ data.info.RELATEDTERMNAME }}
      </el-descriptions-item>
    </el-descriptions>
    <layout-video
      v-model:visible="data.videoDialog.visible"
      :src="data.videoDialog.src"
    />
  </layout-card>
</template>

<script setup>
import { reactive } from "vue";
import {
  getPreviewingVideo,
  getVideoCoursewareView,
} from "@/request/training_resource_management.js";
import { useRoute } from "vue-router";
import LayoutVideo from "@/components/video/index.vue";

const route = useRoute();
const { VIDEOCOURSEWARE_ID } = route.query;
const data = reactive({
  info: {},
  videoDialog: {
    visible: false,
    src: "",
  },
});
const fnGetData = async () => {
  const resData = await getVideoCoursewareView({ VIDEOCOURSEWARE_ID });
  data.info = resData.pd;
};
fnGetData();
const fnPreview = async () => {
  const resData = await getPreviewingVideo({
    VIDEOCOURSEWARE_ID: data.info.VIDEOCOURSEWARE_ID,
    VIDEOFILES: data.info.VIDEOFILES,
  });
  data.videoDialog.src = JSON.stringify(resData.urlList);
  data.videoDialog.visible = true;
};
</script>

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