<!--  -->
<template>
  <div class="video-box">
    <i
      v-show="loading"
      class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-_loading_ loading-icon"
    ></i>
    <video
      @error="filesError"
      v-show="!loading"
      :key="index"
      id="video"
      v-for="(i, index) in videoSrc"
      class="video-item"
      x5-video-player-type="h5-page"
      controlslist="nodownload"
      disable-picture-in-picture
      webkit-playsinline=""
      x-webkit-airplay=""
      playsinline
      :controls="controls"
      autoplay
      :src="changeUrl(i.src)"
    ></video>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, nextTick, ref, computed, defineProps } from 'vue';
  import { changeUrl } from '../common';
  import { tagType } from '/@/store/modules/scene';
  import { watchEffect } from 'vue';

  const props = defineProps({
    data: {
      type: Object,
      default: {} as any as tagType,
    },
    controls: {
      type: Boolean,
      default: true,
    },
    metasHeight: {
      type: Number,
      default: null,
    },
    show: {
      type: Boolean,
      default: false,
    },
  });
  const loading = ref(true);

  const videoSrc = computed(() => {
    return props.data.media.video;
  });

  const filesError = (_) => {
    loading.value = false;
    // Dialog.toast({
    //     content: '视频文件加载失败',
    //     type: 'warn',
    // })
  };

  onMounted(() => {
    watchEffect(() => {
      if (props.show) {
        let myVideo = document.getElementById('video');
        if (myVideo) {
          //@ts-ignore
          myVideo.play();
        }
      }
    });
    nextTick(() => {
      let myVideo = document.getElementById('video');
      if (myVideo) {
        myVideo.oncanplay = function () {
          loading.value = false;
        };
      }
    });
  });
</script>
<style lang="scss" scoped>
  .del-btn {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    top: 0;
    left: 0;
    z-index: 10;
    .loading-icon {
      color: var(--editor-main-color);
      animation: rotate 2s infinite linear;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
    }
    @keyframes rotate {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
    .video-item {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
</style>
