<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;">
          {{ video.name }}
        </el-col>
      </el-row>
    </el-header>
    <el-main style="margin-top: 70px;">
      <div style="margin:20px 12%;">
        <div class="content" @click="clicknub">
          <video
            :id="tcPlayerId"
            width="1000"
            height="500"
            class="tencent-player"
            preload="auto"
            playsinline
            webkit-playsinline
          >
          </video>
          <span id="userName">用户：{{userName}}</span>
        </div>
        <div class="videoDetailWrap">
          <el-col class="firstLineDetail">
            <div class="firstLineText">{{ video.name }}</div>
            <div>
              <el-button class="firstLineBtn" type="error" icon="el-icon-view">{{video.views}}</el-button>
              <el-button class="firstLineBtn" type="error" icon="el-icon-s-custom">{{video.viewsp}}</el-button>
            </div>
          </el-col>
          <div style="font-size: 15px">
            <span>视频描述：{{ video.description }}</span>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
  import {getVideo, getMyView, getVideoPlayCode} from "@/api/video";
  export default {
    name: 'TencentPlayer',
    props: {
      options: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        tcPlayerId: 'tcPlayer' + Date.now(),
        player: null,
        videoFileId: '',
        videoAppId: '1253484223',
        videoPsign: '',
        video: {id: 0},
        description: '',
        name: '',
        videoFileid:false,
        userName:""
      };
    },
    mounted(){
      //debugger;
      this.userName = this.$store.state.user.name;
      if(this.player!==null){
        this.player.null;
      }
      if(this.$route.params.id){
        this.id = this.$route.params.id;
        this.videoFileId = this.$route.params.fileid;
        let videoId = sessionStorage.getItem('videoId');
        let videoFileId = sessionStorage.getItem('videoFileId');
        if(videoId){
          sessionStorage.removeItem('videoId');
          sessionStorage.setItem('videoId',this.$route.params.id);
        }else{
          sessionStorage.setItem('videoId',this.$route.params.id);
        }
        if(videoFileId){
          sessionStorage.removeItem('videoFileId');
          sessionStorage.setItem('videoFileId',this.$route.params.fileid);
        }else{
          sessionStorage.setItem('videoFileId',this.$route.params.fileid);
        }
      }else{
        this.id =  sessionStorage.getItem('videoId');
        this.videoFileId = sessionStorage.getItem('videoFileId');
      }
      this.getPlayCode(this.videoFileId);
      this.getVideo();
    },

    methods: {
      getVideo() {
        getVideo(this.id).then((response) => {
          if (response.data) {
            this.video = response.data;
          }
          this.listLoading = false;
        });
      },
      getPlayCode(id){
        let that = this;
        getVideoPlayCode(id).then(res=>{
          if(res.data){
            //debugger;
            console.log(res.data);
            that.videoFileid = true;
            that.videoPsign = res.data.psign;
            that.initVideo();
          }
        })
      },
      //视频观看次数
      clicknub() {
        debugger;
        getMyView(this.id).then((response) => {});
      },
      initVideo() {
        //debugger;
        console.log(this.userName);
        let that = this;
        let text = "用户："+that.userName;
        const playerParm = {
          fileID: that.videoFileId,
          appID: that.videoAppId,
          psign: that.videoPsign,
          plugins:{
            DynamicWatermark: {
              speed: 0.1,
              content: "用户："+that.userName
            }
          }
        };
        /*
        * plugins: {
            ContinuePlay: { // 开启续播功能
              // auto: true, //[可选] 是否在视频播放后自动续播
              // text:'上次播放至 ', //[可选] 提示文案
              // btnText: '恢复播放' //[可选] 按钮文案
            },
          }
        * */
        //debugger;
        if (!that.player) {
          that.player = window.TCPlayer(that.tcPlayerId, playerParm);
          that.player.on('play', function(error) {
            // 做一些处理
            getMyView(that.id).then((response) => {});
          });
        } else {
          that.player.loadVideoByID(playerParm);
          that.player.loadVideoByID(that.tcPlayerId);
        }
      },
    },
    beforeDestroy () {
      this.player.dispose()
    }
  };
</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;
  }
  .content{
    position: relative;
  }

  #userName {
    display: inline-block;
    position: absolute;
    top: 9px;
    left: 70px;
    font-size: 14px;
    z-index: 10000;
    color: #ffffff;
    padding: 5px 12px;
    background: rgba(0,0,0,.3);
    border-radius: 15px;
    box-shadow: 0 0 5px 1px #aba8a3;
  }
  .tencent-player{
    width: 100%;
  }
  .videoDetailWrap{
    margin-top: 20px;
    font-family:'Microsoft Yahei'
  }
  .firstLineDetail{
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between
  }
  .firstLineText{
    font-size: 16px;
    font-weight: bold;
  }
  .firstLineBtn{
    background:none;
    font-size: 14px;
    padding: 5px 10px;
    color:#e74e4e;
    border: 1px solid #e74e4e;
    border-radius: 15px;
  }
</style>
