<template>
  <div>
    <video
      :id="'ZhiGan_ModalVideo' + props.timestamp"
      class="TCPlayer-video-container"
      preload="auto"
      crossOrigin="anonymous"
      playsinline
      autoplay
      :loop="props.videoLoop"
      :muted="props.videoMuted"
      :style="{
        width: props.width + 'px',
        height: props.height + 'px',
      }"
    />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';

  const props = defineProps([
    'serialNumberValue',
    'width',
    'height',
    'timestamp',
    'videoLoop',
    'videoMuted',
    'videoFit',
  ]);

  // 视频控件初始化
  let player: any = null;

  function handlerPlayVideo() {
    nextTick(() => {
      if (player) {
        player.src(props.serialNumberValue);
      } else {
        player = TCPlayer('ZhiGan_ModalVideo' + props.timestamp, {});
        player.src(props.serialNumberValue);
      }
    });
  }

  function closePlayerVideo() {
    if (player) {
      player.dispose();
      player = null;
    }
  }

  watch(
    () => props.serialNumberValue,
    () => {
      handlerPlayVideo();
    },
  );

  onMounted(() => {
    handlerPlayVideo();
  });

  onUnmounted(() => {
    closePlayerVideo();
  });

  defineExpose({
    handlerPlayVideo,
    closePlayerVideo,
  });
</script>

<style lang="scss" scoped>
  video {
    display: block;
    object-fit: v-bind('props.videoFit');
  }

  ::v-deep .vjs-live-control .vjs-live-display {
    width: 100px !important;
  }
</style>
