
<template>
    <div class="uav-container">
        <div class="title">
            视频监控
        </div>
        <div  class="monitor-container">
            <div id="root" style="width:235px;height:178px"></div>
        </div>
    </div>
</template>


<script lang="ts" setup>
import {ref,onMounted,onBeforeUnmount,defineProps,watch} from 'vue';
// import EasyPlayer from '@easydarwin/easyplayer'

import axios from 'axios'

const isShowPlayer = ref(false);

const props = defineProps(["monitorInfo"])

const isFirstLoad = ref(false);
watch(
    ()=>props.monitorInfo,
    (newVal,oldVal)=>{
       if(isFirstLoad.value){
        getPlayToken();
       }else{
        isFirstLoad.value = true;
       }
    }
)


let monitorPlayer = null;

const getPlayToken = ()=>{
    let params = {
        deviceId:props.monitorInfo.number,
        channelId:props.monitorInfo.channel,
        type:0,
    }

    axios({
        method:"post",
        url:"http://111.17.207.220:9001/api/Camera/getKitToken?deviceId="+params.deviceId+"&channelId="+params.channelId+"&type=0",
    }).then(res=>{
        let kitToken = res.data.result.data.kitToken;
        loadMonitorVideo(kitToken);
    })
}

const loadMonitorVideo = (token) => {
    monitorPlayer && monitorPlayer.destroy()

    monitorPlayer = null

    monitorPlayer = new imouPlayer({
        id: 'root',
        width: 388,
        height: 230,
        deviceId: props.monitorInfo.number,
        token:token,
        channelId:props.monitorInfo.channel,
        type:1,
        streamId:0,
        recordType: 'cloud',
        code:""
    })
}

onMounted(()=>{
    getPlayToken();
})

onBeforeUnmount(()=>{
    monitorPlayer && monitorPlayer.destroy()

    monitorPlayer = 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;
        }
    }
}   

.monitor-container{
    width: calc( 100% - 30px);
    height: calc( 100% - 70px);
    padding:15px;
}
</style>