<template>
  <div v-if="show">
    <!-- <video
      class="video"
      ref="video"
      :src="videoUrl"
      :poster="`${poster}${source == 1 ? '/320/180' : ''}`"
      controls="true"
      @play="_play"
      @pause="_pause"
    ></video> -->
    <div ref="reportPlayer"></div>
  </div>
</template>
<script>
export default {
  name: 'pc-menu-report-video',
  props: {
    video: {},
    source: {},
    poster: {}
  },
  data() {
    return {
      show: true,
      dp: []
    };
  },
  computed: {
    videoUrl() {
      if (!this.video) {
        return '';
      }
      if (window.location.protocol === 'http:') {
        return this.video.replace('https://', 'http://');
      } else {
        return this.video.replace('http://', 'https://');
      }
    }
  },
  mounted() {
     window.Hls = require('hls.js');
     this.DPlayer = require('dplayer')
     this.playerInit(this.videoUrl)
  },
  beforeDestroy() {
    this.dp.forEach(item => {
      this.dp.destroy && this.dp.destroy()
    })
  },
  methods: {
    _play() {
      // console.log('play')
    },
    _pause() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    playerInit(url) {
      const newPlayer = new this.DPlayer({
        container: this.$refs.reportPlayer,
        video: {
          url,
          type: 'auto',
          pic: `${this.poster}${this.source === 1 ? '/320/180' : ''}`,
          mutex: true
        },
        pluginOptions: {
          hls: {},
        }
      })
      this.dp.push(newPlayer)
    },
  },
   watch: {
    'videoUrl'(newVal) {
      if (this.DPlayer && this.videoUrl && newVal !== '') {
        this.playerInit(newVal)
      }
		}
  }
};
</script>
<style scoped lang="less">
.video {
  width: 100%;
  min-height: 160px;
  max-height: 400px;
}
video {
  position: relative;
  width: 100%;
}
// .dplayer-mobile-play {
//   display: block !important;
// }
// .dplayer-playing.dplayer-hide-controller .dplayer-mobile-play {
//   display: none !important;
// }
/deep/ .dplayer-setting,
/deep/ .dplayer-full-in-icon,
/deep/ .dplayer-menu {
  display: none !important;
}
</style>
