<template>
  <div v-if="show" class="video" @touchmove.stop>
    <!-- <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: 'menu-report-video',
  props: {
    video: {},
    source: {},
    poster: {}
  },
  data() {
    return {
      show: true,
      dp: [],
      controllerShow: 0
    };
  },
  computed: {
    videoUrl() {
      if (!this.video) {
        return '';
      }
      if (window.location.protocol === 'http:') {
        return this.video.replace('https://', 'http://');
      } else {
        return this.video.replace('http://', 'https://');
      }
    },
    // controller() {
    //   return this.dp[0] && this.dp[0].container.classList.contains('dplayer-hide-controller')
    // }
  },
  mounted() {
     const FastClick = require('fastclick')
     FastClick.attach(document.body);
     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: {},
        }
      })
      newPlayer.on('canplay', () => {
        this.compatible(this.$refs.reportPlayer.querySelectorAll('.dplayer-video'))
      });
      // 'touchmove', 'touchstart', 'touchend', 
      ['click'].forEach(item => {
         newPlayer.container.addEventListener(item, () => {
         event.stopPropagation();
        });
      })
      this.dp.push(newPlayer)
    },
    compatible(video = []) {
        // const dplays = document.querySelectorAll('.dplayer-video')
        const u = navigator.userAgent
        // let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
        const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios端
        video.forEach(item => {
          if (isiOS) {
          item.removeAttribute('x5-video-player-type', 'h5-page')
          item.setAttribute('playsinline', true)
          item.setAttribute('webkit-playsinline', true)
          } else {
            item.setAttribute('x5-video-player-type', 'h5-page')
            item.removeAttribute('playsinline', true)
            item.removeAttribute('webkit-playsinline', true)
          }
        })
    },
  },
  watch: {
    'videoUrl'(newVal) {
      if (this.DPlayer && this.videoUrl && newVal !== '') {
        this.playerInit(newVal)
      }
    },
  }
};
</script>
<style scoped lang="less">
.video {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 1.6rem;
  max-height: 4rem;
}
// /deep/ video {
//   -webkit-overflow-scrolling: auto;
//   position: relative;
//   width: 100%;
// }
/deep/ .dplayer-setting,
/deep/ .dplayer-full-in-icon,
/deep/ .dplayer-menu {
  display: none !important;
}
// .dplayer-mobile-play {
//   display: block !important;
// }
// .dplayer-playing.dplayer-hide-controller .dplayer-mobile-play {
//   display: none !important;
// }
</style>
