<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-12 13:48:31
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-17 15:36:41
 * @FilePath: \5G-Loading-Bay-Web\src\components\videoPlayer\player.vue
 * @Description: 视频播放器
-->
<template>
    <!-- 视频播放器 -->
    <div class="video-player-box">
        <video ref="videoRef" class="video-element" controls  @timeupdate="handleTimeUpdate"
            @loadedmetadata="handleLoadedMetadata" @play="handlePlay" @pause="handlePause" @waiting="handleWaiting"
            @canplay="handleCanPlay" style="object-fit: cover;" @error="handleVideoError">
            <source :src="src" type="video/mp4">
            您的浏览器不支持视频播放
        </video>
        <!-- 加载状态提示 -->
        <div v-if="loading" class="loading-overlay">
            <el-icon class="is-loading">
                <Loading />
            </el-icon>
        </div>
        <div class="bg_error_img" v-if="isVideoError">

        </div>
    </div>
</template>

<script setup lang="ts">
import { ElIcon } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'

type ProgressData = {
    currentTime: number
    duration: number
    progress: number
}

const props = defineProps({
    src: {
        type: String,
        required: true
    },
    isPlaying: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits<{
    (e: 'update:progress', data: ProgressData): void
    (e: 'update:duration', duration: number): void
    (e: 'play'): void
    (e: 'pause'): void
}>()

const videoRef = ref<HTMLVideoElement | null>(null)
const loading = ref<boolean>(false)
const isVideoError = ref<boolean>(false);

let currentDuration = 0




// 监听播放状态变化
watch(() => props.isPlaying, (newVal) => {
    if (!videoRef.value) return
    newVal ? videoRef.value.play() : videoRef.value.pause()
})

// 监听视频源变化
watch(() => props.src, (newVal) => {
    if (!videoRef.value) return
    isVideoError.value = false
    videoRef.value.pause()
    videoRef.value.src = newVal
    videoRef.value.load()
    if (props.isPlaying) {
        videoRef.value.play()
    }
})

// 进度更新处理
const handleTimeUpdate = () => {
    if (!videoRef.value) return

    const currentTime = videoRef.value.currentTime
    const progress = currentDuration > 0
        ? (currentTime / currentDuration) * 100
        : 0

    emit('update:progress', {
        currentTime,
        duration: currentDuration,
        progress
    })
}

// 元数据加载完成
const handleLoadedMetadata = () => {
    if (!videoRef.value) return
    currentDuration = videoRef.value.duration
    emit('update:duration', currentDuration)
}

const handleVideoError = () => {
    console.log('handleVideoError')
    isVideoError.value = true;
};

// 播放状态处理
const handlePlay = () => emit('play')
const handlePause = () => emit('pause')

// 加载状态处理
const handleWaiting = () => loading.value = true
const handleCanPlay = () => loading.value = false


onMounted(() => {
    console.log('onMounted', props.src)
    if (videoRef.value) {
        videoRef.value.src = props.src
    }
})

onUnmounted(() => {
    if (videoRef.value) {
        videoRef.value.pause()
        videoRef.value.removeAttribute('src')
        videoRef.value.load()
    }
})

// 暴露控制方法
defineExpose({
    play: () => videoRef.value?.play(),
    pause: () => videoRef.value?.pause(),
    seek: (time: number) => {
        if (videoRef.value) {
            videoRef.value.currentTime = time
        }
    }
})


</script>



<style lang="scss">
.video-player-box {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    .bg_error_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999999;
        background-color: #090F48;
        background-image: url("@/assets/common/load_file_error.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 25%;
        border: 1px dashed red;
    }

    .video-element {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .el-icon.is-loading {
        font-size: 32px;
        animation: rotating 2s linear infinite;
    }

    @keyframes rotating {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}
</style>
