<template>
  <div
    class="tc-player-container"
    :style="{width:`${String(width)}px`,height:`${String(height)}px`}"
    id="tcplayer-video-player"
  >
    <div class="loading-section" v-show="loading">
      <div class="loading-list">
        <span class="loading-init-item"></span>
        <span class="loading-init-item"></span>
        <span class="loading-init-item"></span>
        <span class="loading-init-item"></span>
        <span class="loading-init-item"></span>
      </div>
    </div>
    <video
      :id="id"
      style="width:100%;height:100%"
      preload="auto"
      playsinline
      webkit-playsinline
    ></video>
  </div>
</template>

<script>
import keyEvent from '../utils/keyEvent.js'
// import Observe from '../utils/observe.js'

export default {
  name: 'TcPlayerVideo',
  props: {
    id: {
      type: String,
      require: true
    },
    width: {
      type: [Number, String],
      default: 414
    },
    height: {
      type: [Number, String],
      default: 270
    },
    // 是否静音
    muted: {
      type: Boolean,
      default: false
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: false
    },
    // 是否循环播放
    loop: {
      type: Boolean,
      default: false
    },
    // 设置播放倍速
    playbackRates: {
      type: Array,
      default: () => { return [1, 1.2, 1.5, 1.8, 2.0] }
    },
    options: {
      type: Object,
      require: true
    }
  },
  watch: {
    options: {
      handler() {
        this.$nextTick(() => {
          this.loading = true;
          this.playerInit()
        });
      },
      immediate: true
    }
  },
  data() {
    return {
      loading: true,
      player: null
    }
  },
  methods: {
    playerInit() {
      const {options, muted, autoplay, loop, playbackRates} = this;
      if (Object.keys(options).length < 1) return;
      if (!this.player) {
        // eslint-disable-next-line no-undef
        const player = TCPlayer(this.id, {
          appID: options.appID,
          fileID: options.fileID,
          psign: options.psign,
          muted,
          autoplay,
          loop,
          playbackRates
        });
        this.player = player;
        // 键盘事件添加
        keyEvent(player, autoplay)
      } else {
        this.player.loadVideoByID({appID: options.appID,fileID: options.fileID,psign: options.psign});
      };
      // 初始化回调
      this.player.ready(() => {
        this.loading = false;
        // 设置音量
        muted ? this.player.volume(0) : this.player.volume(0.5);
        // 自动播放有时候不响应
        autoplay ? this.player.play() : null;
        this.$emit('ready')
      });
    },
    // 视频播放
    play () {
      if (!this.player) return;
      this.player.play()
    },
    // 视频暂停
    pause () {
      if (!this.player) return;
      this.player.pause()
    },
    // 返回视频总时长
    getDuration () {
      if (!this.player) return;
      return this.player.duration()
    },
    // 返回当前视频播放时长
    getCurrentTime () {
      if (!this.player) return;
      return this.player.currentTime()
    },
    // 跳转到指定时间
    setCurrentTime (time) {
      if (!this.player) return;
      let startTime = 0
      if (time) startTime = time;
      this.player.currentTime(time)
    },
    // 设置视频封面图片
    setPosterImg (src) {
      if (!this.player) return;
      if (!(src && src != '')) return
      this.player.poster(src)
    },
    // 设置打开全屏
    openFullScreen () {
      if (!this.player) return;
      this.player.requestFullscreen()
    },
    // 退出全屏
    exitFullScreen () {
      if (!this.player) return;
      this.player.exitFullscreen()
    },
    // 是否全屏
    isFullScreen () {
      if (!this.player) return;
      return this.player.isFullscreen()
    },
    // 获取视频分辨率尺寸
    getResolutionSize () {
      if (!this.player) return;
      return {
        width: this.player.videoWidth(),
        height: this.player.videoHeight()
      }
    },
    // 销毁播放器实例
    destroy () {
      if (!this.player) return;
      if (this.player) this.player.dispose()
    }
  }
};
</script>

<style>
.tc-player-container {
  background-color: #000;
  position: relative;
}
.loading-section {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}
.loading-list {
  width: 110px;
  height: 40px;  
  margin-top: -20px;
  margin-left: -55px;
  text-align: center;
}
.loading-init-item {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: #1764E8;
  -webkit-animation: load 1s ease infinite;
  margin: 0 3px;
}
@-webkit-keyframes load {
  0%,
  100% {
    height: 30px;
    background: #1764E8;
  }
  50% {
    height: 60px;
    margin: -10px 3px;
    background: #32ccfc;
  }
}
.loading-init-item:nth-child(2) {
  -webkit-animation-delay: 0.2s;
}
.loading-init-item:nth-child(3) {
  -webkit-animation-delay: 0.4s;
}
.loading-init-item:nth-child(4) {
  -webkit-animation-delay: 0.6s;
}
.loading-init-item:nth-child(5) {
  -webkit-animation-delay: 0.8s;
}
</style>