<template>
    <div id="video">
        <div style="width: 100%;">
            <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
                <el-tab-pane label="视频监控" name="1">
                    <div class="header"><span>视频监控</span></div>
                    <div style="width: 100%;display: flex;justify-content: space-between;">
                        <div style="width: 20%;">
                            <el-tree style="height: 700px; overflow: scroll"
                            :data="devicesOptions" :props="defaultProps"
                            :default-expand-all="true"
                            :expand-on-click-node="false" @node-click="handleNodeClick"
                            ref="typeTree" node-key="deviceId" highlight-current 
                            ></el-tree> 
                        </div>  
                        <div class="contant">
                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
                                <iframe src="iframe.html?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
                            </div>
                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
                                <iframe src="iframe.html?type=1" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span>
                            </div>
                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
                                <iframe src="iframe.html?type=1" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span>
                            </div>
                            <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px">
                                <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
                                <iframe src="iframe.html?type=1" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</span>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="历史视频" name="2">
                    <div class="header"><span>历史视频</span></div>
                    <div style="width: 100%;display: flex;justify-content: space-between;">
                        <div style="width: 20%;">
                            <el-tree style="height: 700px; overflow: scroll"
                            :data="devicesOptions" :props="defaultProps"
                            :default-expand-all="true"
                            :expand-on-click-node="false" @node-click="handleNodeClick"
                            ref="typeTree" node-key="deviceId" highlight-current 
                            ></el-tree> 
                        </div>  
                        <div class="contant">
                            <div style="width: 100%;height: 600px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
                                <div style="width: 100%;height: 100%;position: fixed;"></div>
                                <iframe src="iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
                            </div> 
                        </div>
                    </div>

                </el-tab-pane> 
            </el-tabs>
        </div> 
       
        
    </div> 
</template>
<script src="./codebase/webVideoCtrl.js"></script>
<script> 
import $ from 'jquery';
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices"; 
export default {
name: 'videoMonitoring',
components: {
},
data() {
    return {
        activeName:'1',
        deviceData:[
        ],
        deviceName1:'监控1',
        deviceName2:'监控2',
        deviceName3:'监控3',
        deviceName4:'监控4',
        titleList:[],
        devicesOptions:[],
        defaultProps: {
          children: "children",
          label: "deviceName",
          id: "deviceId"
        },
        chosenWinNo:1,
        chosenChannel:null
    };
},
created() {
    // monitor.clickLogin()
},
mounted() {
    this.getKitchenDeviceSelect();
    this.videoLogin();  
},
methods:{
    // 门禁设备选项
    getKitchenDeviceSelect(){
        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
            this.devicesOptions = response.data 
        })
    },
    // 初始化监控列表
    videoLogin(){ 
        setTimeout(() => {
            this.iframeLogin('1','11')
            this.iframeLogin('2','12')
            this.iframeLogin('3','27')
            this.iframeLogin('4','28')
        }, 1000); 
    },
    //点击设备
    handleTabClick(tab){ 
        console.log(this.activeName)
        if(this.activeName=='1'){

        } 
        if(this.activeName=='2'){

        } 
    },
    chosenWindow(num){
        console.log(num)
        this.chosenWinNo = num;
        setTimeout(() => {
            this.iframeLoaded(this.chosenWinNo,this.chosenChannel) 
        }, 500); 
    },
    async handleNodeClick(data, node) {
        console.log(data)
        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
            let obj = JSON.parse(data.deviceExtendInfo)
            console.log(obj)
            this.chosenChannel = '28'
            setTimeout(() => {
                this.iframeLogin(this.chosenWinNo,this.chosenChannel) 
            }, 500); 
        }else{
            this.$modal.msgError("设备未绑定通道号");
        } 
      },
    iframeLoaded(domId,channel){ 
        console.log(domId)
        console.log(channel)
        var oLiveView = {
            iProtocol: 1,            // protocol 1��http, 2:https
            szIP: "192.168.1.10",    // protocol ip
            szPort: "80",            // protocol port
            szUsername: "admin",     // device username
            szPassword: "hzx12345", // device password
            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
            iChannelID: 1,           // channel no
            bZeroChannel: false      // zero channel
        };
        if(domId=='1'){
            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl1.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
            // oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
            //     success: function (xmlDoc) {
            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
            //         setTimeout(function () {
            //             oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
            //                 iStreamType: oLiveView.iStreamType,
            //                 iChannelID: channel,
            //                 bZeroChannel: oLiveView.bZeroChannel
            //             });
            //         }, 500);
            //     }
            // }); 
        }
        if(domId=='2'){
            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl2.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
            // oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
            //     success: function (xmlDoc) {
            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
            //         setTimeout(function () {
            //             oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
            //                 iStreamType: oLiveView.iStreamType,
            //                 iChannelID: channel,
            //                 bZeroChannel: oLiveView.bZeroChannel
            //             });
            //         }, 500);
            //     }
            // }); 
        }
        if(domId=='3'){
            var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl3.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
            // oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
            //     success: function (xmlDoc) {
            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
            //         setTimeout(function () {
            //             oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
            //                 iStreamType: oLiveView.iStreamType,
            //                 iChannelID: channel,
            //                 bZeroChannel: oLiveView.bZeroChannel
            //             });
            //         }, 500);
            //     }
            // }); 
        }
        if(domId=='4'){
            var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl4.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
            // oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
            //     success: function (xmlDoc) {
            //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
            //         setTimeout(function () {
            //             oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
            //                 iStreamType: oLiveView.iStreamType,
            //                 iChannelID: channel,
            //                 bZeroChannel: oLiveView.bZeroChannel
            //             });
            //         }, 500);
            //     }
            // }); 
        } 
    },
    iframeLogin(domId,channel){
        var oLiveView = {
            iProtocol: 1,            // protocol 1��http, 2:https
            szIP: "192.168.1.10",    // protocol ip
            szPort: "80",            // protocol port
            szUsername: "admin",     // device username
            szPassword: "hzx12345", // device password
            iStreamType: 2,          // stream 1��main stream  2��sub-stream  3��third stream  4��transcode stream
            iChannelID: 1,           // channel no
            bZeroChannel: false      // zero channel
        };
        if(domId=='1'){
            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        }
        if(domId=='2'){
            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        }
        if(domId=='3'){
            var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        }
        if(domId=='4'){
            var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        } 
    },
    openVideo(playId){
        // this.$emit('openVideo',true,playId);
        // this.videoVisible = true;
        // monitor.clickStopRealPlay()
        // monitor.clickStartRealPlay(null,'1')
        // this.$refs.vueRef.play();//播放
    },
   
}
}
</script>
<style lang="scss" scoped>
#video{
    width: 100%;
    height: 100%;
    margin: 0 0.2rem;
    .header{
        display: flex;
        align-items: center;
        color: #000;
        margin-top: 20px;
        span{
            margin-left: 40px;
            font-size: 20px;
            font-weight: bold;
        }
    }
    .contant{
        width: 80%;
        height: auto;
        // height: 85%;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        padding-top: 1%;
    }
}
    
</style>
