<template>
  <div>
    <div class="level-title">
      <h1>视频信息</h1>
    </div>

    <table class="table-ui">
      <tr>
        <td class="bbg-transparent">视频名称</td>
        <td colspan="3">{{ pd.VIDEONAME }}</td>
      </tr>
      <tr>
        <td class="bbg-transparent">所属重点工程</td>
        <td>{{ pd.OUTSOURCED_NAME }}</td>
        <td class="bbg-transparent">所属公司</td>
        <td>{{ pd.CORP_NAME }}</td>
      </tr>
    </table>
    <iframe v-if="!pd.PLATFORMVIDEOMANAGEMENT_ID" :src="VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
    <div v-if="pd.PLATFORMVIDEOMANAGEMENT_ID" id="aLiVideoPlayer" class="prism-player"/>
  </div>
</template>

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

export default {
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    gangkou: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      config: config,
      pd: {
        WORK_OPERATOR_ID: [],
        WORK_OPERATOR_NAME: [],
        WORK_OPERATOR_NUMBER: []
      },
      VIDEOURL: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 五分钟关闭视频播放页面定时任务
    start() {
      console.log('定时器开启')
      this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟;
    },
    over() {
      // 定时器手动关闭
      console.log('定时器自动关闭')
      clearInterval(this.timer)
    },
    closeVideoStart() {
      this.dialogVideo = false
      this.dialogVideoHLS = false
      this.dialogVideoBack = false
      this.dialogVideoAll = false
      this.over()
    },
    formatDate(date, format) {
      if (date) {
        return moment(date).format(format)
      } else {
        return ''
      }
    },
    getData() {
      this.$message.warning('单次播放最多五分钟')
      this.start()
      requestFN(
        '/map/keyProject/getById',
        {
          id: this.id,
          TYPE: this.type,
          GANGKOU: this.gangkou
        }
      ).then(data => {
        this.pd = data.pd
        console.log(this.pd)
        if (!this.pd.PLATFORMVIDEOMANAGEMENT_ID) {
          console.log(1)
          this.VIDEOURL = this.pd.VIDEOURL
        } else {
          console.log(2)
          requestFN(
            '/platformvideomanagement/getHlsPath',
            {
              INDEXCODE: this.pd.INDEXCODE
            }
          ).then((res) => {
            console.log(res)
            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')
              })
            })
          }).catch((e) => {
            this.over()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
