<template>
  <div class="box">
    <div class="box-title">在线人员</div>
    <div class="box-container">
        <div class="table-header">
            <div style="width:15%;">姓名</div>
            <div style="width:15%;">类型</div>
            <div>电话</div>
            <div>单位</div>
            <div style="width:30%;">操作</div>
        </div>
        <div class="table-body">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div style="width:15%;">{{item.name}}</div>
                <div style="width:15%;">{{item.type}}</div>
                <div>{{item.phone}}</div>
                <div>{{item.unit}}</div>
                <div style="width:30%;">
                  <el-button type="primary" size="mini" @click="flyToPosition([item.lng,item.lat])" icon="el-icon-location-outline"></el-button>
                  <el-button type="primary" size="mini" @click="videoCall(item.phone)" icon="el-icon-video-camera"></el-button>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
let BASE_URL = process.env.VUE_APP_BASE_API
import axios from "axios";
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
import { isJson } from "../../../utils/index";
  export default {
    props:['globalmap'],
    name: 'monitorbox',
    data(){
        return{
            list:[
              
            ]
        }
    },
    created(){
        // this.getMonitorList();
    },
    mounted(){
      // 通过监听WebSocket 获取在新人员信息
      window.addEventListener("onmessageWS", this.getSocketData);

      let _this = this;
      _this.getPointer("人员信息");
      setInterval(function(){
        _this.getPointer("人员信息");
      },5000)
    },
    methods:{
      getSocketData(res){
        let _this =  this;
        if (!isJson(res.detail.data)) return;
        let obj = JSON.parse(res.detail.data)
        if(obj.Module){
            if(obj.Module == '上线' || obj.Module == '下线' ){
                _this.getMonitorList()
            }  
        }
      },
      videoCall(phone){
          let userId = localStorage.getItem("userName") || ''
          if(userId && phone){
            let wind = window.open("https://ssl.hopetrytech.com:9233?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
            wind.onload = function(){
                wind.document.title = "视频通话";
            }
          }
      },
      flyToPosition(lngLat){
        this.globalmap.flyToPoint(lngLat,{radius:400,"pitch":-90});
      },
      showLCmonitorbox(lng,lat){
        // this.globalMap.fl 
        
      },
      getMonitorList(){
          axios({
              method: 'get',
              headers:{
                  "X-Token":localStorage.getItem("X-Token")
              },
              url: BASE_URL+'/FireManagement/GetPointByAPP',
          }).then(res => {
              this.list = res.data.data;
          })
      },
      getPointer(type){
          getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
              if(res.code == 200){
                this.list = res.data;
              }
          })
      },
    }
  }

  /*
    
  */ 
</script>

<style scoped>
  .box{
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-image: url(/img/goods-pingyixian.png);
        background-size: 100% 100%;
        text-align:left;
        z-index: 99;
  }
  .box-title{
        width:100%;
        height:45px;
        overflow: hidden;
        line-height:40px;
        color:#eee;
        text-align: center;
        font-size:18px;
    }
    .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:20%;
        border-bottom:1px dashed #008cff;
        padding-bottom:8px;
    }
    .table-body{
        width:100%;
        height: calc( 100% - 40px);
        overflow-y: auto;
    }

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

     .table-body .item:nth-child(2n){
         background:#0059ff50;
     }
    
    .table-body .item div{
        float:left;
        width:20%;
        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>