<template>
  <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="detail_view">
          <table class="table-ui">
            <tr>
              <td class="tbg">课件名称</td>
              <td>{{ form.COURSEWARENAME }}</td>
            </tr>
            <tr>
              <td class="tbg">课时</td>
              <td>{{ form.CLASSHOUR }}</td>
            </tr>
            <tr>
              <td class="tbg">视频时长</td>
              <td>{{ secondsCount(form.VIDEOTIME) }}</td>
            </tr>
            <tr>
              <td class="tbg">教师名称</td>
              <td>{{ form.TEACHERNAME }}</td>
            </tr>
            <tr>
              <td class="tbg">课件文件</td>
              <td><a class="a_link" @click="goViewVideo(form)">{{ form.COURSEWARENAME }} [视频预览]</a></td>
            </tr>
            <tr>
              <td class="tbg">课件截图</td>
              <td>
                <div class="img16b9">
                  <img :src="form.VIDEOCAPTURE" width="100%" alt="">
                </div>
              </td>
            </tr>
            <tr>
              <td class="tbg">课件描述</td>
              <td>{{ form.COURSEWAREINTRODUCE }}</td>
            </tr>
          </table>
        </div>

        <div class="detail_foot">
          <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        </div>
      </div>
    </div>

    <el-dialog v-show="dialogViewVideo" :visible.sync="dialogViewVideo" title="视频" width="800px" @close="closePlayer">
      <div id="aLiVideoPlayer" class="prism-player"/>
    </el-dialog>
  </div>
</template>

<script>

import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import SelectTree from '@/components/SelectTree'
export default {
  components: { Pagination, videoPlayer, SelectTree },
  directives: { waves },
  data() {
    return {
      form: {},
      dialogViewVideo: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.dialogType = 'info'
      requestFN(
        '/videoRes/goVideoEdit',
        {
          VIDEOCOURSEWARE_ID: this.$parent.VIDEOCOURSEWARE_ID
        }
      ).then((data) => {
        this.form = Object.assign({}, data.pd) // copy obj
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goViewVideo(row) {
      requestFN(
        '/videoRes/syncVideoPlayInfo',
        {
          VIDEOCOURSEWARE_ID: row.VIDEOCOURSEWARE_ID,
          TYPE: '1'
        }
      ).then((data) => {
        if (data.result == 'success') {
          this.dialogViewVideo = true
          this.$nextTick(() => {
            // 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) => {
      })
      // const type = row.VIDEOFILES.slice(row.VIDEOFILES.lastIndexOf('.') + 1)
      // this.playerOptions.sources[0].src = this.serverurl + row.VIDEOFILES
      // this.playerOptions.poster = this.serverurl + row.VIDEOCAPTURE
      // this.playerOptions.sources[0].type = 'video/' + type
    },
    closePlayer() {
      this.player.dispose()
    },

    goBack() {
      this.$parent.activeName = 'List'
    },
    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 + '秒'
        }
      }
    }
  }
}
</script>
<style lang="scss">
html{
  touch-action:none;
}
.hide .el-upload--picture-card {
  display: none;
}

.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.6);
  .el-progress__text{
    color: #fff;
  }
  .progress_title{
    position: relative;
    top: 35%;
    color: #e8e8e8;
    left:44.7%;
    text-shadow:#000 1px 1px 2px
  }
  .progress {
    position: relative;
    top: 37%;
    color: #fff;
    left:46%;
    // margin: auto;
  }
}
</style>
<style lang="sass" scoped>
.el-row
  margin-bottom: 16px
  &:last-child
    margin-bottom: 0
    .form-group
      display: flex
      align-items: center
      margin-right: 20px
      .form-label
        padding: 9px 15px
        font-size: 14px
        width: 240px
        font-weight: 400
        line-height: 20px
        text-align: right
        margin-bottom: 0
        .star
          color: red
          padding-right: 4px
      .input-block
        flex: 1
        min-height: 36px
        position: relative

.disContent
  padding: 0 20px
  display: flex
  align-items: center
  flex-wrap: wrap
  .img-div
    position: relative
    margin: auto 10px 10px 10px
    width: 120px
    height: 120px
    border-radius: 4px
    &>img
      width: 100%
      height: 100%

    .disContent-hide
      position: absolute
      width: 100%
      height: 100%
      border-radius: 4px
      background-color: rgba(48, 48, 48, 0.59)
      display: none
      top: 0
      left: 0

      .Delete
        position: absolute
        bottom: 14px
        right: 10px
        font-size: 16px
        color: white
        cursor: pointer

        .editCss
          .Delete
            font-size: 16px
            right: 90px

      .yuLan
        position: absolute
        bottom: 23px
        right: 50px
        font-size: 16px
        color: white
        cursor: pointer

      .yuLanImg
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        height: 100%
        opacity: 0

  .img-div:hover .disContent-hide
    display: block

  .pitchCss
    border: 1px solid #202e78
    transition: all linear 0.1s
    width: 116px
    height: 116px
</style>
