<template>
    <el-dialog v-model="dialogVisible" title="播放视频" width="820px" :destroy-on-close="true" @closed="clearVideo">
        <video ref="videoRef" class="resource-player" :src="videoUrl" controls autoplay />
    </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'

const dialogVisible = ref(false)
const videoUrl = ref('')
const videoRef = ref<HTMLVideoElement>()

const open = async (url: string) => {
    videoUrl.value = url
    dialogVisible.value = true
    await nextTick()
    videoRef.value?.load()
}

const clearVideo = () => {
    if (videoRef.value) {
        videoRef.value.pause()
        videoRef.value.removeAttribute('src')
        videoRef.value.load()
    }
    videoUrl.value = ''
}

defineExpose({
    open
})
</script>

<style scoped lang="scss">
.resource-player {
    display: block;
    width: 100%;
    max-height: 68vh;
    background: #000;
}
</style>
