<!--  -->
<template>
    <!-- <div class="video-box" :style="metasHeight ? `height:${metasHeight}px;` : ''"> -->
    <div class="video-box">
        <div v-if="isEdit" class="del-btn" @click="delVideo()">
            <ui-icon type="del"></ui-icon>
        </div>
        <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon>
        <video
            @error="filesError"
            v-show="!loading"
            id="video"
            v-for="(i, index) in videoSrc"
            class="video-item"
            x5-video-player-type="h5-page"
            controlslist="nodownload"
            disablepictureinpicture=""
            webkit-playsinline=""
            x-webkit-airplay=""
            playsinline=""
            :controls="controls"
            autoplay
            :src="common.changeUrl(i.src)"
        ></video>
    </div>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, nextTick, ref, computed, defineProps } from 'vue'
import { useStore } from 'vuex'
import { custom } from '../constant.js'
import { getApp, useApp } from '@/app'
import common from '@/utils/common'
import { Dialog } from '@/global_components/'
const videoNum = ref(0)
const store = useStore()
const type = ref('video')
const hotData = computed(() => store.getters['tag/hotData'])
const props = defineProps({
    controls: {
        type: Boolean,
        default: true
    },
    metasHeight: {
        type: Number,
        default: null
    }
})
const loading = ref(true)

const isEdit = computed(() => store.getters['tag/isEdit'])
const videoSrc = computed(() => {
    return hotData.value.media.video
})
const delVideo = () => {
    store.commit('tag/delMetas', { type: type.value, index: videoNum.value })
}

const initVideo = file => {
    store.commit('tag/setVideo', file)
}
const filesError = file => {
    loading.value = false
    // Dialog.toast({
    //     content: '视频文件加载失败',
    //     type: 'warn',
    // })
}

onMounted(() => {
    nextTick(() => {
        let myVideo = document.getElementById('video')
        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>
