<template>
  <div class="onebuttoncall-container">
      <div class="title">在线人员 
        <span style="font-size:14px;color:#aaa;">（{{ list.length }}人）</span>

           <span style="font-size:14px;float:right;margin-right:30px;">

            显示人员位置：
            <el-switch
            v-model="showLayer"
            active-color="#13ce66"
            >
            </el-switch>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           </span>
        </div>

        <div class="call-text-container" v-if="callTextShow">
            <div class="call-title">呼叫内容</div>
            <div style="padding:15px;">
                 <el-input placeholder="请输入呼叫内容" v-model="callText"></el-input>
                 <p>&nbsp;</p>
                <el-button type="default" size="small" @click="callTextShow = false;">取消</el-button>
                <el-button type="primary" size="small" :disabled="loading" @click="callPhone">呼叫</el-button>
            </div>
        </div>

      <div class="box-container">
            <!-- 搜索人员位置 -->
            <el-select v-model="listQuery.type" placeholder="请选择" size="mini" @change="getUserList">
                <el-option
                v-for="(item,index) in filterOptions"
                :key="index"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <!--  -->
            <el-input type="text" size="mini" v-model="onlineusername" style="width:250px;margin-left:15px;margin-right:15px;" placeholder="请输入人员姓名" ></el-input>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="filterList">搜索</el-button>
          <div class="table-body">
              <div class="table-li" v-for="(item,index) in showList" :key="index">
                 <div class="to-top">
                    <el-tooltip class="item" effect="dark" content="取消置顶" placement="bottom-start">
                        <img v-show="item.toTop" @click="toTopList(item,'delete')" src="/img/totop-icon-active.png" alt="">
                    </el-tooltip>


                    <el-tooltip class="item" effect="dark" content="添加置顶" placement="bottom-start">
                        <img v-show="!item.toTop" @click="toTopList(item,'add')" src="/img/totop-icon.png" alt="">
                    </el-tooltip>

                 </div>
                 <div class="flex jc-sb">
                    <div style="positon:relative;width:160px;left:50px;">
                      <div style="color:#156EF9;font-size:18px;">
                        {{item.name}}
                        <!-- <el-button type="success" round icon="el-icon-plus" size="mini" style="padding:2px;"></el-button> -->
                    </div>

                        <div>
                            <p style="margin-bottom:4px;">类型：{{item.type}}</p>
                            <p>{{item.phone}}</p>
                        </div>
                    </div>
                  <div class="operate-button-container">
                        <img class="img-box" v-if="item.type!= '对讲机'" src="/img/homeimg/video-call-icon.png" @click="videoCall(item.phone)" />
                        <img class="img-box" src="/img/homeimg/to-position-icon.png" @click="toPosition([item.lng,item.lat])" />
                        <img class="img-box" v-if="item.type!= '对讲机'" src="/img/phone.png" @click="callPhoneOne(item.phone)" />
                  </div>
                 </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../../../api/common';
import {compareArray} from '../lib/compareArray.js'
  export default {
    name: 'onebuttoncall',
    data(){
        return {
            showList:[],
            onlineusername:null,
            oldList:[],
            list:[],
            listQuery:{
                pageIndex:1,
                pageSize:12,
                type:0
            },
            showLayer:false,
            checkPhoneArr:[],
            checkRandom:1,
            checkList:[],
            checkNumber:[],
            total:0,
            callText:null,
            callTextShow:false,
            phones:null,
            markGraphicLayerArr:null,
            topList:[],
            teamIcons:{},
            filterOptions:[
                {
                    label:"全部",
                    value:0
                },{
                    label:"管理员",
                    value:1
                },{
                    label:"护林员",
                    value:2
                },{
                    label:"巡查员",
                    value:3
                },{
                    label:"网格员",
                    value:4
                }
            ]
        }
    },
    created(){
        // 获取队伍图标信息
        // this.getTeamIcon();

        this.topList =  localStorage.getItem("topList") ? JSON.parse(localStorage.getItem("topList")) : [];
        
        if(window.globalmap){
            this.getListData();
        }
        window.videoCall = this.videoCall;
    },
    mounted(){
        let _this = this;
        setInterval(function(){
            _this.getListData();
        },5000)
    },
    watch:{

      onlineusername:function(e){
        this.filterList();
      },
      showLayer:function(e){
        if(!e){
            if(this.markGraphicLayer){
                this.markGraphicLayer.clear();
                this.oldList = [];
            }
        }
      }
    },
    methods:{
        getUserList(e){
            this.getListData();
        },
        getTeamIcon(){
            getMethodCommon("/FireCodePC/GetUserUnit").then(res=>{
                if(res.code == 200){
                    res.data.forEach((item,index)=>{
                        this.teamIcons.item['unitName'] = item.imaUrl
                    })
                }
            })
        },
        filterList(){
            this.showList = [];
            this.list.forEach((item,index)=>{
                if(this.onlineusername){
                    if(item.name && item.name.match(this.onlineusername)){
                    this.showList.push(item);
                    }
                }else{
                    this.showList = this.list;
                }
            })
            this.handleShowList();
        },
        // 处理置顶显示
        handleShowList(){
            this.showList.forEach((item,index)=>{
                this.showList[index].toTop = 0;
                let user = this.topList.find((it,idx)=>{
                    return it.createId == item.createId;
                })
                if(user){
                    this.showList[index].toTop = 1;
                }
            })
            this.showList = this.showList.sort((a,b)=>{
                return b.toTop - a.toTop;
            })
        },  
        toTopList(item,type){
            if(type == 'add'){ // 添加
                let user = this.topList.find((it,idx)=>{
                    return it.createId == item.createId;
                })
                if(!user){
                    this.topList.push(item);
                }
            }else if(type == 'delete'){ // 取消
                this.topList.forEach((it,idx)=>{
                    if(it.createId == item.createId){
                        this.topList.splice(idx,1);
                    }
                })
            }
            localStorage.setItem("topList",JSON.stringify(this.topList));
            this.handleShowList();
        },
        checkChange(){

        },
        phoneCheckClick(item){

        },
        getListData(){
            getMethodCommon("/FireManagement/GetPointByUserType",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.list = res.data
                    this.total = res.count
                    this.filterList();
                    this.addLayerPoint();
                }
            })
        },
        callPhoneOne(phone){
            this.phones = phone;
            this.callTextShow = true;
        },
        callPhoneAll(){
            this.phones = this.checkList.join(",")
            this.callTextShow = true;
        },
        checkNews(index){
            this.list[index].check = !this.list[index].check;

            this.getCheckList(this.list[index].check,this.list[index].Account);

            this.getCheckNumber(this.list[index].check,this.list[index]);
            this.checkRandom = Math.random()*100000000;
        },
        getCheckList(type,id){
              if(type){
                  let idx = this.checkList.lastIndexOf(id);
                  if(idx == -1){
                      this.checkList.push(id);
                  }else{
                      
                  }
              }else{
                 let idx = this.checkList.lastIndexOf(id);
                 this.checkList.splice(idx,1); 
              }
          },
          getCheckNumber(type,options){
              let idx = null;
              if(type){
                  
                  let obj = this.checkNumber.find((item,index)=>{
                      return options.phone == item.phone
                  })
  
                  if(!obj){
                      this.checkNumber.push(options);
                  }else{
  
                  }
              }else{
                this.checkNumber.forEach((item,index)=>{
                    if(item.phone == options.phone){
                        idx = index;
                    }
                })
                 this.checkNumber.splice(idx,1); 
              }
          },
          buttonLoading(){
            this.loading = true;
            let _this = this;
            setTimeout(function(){
                _this.loading = false;
            },10000)
          },    
        callPhone(){
            this.buttonLoading();
            let date = new Date();
            let dates =  date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";

            let param = {
                phoneNumbers: this.phones,
                time: dates,
                address:"",
                work:this.callText
            }

          postMethodCommon('/FireCodePC/EventAssign',param).then(res =>{
            if(res.code == 200){
              this.$message({
                message: res.message,
                type: 'success'
              });

              this.callText = null;
              this.callTextShow = false;
            }
          })
        },
        addLayerPoint() {
            if(!this.showLayer){
                if(this.markGraphicLayer){
                    this.markGraphicLayer.clear();
                }
                return;
            }
            // 通过新老数组比较，获取新增、删除、更新的数据
            let compareResult = compareArray(this.oldList,this.list,'createId')
            // 如果有新增的人员，则添加图标
            if(compareResult.add.length > 0){
                // 第一次添加时叠加图层
                if (this.markGraphicLayer == null) {
                    this.markGraphicLayer = new mars3d.layer.GraphicLayer();
                    window.globalmap.addLayer(this.markGraphicLayer);
                }
                compareResult.add.forEach((item, index) => {
                    let showVideo = (item.type == '护林员' || item.type == '其他') ? 'block':'none';
                    let img = (item.type == '护林员' || item.type == '其他')  ? 'jiuyuanrenyuan' : 'duijiangji'
                    let graphic = new mars3d.graphic.BillboardEntity({
                        id:item.createId,
                        position: [item.lng, item.lat],
                        style: {
                            image: "/img/"+img+".png",
                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            clampToGround: true,
                            scale: 0.6,
                            label: {
                                text: item.name,
                                font_size: 12,
                                color: "#ffffff",
                                pixelOffsetY: -48,
                                distanceDisplayCondition: true,
                                distanceDisplayCondition_far: 2000,
                                distanceDisplayCondition_near: 0,
                            },
                        },
                        popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                                <div class="marsTiltPanel-wrap">
                                    <div class="area">
                                        <div class="arrow-lt"></div>
                                        <div class="b-t"></div>
                                        <div class="b-r"></div>
                                        <div class="b-b"></div>
                                        <div class="b-l"></div>
                                        <div class="arrow-rb"></div>
                                        <div class="label-wrap">
                                            <div class="title">${item.name}</div>
                                            <div class="label-content">
                                                <div class="data-li">
                                                    <div class="data-label" >电话/对讲机：</div>
                                                    <div class="data-value">${item.phone}</div>
                                                </div>
                                                <div class="data-li">
                                                    <div class="data-label"></div>
                                                    <div class="data-value"  title="视频通话" >
                                                       <div onclick="videoCall('${item.phone}')" style="background-image:url(/img/onlineuser-video-button.png);background-size:100% 100%;width:100px!important;height:28px!important;display:${showVideo};">&nbsp;</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="b-t-l"></div>
                                    <div class="b-b-r"></div>
                                </div>
                                <div class="arrow" ></div>
                            </div>`,
                        popupOptions: {
                            offsetY: -30,
                            template: "{content}",
                            horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
                            verticalOrigin: "Cesium.VerticalOrigin.CENTER",
                        },
                        pointerEvents: true,
                    });

                    this.markGraphicLayer.addGraphic(graphic);
                    // 初始化位置
                    // graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),0);
                });
            }
            // 如果相同的数据，则更新坐标信息
            if(compareResult.same.length > 0){
                compareResult.same.forEach((item,index)=>{
                    let graphic = this.markGraphicLayer.getGraphicById(item.createId);
                    graphic.setCallbackPosition([item.lng,item.lat]);
                    // if (graphic.isPrivate) {
                    //     return
                    // } 
                    // graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),5);
                })
            }
            // 如果有删除的数据，则删除图标
            if(compareResult.delete.length > 0){
                compareResult.delete.forEach((item,index)=>{
                    let graphic = this.markGraphicLayer.getGraphicById(item.createId);
                    this.markGraphicLayer.removeGraphic(graphic);
                })
            }
            // 拷贝最新数据为老数据
            this.oldList = [...this.list];
        },
        videoCall(phone){
            let userId = localStorage.getItem("userName");
            let wind = window.open("https://ssl.hopetrytech.com:9237?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
            wind.onload = function(){
                wind.document.title = "视频通话";
            }
        },
        toPosition(lngLat){
            window.globalmap.flyToPoint(lngLat,{radius:2000,"pitch":-90});
        }
    }
  }
</script>

<style scoped>
  .onebuttoncall-container{
      width:100%;
      height:100%;
      background-image: url(/img/biaohui.png);
      background-size:100% 100%;
  }

  .title{
      font-size:20px;
      color:#fff;
      text-indent:22px;
      height:50px;
      line-height:50px;
      text-indent:46px;
    }
    .filter-container{
        padding:15px 30px;
    }
    .box-container{
          width: calc( 100% - 0px);
          padding:0px 12px;
          height: calc( 100% - 0px);
      }
      .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% - 125px);
          overflow-y: auto;
          margin-top:15px;
      }
  
       .table-body .table-li{
           width: calc( 33% - 20px);
           margin:0px 10px;
           float:left;
           height:99px;
           background: #082929;
           margin-bottom: 8px;
           padding: 10px 10px;
           position:relative;
       }
       .operate-button-container{
        width:110px;
        height:36px;
        float:left;
        position:absolute;
        bottom:0px;
        right:0px;
        text-align: right;
       }
        .img-box{
            width:26px;
            margin:0px 4px;
            cursor:pointer;
            position:relative;
        }
       
 
   .to-top{
    width:32px;
    padding:8px 0px;
    height:32px;
    position:absolute;
    top:0px;
    right:0px;
    cursor:pointer;
   }   
     
  
       ::-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)
  }

    .checkbox-container{
      width:18px;
      height:18px;
      position:relative;
      font-size:16px;
      line-height:18px;
      color:#fff;
      top:12px;
      margin-right:10px;
      float:left;
      background: rgba(2,0,77,0.4);
        box-shadow: inset 0px 0px 34px 0px #A15E01;
        border: 1px solid #F18B00;
      cursor: pointer;
  }

  ::v-deep .el-pager li{
      background:none;
      color:#fff;
  }

  .call-text-container{
     width:400px;
     height:300px;
     background-image:url(/img/goods.png);
     background-size:100% 100%;
     position:absolute;
     top:50%;
     left:50%;
     z-index:100000000000;
     transform: translate(-50%,-50%);
  }
    .call-title{
        width:100%;
        height:40px;
        line-height: 40px;
        color:#fff;
        text-indent:15px;
        z-index:1000000;
    }
  .callbox{
      width:100%;
      padding-top:15px;
  }

  ::v-deep .el-checkbox__label{
      color:#fff;
  }
</style>
