<template>
  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
    <video id="my-player" ref="videoRef" class="video-js my-video">
      <source :src="props.chartConfig.option.dataset" />
    </video>
  </div>
</template>
<script setup lang="ts">
import { PropType, onMounted, ref, watch, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import videojs from 'video.js'
import type { VideoJsPlayerOptions } from 'video.js'
import 'video.js/dist/video-js.min.css'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)

// video标签
const videoRef = ref<HTMLElement | null>(null)

// video实例对象
let videoPlayer: videojs.Player | null = null

// 初始化videojs
const initVideo = () => {
  const options: VideoJsPlayerOptions = {
    language: 'zh-CN', // 设置语言
    controls: true, // 是否显示控制条
    preload: 'auto', // 预加载
    autoplay: true, // 是否自动播放
    fluid: false, // 自适应宽高
    src: props.chartConfig.option.dataset, // 要嵌入的视频源的源 URL
    userActions: {
      hotkeys: true
    }
  }
  if (videoRef.value) {
    // 创建 video 实例
    videoPlayer = videojs(videoRef.value, options, onPlayerReady)
  }
}

// video初始化完成的回调函数
const onPlayerReady = () => {}

onMounted(() => {
  initVideo()
})

watch(
  () => props.chartConfig.option.dataset,
  newData => {
    console.log(newData)
    props.chartConfig.option.dataset = newData
    initVideo()
  }
)
</script>

<style lang="scss" scoped>
.go-content-box {
  display: flex;
  align-items: center;
  justify-content: center;
  .my-video {
    width: 100% !important;
    height: 100% !important;
    position: relative;
  }
}
</style>