<template>
    <div class="video-box">
        <video
            v-for="(i, index) in data"
            id="video"
            :key="index"
            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)"
            @error="filesError"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent, inject, nextTick, onMounted, ref } from 'vue'
import { buildProps } from '@kankan-components/utils'
import type { PropType } from 'vue'

const props = buildProps({
    controls: {
        type: Boolean,
        default: true,
    },
    metasHeight: {
        type: Number,
        default: null,
    },
    data: {
        type: Array as PropType<SourceType[]>,
        default: () => [],
    },
})
const loading = ref(true)

export default defineComponent({
    name: 'UIMetasVideo',
    props,
    setup: () => {
        const filesError = () => {
            loading.value = false
            // Dialog.toast({
            //     content: '视频文件加载失败',
            //     type: 'warn',
            // })
        }
        const __sdk: any = inject('__sdk')
        function changeUrl(name: string, now?: string) {
            if (name.includes('http')) {
                return name
            } else {
                if ((typeof name === 'string' && name.slice(0, 4) == 'blob') || (typeof name === 'string' && name.slice(0, 10) == 'data:image')) {
                    return name
                } else {
                    return __sdk.resource.getUserResourceURL(name, false, now)
                }
            }
        }
        onMounted(() => {
            nextTick(() => {
                const myVideo: HTMLElement | null = document.querySelector('#video')
                if (myVideo) {
                    myVideo.oncanplay = function () {
                        loading.value = false
                    }
                }
            })
        })

        return {
            filesError,
            changeUrl,
        }
    },
})
</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>
