<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 ''
      }
    }
  },
  data() {
    return {
      hls: false,
      player: null,
      url: ''
    }
  },
  beforeDestroy() {
    this.player && this.player.dispose()
  },
  created() {
    this.showVideo()
  },
  methods: {
    showVideo() {
      requestFN(
        '/map/getHlsPath',
        {
          INDEXCODE: this.id
        }
      ).then((res) => {
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          this.player = new Aliplayer({
            'id': 'aLiVideoPlayer',
            'source': res.data.url? res.data.url.replace('http://192.168.0.253:83', 'http://60.2.209.238:8992/videoApi') : '',
            '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')
          })
        })
      }).catch((e) => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
