<template>
  <div class="player" v-if="videoData">
    <Xgplayer ref="videoPlayer" :config="config" />
  </div>
</template>

<script>
import Xgplayer from 'xgplayer-vue'

export default {
  props: ['videoData', 'isCurrent', 'index'],
  data () {
    return {
      config: {
        id: `vs_${this.videoData.id}`,
        url: this.videoData.video_url,
        'playsinline': true,
        'x5-video-player-type': 'h5',
        fluid: true,
        fitVideoSize: 'auto',
        controls: false,
        poster: this.videoData.thumb
      }
    }
  },
  components: {
    Xgplayer
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  mounted () {
    // this.player.on('play', () => {
    //   console.log('play')
    // })
    this.player.once('ready', () => {
      // console.log('ready')
    })
    // this.player.once('complete', () => {
    //   console.log('complete')
    // })
  },
  destroyed () {
    // this.player.destroy()
  },
  watch: {
    isCurrent (is) {
      if (!is) {
        if (this.player.hasStart) {
          this.player.pause()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .player {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    height: 100%;
  }
</style>
