<template>
  <div class="weixin-body">

    <div class="weixin-content-box">
      <div class="weixin-title">{{media.name|| tpl.name}}</div>
      <div class="weixin-content">
        <video-player
          id="myVideo1"
          ref="videoPlayer"
          :playsinline="true"
          @pause="onPlayerPause($event)"
          @timeupdate="onPlayerTimeupdate($event)"
          @play="onPlayerStart($event)"
          @ready="playerReadied"
          @canplay="canpay($event)"
          @ended="onPlayerEnded($event)"
          :globalOptions="{controls:true}"
          :options="options">
        </video-player>
        <div style="font-size: 16px;; margin: 10px auto;text-align: center;">
          <span>{{curTimes|useTime}}</span>
          <strong>/</strong>
          <span>{{media.duration|useTime}}</span>
          <span v-if="media.isFinish==1" style="color: green;">已完成</span>
        </div>

      </div>
    </div>

    <!-- <div  style="width: 100%; margin: 0px auto;"> -->
    <div class="weixin-content-box" style="padding: 4px;">
      <div class="weixin-content" v-for="item in list"  v-if="item.isFinish==0">
        <div class="weixin-course-name">
          <el-button @click="loadMedia(item)" type="text">{{item.name}} </el-button>
        </div>
        <ul class="weixin-ul-info clear">
          <li class="weixin-info">
            <span>学时：</span>
            <span>{{item.xs/10}}</span>
          </li>
          <li class="weixin-info">
            <span>学习进度：</span>
            <span>{{(item.position*100/item.duration).toFixed(2)}}%</span>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>
<script>
  import { mapGetters,mapActions } from "vuex";
  import {getPercent} from '@/utils/index.js'
  import {
    videoPlayer
  } from 'vue-video-player';
  // import 'video.js/dist/video-js.css'
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  export default {
    data() {
      return {
        id: '',
        media:{},
        options:{
          controls:true,
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: true, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [],
          poster: '', // 你的封面地址
          notSupportedMessage: '无法播放媒体源', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          playtimes: '',
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        },
        curTimes:0,
        tpl:{},
        info: {},
        list: [],
        timer: false,
        tickNum: 0,
        prevTime: 0,
        isReady: false,
        onPlay: false
      };
    },
    components: {
      videoPlayer
    },
    filters:{
      useTime(val) {
        val = parseInt(val)||0
        let timestr = ""
        let hour = parseInt(val / 3600);
        let min = parseInt(val / 60 % 60);
        let sec = parseInt(val % 60);
        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;
        return hour + ":" + min + ":" + sec
      }
    },
    methods: {
       ...mapActions("user", ["loadBaseInfo"]),
      getCourse() {
        let param = { courseId: this.courseId }
        httpServer("course.getCourse", param).then(res => {
          if (res.code == 200) {
            let {info, extra, list, tpl, extraXs, examList} = res.data;
            this.info =  Object.assign( info, extra||{});
            this.tpl = tpl||{};
            this.list = list.map( (item)=>{
              item.percent = getPercent(item)||0;
              return item;
            })
            for( let i in this,list){
              if( this.list[i].mediaId == this.userInfo.mediaId){
                this.loadMedia( this.list[i])
              }
            }
          }
        })
      },
      startTick() {
        let tick = this.tryTick;
        if (this.timer) clearInterval(this.timer);
        this.timer = setInterval(tick, 5 * 1000);
      },
      stopTick() {
        if (this.timer) clearInterval(this.timer);
      },
      tryTick() {
        let that = this;
        try {
          that.tick()
        } catch (err) {
          that.reportErr("play", '' + err.message)
        }
      },
      playerReadied(audio) {
        this.isReady = true
        let myPlayer = this.$refs.videoPlayer.player;
        myPlayer && myPlayer.play()
      },
      onPlayerTimeupdate(player) {
        let myPlayer = this.$refs.videoPlayer.player;
        let curTimes = player.cache_.currentTime;
        this.curTimes = curTimes || 0
        if (this.media.isFinish) {
          return;
        }
      },
      canpay(player){
        console.log("player", this.media.position )
        if( this.media.position > this.curTimes){
          player.currentTime(this.media.position+3);
          setTimeout( ()=>{player.play()}, 100)

        }
      },
      setposition(position) {
        if (position > this.media.duration) position = this.media.duration;
        let player = this.$refs.videoPlayer.player;
        player.currentTime(position);
        player.play()
        if (this.media.isFinish) return;
        if (this.media.position >= this.media.duration - 10 && !this.media.isFinish) {
          this.tick(true)
        }
      },
      onPlayerPause(event) {
        this.reportErr("play", 'pause');
        this.stopTick()
        this.onPlay = false
      },
      onPlayerEnded(event) {
        this.reportErr("play", 'end');
        this.tick(true)
      },
      onClose() {
        this.reportErr("play", 'close')
        this.doPause()
        this.$emit("close")
      },
      doPause() {
        // console.log("doPause")
        this.stopTick()
        this.onPlay = false
        let myPlayer = this.$refs.videoPlayer.player;
        myPlayer && myPlayer.pause()
      },
      doPlay() {
        console.log("doPlay")
        this.onPlay = true
        this.startTick();
        if (!this.$refs.videoPlayer || !this.$refs.videoPlayer.player) return;
        if (!this.dialog) return this.doPause();
        let myPlayer = this.$refs.videoPlayer.player;
        myPlayer && myPlayer.play()
        this.tickNum = 0
      },
      onPlayerStart() {
        console.log("onPlayerStart")
        this.reportErr("play", 'start');
        this.startTick();
        this.onPlay = true
      },
      reportErr(action, msg) {
        httpServer("course.report", {
          action,
          msg
        })
      },
      tick(force = false) {
        let media = this.media;
        this.tickNum++
        if (this.media.isFinish) {
          console.log("finish")
          return;
        }
        // 主动暂停
        let myPlayer = this.$refs.videoPlayer.player;
        let curTimes = parseInt(myPlayer.currentTime());
        // 后退无心跳
        if (this.media.position > curTimes && !force) return;
        if (curTimes < 4) {
          console.log("curTimes")
          return;
        }

        let isFinish = force ? 1 : 0
        if (curTimes >= media.duration) isFinish = 1;
        //  拉到后面
        if (!isFinish) {
          if (!this.onPlay) return;
        }
        if(window.navigator.webdriver){
          this.reportErr("play", 'webdriver');
          this.doPause()
          return
        }
        // 强制完成
        let param = {
          id: media.id,
          position: curTimes,
          isFinish
        };
        httpServer("course.tick", param, true).then(res => {
          if (res.code == 200) {
            let {
              skip,
              position,
              pause,
              closed
            } = res.data
            if (pause || closed) {
              this.doPause();
              this.$emit("close")
              if (closed) {
                this.$message.errorMsg("课程关闭学习", 5);
              } else if (pause) {
                this.$message.errorMsg("多处同时播放视频", 5);
              }
              return
            }
            if (!skip) this.setposition(position);
            Object.assign(this.media, res.data)
          }
        })
      },
      loadMedia( item ) {
        this.media = item;
        httpServer('course.GetMedia', {id:item.id}).then( res => {
          if( res.code != 200) return;
          let {mediaUrl, id, position, marks,duration} = res.data||{};
          this.mediaUrl = res.data.mediaUrl;
          this.media.position = position;
          this.media.duration = duration;
          this.media.id = id;
          this.options.sources = [{src:this.mediaUrl,type: "application/x-mpegURL"}];
          this.options.playtimes = position||1;
          this.options.autoplay  = position>0;
          this.curTimes = 0
          this.$refs.player && this.$refs.player.preload()
        });
      }
    },
    created() {
      let {uid,token,courseId, mediaId} = this.$route.query;
      this.userInfo = {uid, token, courseId, mediaId};
      this.courseId = +courseId
      if(uid) localStorage.uid = uid
      if(token) localStorage.token = token
      if (uid && token && courseId ) {
        this.getCourse();
      }
      document.addEventListener('touchmove', function (event) {
        console.log('touchmove')
          event.preventDefault();
      }, { passive: false });
    }
  }
</script>
<style>
  @import url("./index.css");
</style>
