<template>
  <div class="box">
    <div class="box-title">视频监控</div>
    <div class="box-container">
        <iframe
            id = "iframe"
            ref="fIframe"
            scrolling="no"
            frameborder ="0"
            width="100%"
            height="100%"
            src="/monitor/hk/index.html"     
            >
        </iframe>
    </div>
  </div>
</template>

<script>
import axios from "axios";
  export default {
    name: 'monitorbox',
    props:["deviceId","channelId"],
    data(){
        return{
            list:[],
            monitorPlayer:null,
        }
    },
    mounted(){
        let arr = [
            this.deviceId,
            this.deviceId,
            "23604396",
            "221.2.83.54",
            1443,
            "NZJ8L3bxCOOV6rtTFjsx"
        ]

        let _this = this;

        this.$refs.fIframe.onload = function () {
            _this.$refs.fIframe.contentWindow.postMessage(arr)
        }

        window.addEventListener('message', (e)=>{
            this.$emit("closeMonitor")
        })
    }
  }
</script>

<style scoped>
  .box{
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 99;
  }
  .box-title{
        width:100%;
        height:40px;
        line-height:50px;
        text-indent:20px;
        color: #00FFF0;
    }
    .box-container{
        width: calc( 100% - 0px);
        padding:0px 12px;
        height: calc( 100% - 60px);
    }
    .table-header{
        width: calc( 100% - 10px);
        height:25px;
        color:#fff;
        text-align: center;
    }
    .table-header div{
        float:left;
        width:25%;
        border-bottom:1px dashed #00FFF0;
        padding-bottom:8px;
    }
    .table-body{
        width:100%;
        height: calc( 100% - 40px);
        overflow-y: auto;
    }

     .table-body .item{
         width:100%;
         height:36px;
         background: #00ffee2f;
         font-size:12px;
         text-align: center;
         line-height:36px;
         cursor:pointer;
     }

     .table-body .item:nth-child(2n){
         background:#00ffee50;
     }
    
    .table-body .item div{
        float:left;
        width:25%;
        color:#eee;
        overflow: hidden;
        height:36px;
    }

     ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
  border: 0
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
  background-color: #797979;
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
  border: 0
}

::-webkit-scrollbar-thumb:hover {
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
  background-color: rgba(0, 0, 0, .4)
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
  background-color: rgba(0, 0, 0, .5)
}

</style>