<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.TYPENAME }}
      </el-descriptions-item>
      <el-descriptions-item label="课程描述">
        {{ data.info.CURRICULUMINTRODUCE }}
      </el-descriptions-item>
      <el-descriptions-item label="课程封面">
        <img
          v-viewer
          :src="VITE_FILE_URL + data.info.COVERPATH"
          alt=""
          width="100"
          height="100"
        />
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">课程目录</el-divider>
    <el-tree
      :data="data.chapterList"
      :props="{ children: 'nodes', label: 'COURSEWARENAME' }"
      class="directory_style"
      default-expand-all
    >
      <template #default="{ data: item }">
        <div class="directory_row">
          <el-icon
            v-if="item.COURSEWARENAME"
            class="el-icon-video-camera"
            size="18"
          >
            <video-camera />
          </el-icon>
          <span class="directory_name">
            {{ item.NAME || item.COURSEWARENAME }}
          </span>
          <span v-if="item.COURSEWARENAME" class="directory_type">
            课件时长：{{ secondConversion(item.VIDEOTIME) }}
          </span>
          <el-button
            v-if="item.COURSEWARENAME"
            type="primary"
            size="small"
            @click="fnPreview(item.VIDEOCOURSEWARE_ID, item.VIDEOFILES)"
          >
            预览
          </el-button>
        </div>
      </template>
    </el-tree>
    <layout-video
      v-model:visible="data.videoDialog.visible"
      :src="data.videoDialog.src"
    />
  </layout-card>
</template>

<script setup>
import { useRoute } from "vue-router";
import {
  getCourseManagementView,
  getPreviewingVideo,
} from "@/request/training_resource_management.js";
import { reactive } from "vue";
import { secondConversion } from "@/assets/js/utils.js";
import { VideoCamera } from "@element-plus/icons-vue";
import LayoutVideo from "@/components/video/index.vue";

const route = useRoute();
const { CURRICULUM_ID } = route.query;
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const data = reactive({
  info: {},
  chapterList: [],
  videoDialog: {
    visible: false,
    src: "",
  },
});
const fnGetData = async () => {
  const resData = await getCourseManagementView({ CURRICULUM_ID });
  data.info = resData.pd;
  data.chapterList = resData.chapterList;
};
fnGetData();
const fnPreview = async (VIDEOCOURSEWARE_ID, VIDEOFILES) => {
  const resData = await getPreviewingVideo({
    VIDEOCOURSEWARE_ID,
    VIDEOFILES,
    CURRICULUM_ID,
  });
  data.videoDialog.src = JSON.stringify(resData.urlList);
  data.videoDialog.visible = true;
};
</script>

<style scoped lang="scss">
.directory_style {
  font-size: 14px;
  margin-bottom: 20px;

  .el-icon-video-camera {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }

  .directory_row {
    .directory_name {
      width: 260px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .directory_type {
      width: 200px;
      display: inline-block;
      vertical-align: middle;
    }
  }
}
:deep {
  .el-tree-node__content {
    margin-bottom: 10px;
    height: auto;
  }
}
</style>
