<template>
  <div>
    <div class="level-title">
      <h1>摄像头名称：{{ info.NAME }}</h1>
    </div>
    <table class="table-ui">
      <tr>
        <td class="bbg-transparent">编码</td>
        <td >{{ info.INDEXCODE }}</td>
      </tr>
    </table>
    <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: '/platformvideomanagement/getHlsPathById'
    }
  },
  data() {
    return {
      info: {},
      player: null,
      url: ''
    }
  },
  beforeDestroy() {
    this.player && this.player.dispose()
  },
  created() {
    this.showVideo()
  },
  methods: {
    showVideo() {
      requestFN(
        this.requestUrl,
        {
          PLATFORMVIDEOMANAGEMENT_ID: this.id
        }
      ).then((res) => {
        this.info = res.pd
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          this.player = new Aliplayer({
            'id': 'aLiVideoPlayer',
            'source': res.data.url,
            'width': '100%',
            'height': '380px',
            '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>
