<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="600px"
    @close="closeDialog(0)"
    @open="open"
  >
    <div v-html="randerHtml" style="width: 100%; background: #000"></div>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, watchEffect } from 'vue'

import videojs from 'video.js'
import 'videojs-contrib-hls'

export default defineComponent({
  name: 'CheckVideo',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
    deviceCode: String,
  },
  setup(props, context) {
    context
    const dialogVisible = ref(false)

    const videoUrl = ref('')
    const options = []
    const player = ref('')
    const randerHtml = ref('')

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      // videoUrl.value = 'http://47.103.74.123/hls/'+props.deviceCode+'.m3u8';
      videoUrl.value = 'https://iot.usky.cn/hls/' + props.deviceCode + '.m3u8'
      console.log(videoUrl.value)
      //  alert(videoUrl.value)
      // videoUrl.value ='http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'

      window.setTimeout(getVideo, 100)
    }
    function getVideo() {
      randerHtml.value =
        '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width: 100%; min-height: 400px" poster loop="loop" autoplay="autoplay" ></video>'

      let options = {
        bigPlayButton: false,
        textTrackDisplay: false,
        posterImage: true,
        errorDisplay: false,
        controlBar: true,
        autoplay: true,
        controls: true,
        sources: [
          {
            src: videoUrl.value,
            type: 'application/x-mpegURL',
          },
        ],
      }

      window.setTimeout(function () {
        player.value = videojs('my-video', options)
      }, 100)
    }

    // 关闭弹框
    const closeDialog = () => {
      if (player.value) {
        player.value.dispose()
        //  player.value.distory()
        randerHtml.value = ''
      }

      context.emit('closeDialog', false)
      dialogVisible.value = false
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })

    return {
      closeDialog,
      dialogVisible,
      options,
      open,
      videoUrl,

      getVideo,
      player,
      randerHtml,
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

// label样式
.el-form-item__label {
  width: 150px;
}
.el-form-item__content {
  margin-left: 150px;
}
</style>
<style >
* {
  touch-action: pan-y;
}
</style>