<template>
  <div class="video-box">
    <video
      class="video"
      :id="id"
      :src="mediaInfo.videoUrl"
      :controls="false"
      :show-center-play-btn="false"
      object-fit="cover"
      @click="controlstoggle"
      @timeupdate="timeupdate"
      @waiting="waiting"
      @play="isPlayStatus(true)"
      @pause="isPlayStatus(false)"
      @ended="ended">
      <div
        v-show="timeInfo.currentTime === 0"
        :style="{'backgroundImage': 'url(' + baseUrl + mediaInfo.coverUrl + ')'}"
        class="cover">
      </div>
      <div v-show="!isLoad && mediaObj && !isPlay"><img class="play" @click="playMedia" src="../assets/images/video_icon_1.png" mode="widthFix"></div>
      <div v-show="isLoad" class="load-box">
        <img class="load" src="../assets/images/video_icon_2.png" mode="widthFix">
        <div class="tips">视频缓存中</div>
      </div>
      <div class="controls clearfix" v-if="!isPlay || isControls">
        <img v-if="isFull" class="full fr" @click="full" src="../assets/images/video_icon_6.png" mode="widthFix">
        <img v-else class="full fr" @click="full" src="../assets/images/video_icon_5.png" mode="widthFix">
        <div class="time fr">{{timeInfo.currentTimeTel}}/{{timeInfo.durationTel}}</div>
        <div class="change fl" :class="{'stop': mediaObj && isPlay}" @click="playMedia"></div>
        <slider
          class="slider"
          :value="timeInfo.percen"
          @changing="changing"
          @change="changeMedia"
          block-size="12"
          activeColor="#FF7594"/>
      </div>
    </video>
  </div>
</template>

<script>

import { baseUrl } from '@/utils/http'
export default {
  props: ['mediaInfo'],
  data () {
    return {
      baseUrl: baseUrl,
      id: '',
      // 是否全屏
      isFull: false,
      // 是否加载中
      isLoad: false,
      // 时间信息
      timeInfo: {
        currentTime: 0,
        duration: 0,
        currentTimeTel: '00:00',
        durationTel: '00:00',
        percen: 0
      },
      mediaObj: null,
      windowHeight: 0,
      isPlay: false,
      // 是否显示控制器
      isControls: true,
      inter: null,
      // 是否拖动进度条
      changtime: false
    }
  },
  created () {
    // 获取唯一id
    let id = this.$store.getters.getMedieId
    this.$store.commit('addMediaId', id)
    this.id = id
  },

  mounted () {
    // 获取窗口高度
    this.windowHeight = wx.getSystemInfoSync().windowHeight
    // 获取 video 对象
    this.mediaObj = wx.createVideoContext(this.id, this)

    // 设置是否播放参数 默认 false
    this.mediaObj.isPlay = false

    // 设置默认时间
    this.timeInfo.duration = this.mediaInfo.mediaTime || 120
    this.timeInfo.durationTel = this.getTimeTel(this.mediaInfo.mediaTime || 120)
    // 先跳转 0s 获取视频时间
    // this.mediaObj.seek(0)

    // 加入媒体对象
    this.$store.commit('addMedieObj', {id: this.id, mediaObj: this.mediaObj})
  },

  methods: {
    // 播放
    playMedia () {
      if (this.mediaObj.isPlay) {
        this.mediaObj.pause()
      } else {
        this.mediaObj.play()
        this.$store.commit('playOnlyMedia', this.id)
      }
      this.mediaObj.isPlay = !this.mediaObj.isPlay
    },

    changing (e) {
      if (this.isPlay && this.inter) {
        clearTimeout(this.inter)
        this.inter = null
      }
      this.changtime = true
    },

    // 拖动进度条
    changeMedia (e) {
      this.changtime = false
      let time = e.mp.detail.value * this.timeInfo.duration * 0.01
      this.mediaObj.seek(time)
      if (this.isPlay) {
        this.controlstoggle()
      }
    },

    // 全屏
    full () {
      if (this.isFull) {
        this.mediaObj.exitFullScreen()
      } else {
        this.mediaObj.requestFullScreen()
      }
      this.isFull = !this.isFull
    },

    // 播放结束
    ended () {
      this.mediaObj.isPlay = false
      this.mediaObj.stop()
      this.isPlayStatus(false)
    },

    // 判断当前的播放状态
    isPlayStatus (isPlay) {
      if (isPlay) {
        this.controlstoggle()
      }
      this.isPlay = isPlay
    },

    // 播放进度
    timeupdate (e) {
      if (this.changtime) {
        return false
      }
      let {currentTime, duration} = e.mp.detail

      if (this.isLoad) {
        this.isLoad = false
      }
      this.timeInfo = {
        duration: parseInt(duration),
        currentTime: parseInt(currentTime),
        durationTel: this.getTimeTel(duration),
        currentTimeTel: this.getTimeTel(currentTime),
        percen: parseInt((currentTime / duration) * 100)
      }
    },

    // 视频缓存
    waiting () {
      // 播放中显示 loading
      if (this.mediaObj.isPlay) {
        this.isLoad = true
      }
    },

    // 控制器显示隐藏
    controlstoggle () {
      clearTimeout(this.inter)
      this.isControls = true
      this.inter = setTimeout(() => {
        this.isControls = false
      }, 4000)
    },

    // 时间格式化 0s => 00:00
    getTimeTel (time) {
      let m = parseInt(time / 60)
      let s = parseInt(time % 60)

      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return m + ':' + s
    }
  },
  // 滚动到可视窗口外暂停
  onPageScroll ({scrollTop}) {
    // this.scrollTop = scrollTop
    // 获取 元素
    let html = wx.createSelectorQuery().select('#' + this.id)
    html.boundingClientRect((res) => {
      if (this.mediaObj.isPlay && (res.top + res.height < 0 || res.top > this.windowHeight)) {
        this.playMedia()
      }
    }).exec()
  }
}
</script>

<style scoped lang="less">
.video-box{
  position: relative;
  overflow: hidden;
  .video{
    display: flex;
    width: 100%;
    height: 200px;
    background: #ccc;
    overflow: hidden;
  }
  .cover{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
  }
  .play{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(153, 153, 153, 0.1);
    overflow: hidden;
  }
  .load-box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    .load{
      display: block;
      margin: auto;
      width: 26px;
      height: 26px;
    }
    .tips{
      line-height: 28px;
      font-size: 12px;
      text-align: center;
      color: #fff;
    }
  }
  .controls{
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 10px;
    width: 100%;
    height: 35px;
    line-height: 15px;
    background: rgba(153, 153, 153, 0.1);
    box-sizing: border-box;
    .change{
      margin: 0 10px 0 0;
      width: 15px;
      height: 15px;
      background: url('../assets/images/video_icon_3.png') no-repeat center center;
      background-size: auto 100%;
      &.stop{
        background-image: url('../assets/images/video_icon_4.png')
      }
    }
    .slider{
      margin: auto;
      padding: 0 8px;
      overflow: hidden;
    }
    .time{
      display: inline-block;
      padding: 0 5px;
      font-size: 12px;
      color: #fff;
    }
    .full{
      width: 15px;
    }
  }
}
</style>
