<template>
  <!--  课程列表点查看-->
  <div>
    <div class="app-warp">
      <div class="detail-structure">
        <el-page-header content="详情页面" @back="goBack"/>
        <div class="detail-container">
          <div class="level-title">
            <h1>课程基本信息</h1>
          </div>
          <div class="mb-20">
            <table class="table-ui">
              <tr>
                <td class="tbg">课程名称</td>
                <td colspan="3">{{ pd.CURRICULUMNAME }}</td>
              </tr>
              <tr>
                <td class="tbg">培训类型</td>
                <td colspan="3">
                  {{ pd.TYPENAME }}
                </td>
              </tr>
              <tr>
                <td class="tbg">课程描述</td>
                <td colspan="3">{{ pd.CURRICULUMINTRODUCE }}</td>
              </tr>
              <tr>
                <td class="tbg">课程封面</td>
                <td colspan="3">
                  <viewer :images="imgs">
                    <img v-for="item in imgs" :src="config.fileUrl + item.COVERPATH" :key="item.COVERPATH" width="100" height="100">
                  </viewer>
                </td>
              </tr>
            </table>
          </div>
          <div class="level-title">
            <h1>总学时</h1>
          </div>
          <div class="mb-20">
            <table class="table-ui">
              <tr>
                <td class="tbg">所选课件总学时</td>
                <td colspan="3">{{ selectClassHour==0?selectClassHour:selectClassHour.toFixed(1) }}</td>
              </tr>
              <tr>
                <td class="tbg">所选课件视频总时长</td>
                <td colspan="3">{{ secondsCount(selectVideoTime) }}</td>
              </tr>
              <tr>
                <td class="tbg">课程总学时</td>
                <td colspan="3">{{ pd.CLASSHOUR }}</td>
              </tr>
              <tr>
                <td class="tbg">课程视频总时长</td>
                <td colspan="3">{{ secondsCount(pd.VIDEOTIME) }}</td>
              </tr>
            </table>
          </div>
          <el-tree
            :data="chapterList"
            :props="{children: 'nodes', label: 'COURSEWARENAME'}"
            class="course-management-tree"
            default-expand-all>
            <template slot-scope="{ node, data }">
              <div style="flex:1;display:flex;justify-content: space-between;align-items: center">
                <div style="flex:1;display:flex;justify-content: space-between;align-items: center;margin-right: 50px">
                  <div>
                    <i v-if="data.COURSEWARENAME" class="el-icon-video-camera"/>
                    <span>{{ data.NAME || data.COURSEWARENAME }}</span>
                  </div>
                  <div>
                    <span v-if="data.COURSEWARENAME" style="display: inline-block;width: 200px;margin-left: 200px;">
                      课件时长：{{ secondsCount(data.VIDEOTIME) }}
                    </span>
                  </div>
                </div>
                <div>
                  <el-button v-if="data.COURSEWARENAME" type="primary" size="mini" @click="goViewVideo(data)">预览</el-button>
                </div>
              </div>
            </template>
          </el-tree>
          <div class="detail_foot">
            <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-show="dialogViewVideo"
      :visible.sync="dialogViewVideo"
      title="视频"
      width="800px"
      @close="player.dispose()">
      <div id="aLiVideoPlayer" class="prism-player"/>
    </el-dialog>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'

export default {
  data() {
    return {
      dialogViewVideo: false,
      pdfUrl: '',
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
      config: config,
      pd: [],
      chapterList: [],
      player: {},
      imgs: [],
      selectClassHour: 0,
      selectVideoTime: 0
    }
  },
  inject: ['parentObj', 'setActiveName'],
  created() {
    this.getData()
  },
  methods: {
    getData() {
      requestFN(
        '/classCurriculum/goEdit',
        { CLASSCURRICULUM_ID: this.parentObj.CLASSCURRICULUM_ID }
      ).then((data) => {
        this.pd = data.pd
        if (data.pd.COVERPATH) {
          this.imgs = [{ 'COVERPATH': data.pd.COVERPATH }]
        }
        this.chapterList = data.chapterList
        this.sumSelectTime(data.chapterList)
      }).catch((e) => {
        this.listLoading = false
      })
    },
    sumSelectTime(data) {
      data.map((item, index) => {
        this.selectClassHour += Number(item.CLASSHOUR || 0)
        this.selectVideoTime += Number(item.VIDEOTIME || 0)
        if (item.nodes && item.nodes.length > 0) {
          this.sumSelectTime(item.nodes)
        }
      })
    },
    goViewVideo(row) {
      requestFN(
        '/videocourseware/getPlayInfo',
        {
          VIDEOCOURSEWARE_ID: row.VIDEOCOURSEWARE_ID,
          CURRICULUM_ID: row.CURRICULUM_ID,
          VIDEOFILES: row.VIDEOFILES,
          DOMAIN_NAME: window.location.hostname

        }
      ).then((data) => {
        if (data.result == 'success') {
          this.dialogViewVideo = true
          this.$nextTick(() => {
            if (this.player) {
              this.player = null
            }
            // eslint-disable-next-line no-undef
            this.player = new Aliplayer({
              id: 'aLiVideoPlayer',
              source: JSON.stringify(data.urlList),
              width: '100%',
              height: '500px',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'QualityComponent',
                // eslint-disable-next-line no-undef
                type: AliPlayerComponent.QualityComponent,
                args: [function(definition, desc) {
                  console.log(definition + '-----' + desc)
                }]
              }]
            }, function(player) {
              console.log('The player is created')
              /* Register the sourceloaded of the player, query the resolution of the video, invoke the resolution component, and call the setCurrentQuality method to set the resolution. */
              player.on('sourceloaded', function(params) {
                var paramData = params.paramData
                var desc = paramData.desc
                var definition = paramData.definition
                player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
              })
            })
          })
        } else {
          this.$message.warning(data.message)
        }
      }).catch((e) => {
      })
    },
    closePlay() {
      this.$refs.videoPlayer.player.pause()
    },
    // 返回
    goBack() {
      if (this.parentObj.TYPE === 'add') {
        this.setActiveName('CourseList')
      } else {
        this.setActiveName('ClassDetailsList')
      }
    },

    secondsCount(second) {
      if (!second) return 0
      const h = parseInt(second / 60 / 60, 10)
      const m = parseInt(second / 60 % 60, 10)
      const s = parseInt(second % 60, 10)
      if (h) {
        return h + '小时' + m + '分钟' + s + '秒'
      } else {
        if (m) {
          return m + '分钟' + s + '秒'
        } else {
          return s + '秒'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table-ui {
  td {
    line-height: 34px;
  }

  .tbg {
    width: 200px;
  }

  .img-flex {
    display: flex;
  }

  .img-ui {
    width: 110px;
    height: 110px;
    margin-right: 20px;

    & img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style lang="scss">
.course-management-tree {
  padding: 20px;
  .el-tree-node{
    padding: 10px 0;
  }
}
</style>
