<template>
  <div>
    <div id="aLiVideoPlayer" class="prism-player"/>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'

export default {
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    gangkou: {
      type: String,
      default: ''
    },
    requestUrl: {
      type: String,
      default: '/mkmjGateVideo/goAllVideo'
    }
  },
  data() {
    return {
      hls: false,
      player: null,
      url: ''
    }
  },
  beforeDestroy() {
    this.player && this.player.dispose()
  },
  created() {
    this.showVideo()
  },
  methods: {
    showVideo() {
      requestFN(
        '/platform/door/video/getHlsPath',
        {
          INDEXCODE: this.id
        }
      ).then((res) => {
        // for (let i = 0; i < data.videoList.length; i++) {
        // if (data.videoList[0].HLSVIDEOURL) {
        //   this.url = data.videoList[0].GBSVIDEOURL
        //   this.hls = true
        // } else {
        this.hls = false
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          this.player = new Aliplayer({
            'id': 'aLiVideoPlayer',
            'source': res.data.url,
            'width': '100%',
            'height': '500px',
            'autoplay': true,
            'isLive': true,
            'rePlay': false,
            'playsinline': true,
            'preload': true,
            'controlBarVisibility': 'hover',
            'useH5Prism': true
          }, function(player) {
            console.log('The player is created')
          })
        })
        // }
        // }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
