<template>
<el-container>
  <el-header style="height: 80px;padding: 0">
     <el-row class="biaotou">
     <el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" >
         检验管理部培训视频
  </el-col>

</el-row> 


  </el-header>
   <el-main style="margin-top: 70px;">
     <div style="margin:1% 12.5%;">
    <div class="content" @click="clicknub">
        <video :id="tcPlayerId" width="1000" height="500"   class="tencent-player" preload="auto" playsinline webkit-playsinline></video>
   
    </div>
     <div  style="margin-top: 40px;">
          <el-row :gutter="20">
          <el-col >
            <div style="margin-bottom: 6px">
              <span class="term">视频名称：</span>
              <span class="desc"> {{ video.name }}</span>
            </div>
          </el-col>
           </el-row> 
          <el-row :gutter="20">
             <el-col >
            <div style="margin-bottom: 6px">
              <span class="term">视频描述：</span>
              <span class="desc"> {{ video.description }}</span>
            </div>
          </el-col>
          </el-row>  
           <el-row :gutter="20">
             <el-col >
            <div style="margin-bottom: 6px">
              <span class="term">视频总播放量：</span>
              <span class="desc"> {{ video.views }}</span>
            </div>
          </el-col>
          </el-row>     

    </div>
    </div>
    
   </el-main>
</el-container>
</template>

<script>
 import {getVideo,getMyView} from "@/api/video";
function loadTcScript(cb) {
    loadScript(cb, {
        id: 'tcPlayerScriptId',
        url: 'https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
    });
}
function loadScript(cb, obj) {
    if (document.getElementById(obj.id)) {
        cb();
    } else {
        const script = document.createElement('script');
        script.async = true;
        script.src = obj.url;
        script.id = obj.id;
        script.onload = () => {
            cb();
        };
        document.body.appendChild(script);
    }
}

export default {
    name: 'TencentPlayer',
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            tcPlayerId : 'tcPlayer' + Date.now(),
            player: null,
            video:{id: 0},
            description:'',
            name:'',
        };
    },
    watch: {
        options: {
            handler(newV, oldV) {
                this.$nextTick(() => {
                    this.loadJS();
                });
            },
            immediate: true,
            deep: true,
        }
    },
    created() {
    this.id = this.$route.params.id;
    this.fileid = this.$route.params.fileid;
    this.getVideo();
  },
    methods: {
       getVideo(){
             getVideo(this.id).then((response) => {
          
        if (response.data) {
         
          this.video= response.data;
        }
        this.listLoading = false;
      });
       },
       //视频观看次数
       clicknub()
       {
            getMyView(this.id).then((response) => {
          
      });
       },
        loadJS() {
            if (window.TCPlayer) {
                this.initVideo();
            } else {
                loadTcScript(() => {
                    this.initVideo();
                });
            }
        },
        initVideo() {
            const playerParm = {
                fileID: this.fileid,
                appID: '1253484223',
                 plugins:{
      ContinuePlay: { // 开启续播功能
        // auto: true, //[可选] 是否在视频播放后自动续播
        // text:'上次播放至 ', //[可选] 提示文案
        // btnText: '恢复播放' //[可选] 按钮文案
      },}
               
            };
            setTimeout(() => {
                if (!this.player) {
                    this.player = TCPlayer(this.tcPlayerId, playerParm);
                } else {
                    this.player.loadVideoByID(playerParm);
                }
            });
        }
        ,
      
    },
};
</script>
<style lang="scss" scoped>

@import url("https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css");

.el-header, .el-footer {
   
    color: #333;
    text-align: center;
    line-height: 40px;
    position: fixed;
    width: 100%;
    z-index: 1010;
  }
  .biaotou{
    background: url(../../assets/year-100-bg.png) no-repeat 50%,linear-gradient(90deg,#e95353 50%,#bf2221 0);
    box-shadow: none;
    height: 72px;
}

</style>