<template>
  <el-container>
    <el-header style="height: 80px;padding: 0;position: absolute;">
      <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;">
      <el-row>
        <el-col :sm="24" :lg="15" :xl="13">
          <div style="margin:20px;">
        <div class="content">
          <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_n}}</el-button>
              <el-button class="firstLineBtn" type="error" icon="el-icon-s-custom">{{video.viewsp_n}}</el-button>
            </div>
          </el-col>
          <div style="font-size: 15px">
            <span>视频描述：{{ video.description }}</span>
          </div>
        </div>
      </div>
        </el-col>
        <el-col :sm="24" :lg="9" :xl="11">
          <div style="margin:20px;height:calc(100% - 140px);">
        <p class="firstLineText">观看记录：</p>
        <div class="viewRecordList">
          <div class="viewRecordItemWrap" v-for="item in recordList" :key="item.id" 
            @click="recordItemPlay(item.video)">
            <div class="recordName" v-if="item.video_"><span>{{item.video_.name}}</span></div>
            <div class="viewInfo">上次观看时间：<span class="viewInfo_tiem">{{item.update_time}}</span></div>
            <div class="viewInfo">上次观看进度：<span class="viewInfo_current">{{item.current}}</span></div>
          </div>
        </div>
      </div></el-col>
      </el-row>
      
     
    </el-main>
  </el-container>
</template>
<script>
  import {getVideo,videoStart,myViewItem, myView,getMyView,refreshViewItem, getVideoPlayCode,viewItemComplete} 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: '',
        userName:"",
        playTimer:null,
        isFirstView:true,
        id:'',
        videoViId:'',
        recordList:[],
      };
    },
    mounted(){
      this.userName = this.$store.state.user.name;
      if(this.player!==null){
        this.player.null;
      }
      if(this.$route.query.id){
        this.id = this.$route.query.id;
        let videoId = sessionStorage.getItem('videoId');
        if(videoId!==undefined&&videoId!==null&&videoId!==''){
          sessionStorage.removeItem('videoId');
          sessionStorage.setItem('videoId',this.$route.params.id);
        }else{
          sessionStorage.setItem('videoId',this.$route.params.id);
        }
      }else{
        this.id =  sessionStorage.getItem('videoId');
      }
      this.getVideo();
      this.clicknub();
      this.getMyVideoView();
    },
    
    methods: {
      //获取视频详情
      getVideo() {
        let that = this;
        getVideo(that.id).then((response) => {
          if (response.data) {
            that.video = response.data;
            that.videoFileId = response.data.fileid;
            that.getPlayCode(response.data.fileid);
          }
          that.listLoading = false;
        });
      },
      //获取饿哦的观看记录
      getMyVideoView() {
        let that = this;
        myViewItem().then((response) => {
          if (response.data) {
            that.recordList = response.data.results;
            // debugger;
            console.log(that.recordList)
          }
        });
      },
      //获取播放码
      getPlayCode(id){
        let that = this;
        getVideoPlayCode(id).then(res=>{
          if(res.data){
            that.videoPsign = res.data.psign;
            that.initVideo();
          }
        })
      },
      //视频观看次数
      clicknub() {
        myView(this.id).then((response) => {
          // debugger;
          console.log(response.data);
        });
      },
      //初始化视频播放器
      initVideo() {
        let that = this;
        getMyView(that.id,{}).then((response) => {
          // debugger;
          // console.log(response.data);
          let current = response.data.current;
          let playerParm = {
            fileID: that.videoFileId,
            appID: that.videoAppId,
            psign: that.videoPsign,
            plugins:{
              DynamicWatermark: {
                speed: 0.1,
                content: "用户："+that.userName
              },
            },
            controlBar:{
              playbackRateMenuButton:false
            },
          };
          if (!that.player) {
            that.player = window.TCPlayer(that.tcPlayerId, playerParm);
          } else {
            that.player.loadVideoByID(playerParm);
            that.player.loadVideoByID(that.tcPlayerId);
          }
          that.player.currentTime(current);
          //视频播放
          that.player.on('play', function(error) {
            // debugger;
            if(that.playTimer!==null){
              clearInterval(that.playTimer);
              that.playTimer = null;
            }
            if(that.isFirstView){
                that.isFirstView = false;
                videoStart(that.id).then(ews=>{
                  // debugger;
                  that.videoViId = ews.data.vi;
                })
              }
            that.playTimer = setInterval(function(){
              let currentTimeNum = 0;
              currentTimeNum =  that.player.currentTime();
              refreshViewItem(that.videoViId,{current:currentTimeNum,seconds:10})
              .then((response) => {})
              .catch(response=>{
                debugger;
                clearInterval(that.playTimer);
                  that.playTimer = null;
                  that.player.pause();
              });
            },10000)
          });
           //视频暂停
          that.player.on('pause', function(error) {
            let currentTimeNum = 0;
            currentTimeNum =  that.player.currentTime();
            refreshViewItem(that.videoViId,{current:currentTimeNum,seconds:0}).then((response) => {
              
            });
            clearInterval(that.playTimer);
            that.playTimer = null;
          });
          //视频观看中
          that.player.on('playing', function(error) {

          });
          //视频播放已结束时触发,此时 currentTime 值等于媒体资源最大值。
          that.player.on('ended', function(error) {
            viewItemComplete(that.videoViId).then(res=>{
            })
          });
        });
      },
      recordItemPlay(id){
      debugger;
      let routeData = this.$router.resolve({ 
          path: "/test/index",
            query: { 
              id: id
            }
        });
	
        //必要操作，否则不会打开新页面
        window.open(routeData.href, '_blank');  
    },
    },
    beforeDestroy () {
      let that = this;
      if(that.playTimer!==null){
        clearInterval(that.playTimer);
        that.playTimer = null;
      }
      that.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: absolute;
    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;
  }
  .viewRecordList{
    display: flex;
    flex-direction: column;
  }
  .viewRecordItemWrap{
    margin: 10px 0;
    padding: 5px 0;
    border-bottom: 1px solid #dddddd;
  }
  .recordName{
    font-size: 15px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px;
  }
  .viewInfo{
    font-size: 14px;
    color: #a2a2a2;
    padding-bottom: 5px;
  }
  .viewInfo_tiem{
    color:#6090e6
  }
  .viewInfo_current{
    color:#86c793
  }
</style>
