<template>
    <div class="realTime bg-white">
        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px style="width: 80vw">
            <a-tab-pane :key="item.streetId.toString()" :tab="item.streetId.toString()" v-for="item in realTimeListData"></a-tab-pane>
        </a-tabs>
<!--        {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
        <a-row :gutter="20">
            <a-col
                v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
                :span="24 / selectTab.videoStyleColumn"
                :key="index"
                :style="{
                        height: videoHeight,
                        
                        marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
                    }"
            >
            <div style="position: relative;width: 100%;">
                <video :style="{ height: videoHeight,}" :id="`camera${item.id}`"  autoplay muted controls>
                </video>
                <div class="operation-list">
                     <div class="operation-item">
                         <img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
                              >
                         <span>变倍</span>
                         <img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
                              >
                     </div>
                     <div class="operation-item">
                         <img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
                              @mouseup=focusDecStop($event,item.id)>
                         <span>变焦</span>
                         <img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
                              @mouseup=focusAddStop($event,item.id)>
                     </div>
                     <div class="operation-item">
                         <img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
                         <span>光圈</span>
                         <img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
                     </div>
                 </div>
                 <div class="direction-list">
                     <div class="direction-item">
                         <img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
                         <img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
                         <img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
                     </div>
                     <div class="direction-item">
                         <img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
                         <img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
                     </div>
                     <div class="direction-item">
                         <img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
                              @mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
                         <img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
                         <img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
                              @mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
                     </div>
                 </div>
            </div>
                
                
            </a-col>
        </a-row>
        
    </div>
</template>

<script>

import WebRtcPlayer from "../../../public/static/webrtcplayer"
export default {
    name: "realTimeMonitoring",
    components: {
        //VideoPlayer
    },
    data() {
        return {
            realTimeListData: [],
            url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
            tabKey: "0",
            path: [],
            player: "",
            visible: false,
            modelData: [],
            clientHeight: 0,
            
            players: [],
            zoomSubUrl:require('@/assets/sub-icon.png'),
            zoomAddUrl:require('@/assets/add-icon.png'),
            focusSubUrl:require('@/assets/sub-icon.png'),
            focusAddUrl:require('@/assets/add-icon.png'),
            irisSubUrl:require('@/assets/sub-icon.png'),
            irisAddUrl:require('@/assets/add-icon.png'),
            leftUpUrl:require('@/assets/left-up-icon.png'),
            upUrl:require('@/assets/up-icon.png'),
            rightUpUrl:require('@/assets/right-up-icon.png'),
            leftUrl:require('@/assets/left-icon.png'),
            rightUrl:require('@/assets/right-icon.png'),
            leftDownUrl:require('@/assets/left-down-icon.png'),
            downUrl:require('@/assets/down-icon.png'),
            rightDownUrl:require('@/assets/right-down-icon.png'),
        };
    },
    computed: {
        selectTab() {
            return (this.realTimeListData.filter(item=> item.streetId == this.tabKey)[0] || {})
        },
        cameras() {
            return this.selectTab.cameras || [];
        },
        videoHeight() {
            return (( this.clientHeight)/ this.selectTab.videoStyleRow ) + 'px'
        },
    },
    //inject: ['reload'],
    mounted() {
        this.getClientHeight()
        this.getRealTimeList()
        
        this.tabKey = sessionStorage.getItem('tabKey');

    },
    destroyed() {
        this.destory()
    },
    methods: {
        getClientHeight() {
            this.clientHeight = this.$el.clientHeight - 80;
        },
        getRealTimeList(){
            
            this.$api.httpApi.getRealTimeList({
                data: {}
            }).then(res => {
                if(res.code == 200) {
                    this.realTimeListData = res.data.reverse();
                    if (sessionStorage.getItem('tabKey') == null) {
                        console.log("tabKey"+this.realTimeListData[0].id)
                        sessionStorage.setItem('tabKey', this.realTimeListData[0].streetId)
                        this.tabKey = sessionStorage.getItem('tabKey');
                    }
                    this.$nextTick(() => {
                        this.autoPlay()
                    })
                }
                
            }).catch(err => {
                console.log(err)
            })
        },
        
        tabsChange(key) {
            sessionStorage.setItem('tabKey', key)
            this.destory()
            this.$nextTick(() => {
                this.autoPlay()
            })
            
        },
        
        autoPlay(){
            this.players = []
            for(var a of this.realTimeListData){
                for (let b of a.cameras){
                    let video = document.getElementById('camera'+b.id);
                    if(video){
                        console.log("play:"+b.id)
                        
                        let server ;
                        if(b.rtcServerPort != null){
                            server=  b.rtcServer+":"+b.rtcServerPort;
                        }else{
                            server= b.rtcServer
                        }
                
                        let player = new WebRtcPlayer(server,video,'camera'+b.id);
                        this.players.push(player)
                    }
                    
                }
                
            }
        
        },
        destory(){
            for(let player of this.players){
                console.log("stop")
                player.destroy()
            }
        },
        zoomDecStart(event,id){
            console.log('变倍-按下')
            console.log(id)
            this.zoomSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/zoomDec/start/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomDecStop(event,id){
            console.log('变倍-抬起')
            console.log(id)
            this.zoomSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/zoomDec/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomAddStart(event,id){
            console.log('变倍+按下')
            this.zoomAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/zoomAdd/start/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        zoomAddStop(event,id){
            console.log('变倍+抬起')
            this.zoomAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/zoomAdd/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusDecStart(event,id){
            console.log('变焦-按下')
            this.focusSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/focusDec/start/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusDecStop(event,id){
            console.log('变焦-抬起')
            this.focusSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/focusDec/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusAddStart(event,id){
            console.log('变焦+按下')
            this.focusAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/focusAdd/start/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        focusAddStop(event,id){
            console.log('变焦+抬起')
            this.focusAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/focusAdd/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisDecStart(event,id){
            console.log('光圈-按下')
            this.irisSubUrl=require('@/assets/sub-active-icon.png')
            this.$axios.post('/camera/control/irisDec/start/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisDecStop(event,id){
            console.log('光圈-抬起')
            this.irisSubUrl=require('@/assets/sub-icon.png')
            this.$axios.post('/camera/control/irisDec/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisAddStart(event,id){
            console.log('光圈+按下')
            this.irisAddUrl=require('@/assets/add-active-icon.png')
            this.$axios.post('/camera/control/irisAdd/start/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        irisAddStop(event,id){
            console.log('光圈+抬起')
            this.irisAddUrl=require('@/assets/add-icon.png')
            this.$axios.post('/camera/control/irisAdd/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftUpStart(event,id){
            console.log('左上鼠标按下')
            this.leftUpUrl=require('@/assets/left-up-active-icon.png')
            this.$axios.post('/camera/control/leftUp/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftUpStop(event,id){
            console.log('左上鼠标抬起')
            this.leftUpUrl=require('@/assets/left-up-icon.png')
            this.$axios.post('/camera/control/leftUp/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        upStart(event,id){
            console.log('上鼠标按下')
            this.upUrl=require('@/assets/up-active-icon.png')
            this.$axios.post('/camera/control/up/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        upStop(event,id){
            console.log('上鼠标抬起')
            this.upUrl=require('@/assets/up-icon.png')
            this.$axios.post('/camera/control/up/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightUpStart(event,id){
            console.log('右上鼠标按下')
            this.rightUpUrl=require('@/assets/right-up-active-icon.png')
            this.$axios.post('/camera/control/rightUp/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightUpStop(event,id){
            console.log('右上鼠标抬起')
            this.rightUpUrl=require('@/assets/right-up-icon.png')
            this.$axios.post('/camera/control/rightUp/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftStart(event,id){
            // console.log(this.id)
            console.log('左转鼠标按下')
            this.leftUrl=require('@/assets/left-active-icon.png')
            this.$axios.post('/camera/control/left/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftStop(event,id){
            this.leftUrl=require('@/assets/left-icon.png')
            console.log('左转鼠标抬起')
            this.$axios.post('/camera/control/left/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightStart(event,id){
            console.log('右转鼠标按下')
            this.rightUrl=require('@/assets/right-active-icon.png')
            this.$axios.post('/camera/control/right/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightStop(event,id){
            console.log('右转鼠标抬起')
            this.rightUrl=require('@/assets/right-icon.png')
            this.$axios.post('/camera/control/right/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftDownStart(event,id){
            console.log('左下鼠标按下')
            this.leftDownUrl=require('@/assets/left-down-active-icon.png')
            this.$axios.post('/camera/control/leftDown/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        leftDownStop(event,id){
            console.log('左下鼠标抬起')
            this.leftDownUrl=require('@/assets/left-down-icon.png')
            this.$axios.post('/camera/control/leftDown/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        downStart(event,id){
            console.log('下鼠标按下')
            this.downUrl=require('@/assets/down-active-icon.png')
            this.$axios.post('/camera/control/down/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        downStop(event,id){
            console.log('下鼠标抬起')
            this.downUrl=require('@/assets/down-icon.png')
            this.$axios.post('/camera/control/down/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightDownStart(event,id){
            console.log('右下鼠标按下')
            this.rightDownUrl=require('@/assets/right-down-active-icon.png')
            this.$axios.post('/camera/control/rightDown/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
        rightDownStop(event,id){
            console.log('右下鼠标抬起')
            this.rightDownUrl=require('@/assets/right-down-icon.png')
            this.$axios.post('/camera/control/rightDown/stop/'+id, {
                data: {}
            }).then(res => {

            }).catch(err => {

            })
        },
  
    },
};
</script>

<style lang='scss' scoped>
.realTime {
    padding: 10px;
}
	//全屏按钮
    
    //播放按钮
    video::-webkit-media-controls-play-button {
        display: none;
    }
    //进度条
    video::-webkit-media-controls-timeline {
        display: none;
    }
    //观看的当前时间
    video::-webkit-media-controls-current-time-display{
        display: none;            
    }
    //剩余时间
    video::-webkit-media-controls-time-remaining-display {
        display: none;            
    }
    //音量按钮
    video::-webkit-media-controls-mute-button {
        display: none;            
    }
    video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;            
    }
    //音量的控制条
    video::-webkit-media-controls-volume-slider {
        display: none;            
    }
    //所有控件
    video::-webkit-media-controls-enclosure{ 
        display: none;
    }
    .operation-list {
            position: absolute;
            right: 200px;
            bottom: 20px;
            /*width: 150px;*/
            /*border: solid 1px blue;*/
            z-index: 10;
            .operation-item{
                img{
                    width: 32px;
                    -webkit-user-select: none;
                    -ms-user-select: none;
                    -webkit-user-drag: none;
                    user-select: none;
                }
                span{
                    padding: 3px 6px;
                    background: rgba(0,0,0,0.5);
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        .direction-list{
            position: absolute;
            right: 30px;
            bottom: 20px;
            width: 150px;
            z-index: 10;
            /*border: solid 1px blue;*/
            .direction-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                img{
                    width: 32px;
                    -webkit-user-select: none;
                    -ms-user-select: none;
                    -webkit-user-drag: none;
                    user-select: none;
                }
            }
        }
</style>
