<template>
  <div>
    <div class="app-container">
      <div class="detail-structure">
        <el-page-header content="详情页面" @back="goBack"/>
        <!--        <div class="detail-container">-->
        <div class="level-title mt-20">
          <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.CURRICULUMINTRODUCE }}</td>
            </tr>
          </table>
        </div>
        <el-tree
          :data="chapterList"
          :props="{children: 'nodes', label: 'COURSEWARENAME'}"
          class="course-management-tree"
          default-expand-all>
          <span slot-scope="{ node, data }" style="flex: 1">
            <div style="display: flex;align-items: center;justify-content: space-between;">
              <div style="flex: 1">
                <i v-if="data.COURSEWARENAME" class="el-icon-video-camera"/>
                <span>{{ data.NAME || data.COURSEWARENAME }}</span>
              </div>
              <div>
                <span v-if="data.COURSEWARENAME" style="margin-left: 200px;margin-right: 50px">课件时长：{{ secondsCount(data.VIDEOTIME) }}</span>
                <el-button v-if="data.COURSEWARENAME" type="primary" size="mini" @click="goViewVideo(data)">预览</el-button>
              </div>
            </div>
          </span>
        </el-tree>
        <div class="detail_foot">
          <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        </div>
        <!--        </div>-->
      </div>
    </div>
    <el-dialog
      :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: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      requestFN(
        '/videoRes/goEdit',
        { CURRICULUM_ID: this.$parent.CURRICULUM_ID }
      ).then((data) => {
        this.pd = data.pd
        this.chapterList = data.chapterList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goViewVideo(row) {
      requestFN(
        '/videoRes/getVideoPlayAuth',
        {
          VIDEOCOURSEWARE_ID: row.VIDEOCOURSEWARE_ID,
          CURRICULUM_ID: this.$parent.CURRICULUM_ID
        }
      ).then((data) => {
        if (data.result == 'success') {
          this.dialogViewVideo = true
          const video = {}
          data.responseBody.videoList.map(item => {
            video[item.definition] = item.playURL
          })
          console.log(video)
          this.$nextTick(() => {
            // eslint-disable-next-line no-undef
            this.player = new Aliplayer({
              id: 'aLiVideoPlayer',
              source: JSON.stringify(video),
              width: '100%',
              height: '500px',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'QualityComponent',
                type: window.AliPlayerComponent.QualityComponent,
                args: [function(definition, desc) {
                  console.log(definition + '-----' + desc)
                }]
              }]

            }, function(player) {
              console.log('The player is created')
              player.on('sourceloaded', function(params) {
                var paramData = params.paramData
                var desc = paramData.desc
                var definition = paramData.definition
                player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
              })
            })
          })
        }
      }).catch((e) => {
      })
    },
    closePlay() {
      this.$refs.videoPlayer.player.pause()
    },
    secondsCount(second) {
      if (!second) return 0
      const h = parseInt(second / 60 / 60 % 24, 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 + '秒'
        }
      }
    },
    // 返回
    goBack() {
      this.$parent.activeName = 'List'
    }
  }
}
</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>
