<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-08-19 11:04:59
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-08-20 09:46:44
 * @FilePath: \5G-Web\src\components\Swiper\swiperPlayer.vue
 * @Description: 作为轮播文件中的视频块
-->
<template>
  <div class="flex items-center justify-center w-full h-full position-relative">
    <video
      ref="videoRef"
      :controls="false"
      muted
      :src="videoUrl"
      width="100%"
      height="100%"
      style="object-fit: cover"
      @error="handleVideoError"
      v-if="!isVideoError"
    ></video>
    <div class="bg_error_img" v-if="isVideoError"></div>
    <div :class="{ bg_icon: true, playing: isPlaying }" v-if="!isVideoError">
      <!-- {{ isPlaying }} -->
    </div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps<{
  videoUrl: string;
  isPlaying: boolean;
}>();
const videoRef = ref<HTMLVideoElement | null>(null);
const isVideoError = ref<boolean>(false);

const handleVideoError = () => {
  console.log("handleVideoError");
  isVideoError.value = true;
};
</script>
<style lang="scss" scoped>
.bg_error_img {
  width: 100%;
  height: 100%;
  background: url("@/assets/common/load_file_error.png") no-repeat center center;
  background-size: 50%;
  border: 1px dashed red;
}

.bg_icon {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("@/assets/common/player_icon_1.png") no-repeat center center;
  background-size: 40px;

  &.playing {
    background: url("@/assets/common/player_icon_2.png") no-repeat center center;
    background-size: 40px;
  }
}
</style>
