<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-12 13:48:53
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-18 14:38:33
 * @FilePath: \5G-Loading-Bay-Web\src\components\videoPlayer\RealPlayer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="real-video-player" v-show="isPlaying">
        <video ref="refPlayer" autoplay controls muted width="100%" height="100%" style="object-fit: fill;"></video>
        <!-- <iframe src="http://192.168.10.113:8889/cam/" frameborder="0"></iframe> -->
    </div>
    <div class="flex items-center justify-center bg-black before-open-video" v-show="!isPlaying" @click.stop="handleOpen()">
        <img src="@/assets/common/player_icon_1.png" alt="">
    </div>

    

    <!-- http://192.168.10.113:8889/cam/ -->
</template>

<script setup lang="ts">
import { playRtspApi, stopRtspApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi";
import { throttle } from 'lodash';

interface Props {
    show: boolean; // 是否关闭
    videoSrc: string; // 播放信息地址
}

const props = withDefaults(defineProps<Props>(), {
    show: false,
    videoSrc: "",
});
const webRtcServer = ref(null);
const refPlayer = ref(null);
const isPlaying = ref<boolean>(false);
const videosInfo = ref<{ process_id: number | string, host: string }>({ process_id: null, host: '' });
function initData() {
    // const videoSrc = 'rtsp://192.168.10.63:8554/mystream';
    webRtcServer.value.connect(props.videoSrc || '', '', "rtptransport=tcp&timeout=60&width=320&height=0");
}

async function initPlayer() {
    try {
        const res = await playRtspApi({
            url: props.videoSrc
        })
        console.log(res, 'initPlayer')
        if (isSuccessApi(res)) {
            videosInfo.value = res.data;
            nextTick(() => {
                console.log(location.protocol, "refPlayer", videosInfo.value?.host);
                // TODO 根据环境切换地址
                // const testHost = 'http://192.168.10.14:7001';
                webRtcServer.value = new WebRtcStreamer(refPlayer.value, videosInfo.value?.host || '');
                nextTick(() => {
                    props.videoSrc && initData();
                })
            })
        }
    } catch (error) {
        ElMessage.error('播放失败')
        console.error('播放失败:', error)
    }
}

async function stopPlayer() {
    isPlaying.value = false;
    if (!videosInfo.value.process_id) {
        return
    }
    try {
        const res = await stopRtspApi({
            process_id: videosInfo.value.process_id
        })
        console.log(res, 'initPlayer')
        if (isSuccessApi(res)) {
            videosInfo.value = {};
        }
    } catch (error) {
        ElMessage.error('播放失败')
        console.error('播放失败:', error)
    }
}



watch(() => props.show, (newVal) => {
    if (!newVal) {
        stopPlayer()
    }
    console.log(newVal, 'show')
}, { immediate: true })

onUnmounted(() => {
    webRtcServer.disconnect();
    webRtcServer.value = null;
    if (videosInfo.value.process_id) {
        stopPlayer();
        
    }
})

function openReal() {
    isPlaying.value = true;
    nextTick(() => initPlayer())
    console.log("开启")
}

// 使用 throttle 函数创建节流函数
const handleOpen = throttle(() => {
    openReal();
}, 1000); // 节流时间为 1000 毫秒（即 1 秒）

defineExpose({
    initPlayer
})
</script>

<style lang="scss">
.before-open-video {
    width: 100%;
    height: 100%;
    background: #030D26;

    img {
        width: 40px;
        height: 40px;
    }
}
</style>