<template>
    <div class="uav-container">
        <div class="title">
            视频监控
        </div>
        <div v-show="isShowPlayer">
            <video
                class="TCPlayer-video-contaiiner"
                id="TCPlaeyrContainer"
                width="235px"
                height="178px"
                autoplay
                preload="auto"
                playsinline
                muted
                webkit-playsinline
            ></video>
        </div>
    </div>
</template>


<script lang="ts" setup>

import {ref,onMounted,defineProps,onBeforeUnmount} from 'vue';

const props = defineProps(["playUrl"])

let player = null;

const isShowPlayer = ref(false);


function handlerPlayVideo(item){

    isShowPlayer.value = true;

    if (player) {
        player.src(props.playUrl);
    } else {
        player = TCPlayer("TCPlaeyrContainer", {});
        player.src(props.playUrl);
    }
}

// 初始化视频控件
onMounted(()=>{
    setTimeout(function(){
        handlerPlayVideo(123);
    },1000)
})

// 销毁视频控件
onBeforeUnmount(()=>{
    player.dispose();
    player = null;
})


</script>

<style type="less" scoped>

.uav-container{
    width: 418px;
    height: 300px;
    background:#041B36;
    position: relative;

    .title{
        width:100%;
        height:40px;
        background-image:url("/videosupervision/title.png");
        background-size:100% 100%;
        line-height:40px;
        text-indent:18px;
        font-size:18px;
        font-weight:bold;
        color:#fff;
    }
    .switch-button{
        float:right;
        margin-right:20px;
    }
    .uav-list-container{
        width:100%;
        height: calc( 100% - 60px);
        overflow:auto;
        padding:20px 20px;
        position:relative;
        z-index:999;
        .uav-empty{
            width:100%;
            height:100%;
            text-align:center;
            color:#999;
            img{
                width:120px;
                margin:40px 0px 18px 0px;
            }
        }
        .uav-item{
            width:100%;
            height:40px;
            padding:0px 15px;
            line-height:40px;
            color:#f1f1f1;
            display:flex;
            background:rgba(0,0,0,0.2);
            &:hover{
                background:rgba(0,0,0,0.4);
            }
            div{
                flex:1;
            }
            .position{
                max-width:30px;
                cursor:pointer;
            }
            .play{
                max-width:30px;
                cursor:pointer;
            }
        }
    }

    .TCPlayer-video-contaiiner{
        width: calc( 100% - 30px);
        height: calc( 100% - 70px);
        position:absolute;
        margin:15px;
        top:40px;
        right:0px;
        z-index:1000;
        background:#041B36;
        .video-contain {
            width: 100%;
            height: 100%;
        }
        
    }
    .close-video-button{
        position:absolute;
        top:40px;
        right:10px;
        background:rgba(0,0,0,0.3);
        z-index:100100;
        color:#fff;
        padding:10px;
        cursor:pointer;
        &:hover{
            color:#408eff;
        }
    }
}   
</style>