<template>
  <div>
    <video
      :id="'ZhiGan_ModalTimeLine' + props.index + props.timestamp"
      class="TCPlayer-video-contaiiner"
      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 { nextTick, onMounted, onUnmounted, watch } from 'vue';

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

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

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

  function handlerPlayVideo() {
    nextTick(function () {
      if (player) {
        player.src(props.videourl);
      } else {
        player = TCPlayer('ZhiGan_ModalTimeLine' + props.index + props.timestamp, {});
        player.src(props.videourl);
      }
    });
  }

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

  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-display {
    width: 40px !important;
  }

  ::v-deep .vjs-button {
    width: 20px !important;
  }
</style>
