<template>
  <div>
    <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      @pause="onPlayerPause($event)"
      @play="onPlayerStart($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @ready="playerReadied"
      @ended="onPlayerEnded($event)"
      :globalOptions="{controls:true}"
      :options="options">
    </video-player>

  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import md5 from 'js-md5';
  import {videoPlayer } from 'vue-video-player';
  import 'video.js/dist/video-js.css'
  import { MessageBox } from "element-ui";
  export default {
    name: "Index",
    data() {
      return {
        timer: false,
        tickNum: 0,
        prevTime:0,
        playRate:1,
        isReady:false,
        onPlay: false
      }
    },
    components: {
      videoPlayer
    },
    watch:{
      dialog( showDilog ){
        if( !showDilog){
          this.doPause()
          this.isReady = false
        }
      }
    },
    props: {
      media:{
        type: Object,
        default: ()=>{
          return {id: '', percent:0}
        }
      },
      dialog:{
        type: Boolean,
        default: true
      },
      reloadPosition:{
        type: Number,
        default: 0
      },
      options: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer); //关闭
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    created() {
      this.timer = setInterval(this.tick, 5 * 1000);
      // this.startMonitor();
    },
    methods: {
      playerReadied(player) {
        if( !this.isReady ){
          this.setposition( this.media.position );
        }
        // if( this.media.playRate>0 ){
        //   this.playRate = 1 + (+this.media.playRate/100);
        //   player.playbackRate(this.playRate)
        // }
        this.isReady = true
      },
      onPlayerTimeupdate( player ){
        let curTimes = player.cache_.currentTime;
        if( curTimes > this.media.position+15  && !this.media.isFinish ){
          player.currentTime( this.media.position );
          return;
        }
      },
      setposition( position ) {
        if( position > this.media.duration) position = this.media.duration;
        if( !this.media.isFinish ){
          let player = this.$refs.videoPlayer.player;
          player.currentTime( position );
        }
        console.log("setposition", position, this.media.duration, this.media.isFinish)
        if( this.media.position >= this.media.duration-30 && !this.media.isFinish){
          this.tick( true )
        }
        this.onPlay = true
      },
      onPlayerPause(event) {
        this.onPlay = false
      },
      onPlayerEnded( event ){
        this.tick( true )
      },
      doPause( ){
        console.log( "pause" )
        let myPlayer = this.$refs.videoPlayer.player;
        myPlayer && myPlayer.pause()
        this.onPlay = false
      },
      doPlay(){
        console.log( "doPlay" )
        if( !this.$refs.videoPlayer || !this.$refs.videoPlayer.player ) return;
        if( !this.dialog ) return this.doPause();
        let myPlayer = this.$refs.videoPlayer.player;
        if(myPlayer){
          myPlayer.play()
          // myPlayer.playbackRate(this.playRate)
        }
        this.tickNum = 0
        this.onPlay = true
      },
      onPlayerStart() {
        this.onPlay = true
      },
      startMonitor() {
        let that = this
        window.onblur = function() {
          that.doPause()
        }
        window.onfocus = function () {
          that.doPlay()
        }
      },
      tickWait(){
        this.doPause()
        let that = this
        MessageBox({
          title: "连续学习超15分钟",
          message: "是否继续学习",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              that.doPlay();
              done();
            } else{
              done();
            }
          }
        })
      },
      tick( force = false) {
        let media = this.media;
        this.tickNum ++
        // 已经完成
        if( this.media.isFinish )  return;

        // 主动暂停
        let myPlayer = this.$refs.videoPlayer.player;
        let curTimes = parseInt(myPlayer.currentTime());
        // 后退无心跳
        if( this.media.position > curTimes && !force ) return;

        let isFinish = force?1:0
        if( curTimes >= media.duration ) isFinish = 1;

         //  拉到后面
        if( !isFinish ){
          if ( !this.onPlay ) return;
          // if( curTimes < media.position ) return this.setposition(media.position )
        }
        // 强制完成
        let param ={id: media.id, position:curTimes ,isFinish};
        httpServer("course.tick", param, true).then( res => {
          if (res.code == 200) {
            let {skip, position, pause} = res.data
            if( pause ) {
              this.doPause();
              this.$emit("close")
              return
             }
            if( !skip ) this.setposition( position );
            Object.assign(param, res.data )
            this.$emit("update", param )
          }
        }).catch( res =>{
          console.log( "tick", res)
        })
      }
    }
  }
</script>

<style>
  .video-js{
    .vjs-control-bar{
      .vjs-icon-custombutton {
        font-family: VideoJS;
        font-weight: normal;
        font-style: normal;
       }
      .vjs-icon-custombutton:before {
        content: "\f108";
        font-size: 1.8em;
        line-height: 1.67;
      }
    }
  }
  .p-process{
    width: 100%;
    margin:20px auto;
    height: 30px;
  }
</style>
