<template>
  <div class="onebuttoncall-container">
      <div class="title">在线人员</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"  @click="callPhone">呼叫</el-button>
            </div>
        </div>
      <div class="box-container">
          <div class="table-body">
              <div class="table-li" v-for="(item,index) in list" :key="index">
                 <div class="flex jc-sb">
                    <div style="positon:relative;width:160px;left:50px;">
                      <div style="color:#156EF9;font-size:18px;">{{item.name}}</div>
                      <div>类型：{{userIdentity[item.type]}}{{item.phone}}</div>
                    </div>
                  <div class="flex ai-c jc-e" style="width:75px">
                        <img class="img-box"  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 v-if="false" class="img-box"  src="/img/phone.png" @click="callPhoneOne(item.phone)" />
                  </div>
                 </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import { getMethodCommon, postMethodCommon } from '../../../api/common';
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath';
import axios from 'axios'
  export default {
    name: 'onebuttoncall',
    data(){
        return {
            list:[
               
            ],
            listQuery:{
                pageIndex:1,
                pageSize:12
            },
            checkPhoneArr:[],
            checkRandom:1,
            checkList:[],
            checkNumber:[],
            total:0,
            callText:null,
            callTextShow:false,
            phones:null,
            markGraphicLayerArr:null,
            userIdentity:["护林员","消防员","护林员","消防员","巡查员","管理人员"],
            startPoint:null,
            endPoint:null,
            userTimer:null,
        }
    },
    created(){
        window.designRoute = this.designRoute;
        window.deleteRoute = this.deleteRoute;

        this.getListData();

        window.videoCall = this.videoCall;
    },
   
    mounted(){
        let _this = this;
        this.userTimer = setInterval(function(){
            _this.getListData();
        },5000)
    },
    beforeDestroy(){
        if(this.markGraphicLayer){
            this.markGraphicLayer.clear();

            clearInterval(this.userTimer);
        }
    },  
    methods:{
        checkChange(){

        },
        phoneCheckClick(item){

        },
        getListData(){
            getMethodCommon("/FireManagement/GetPointByAPP",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.list = res.data
                    this.total = res.count
                    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); 
              }
          },
        callPhone(){
            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() {
            let _this = this;
            if (this.markGraphicLayer == null) {
                this.markGraphicLayer = new mars3d.layer.GraphicLayer();
                window.globalmap.addLayer(this.markGraphicLayer);
            }
            this.markGraphicLayer.clear();
            
            this.markGraphicLayerArr = [];

            this.list.forEach((item, index) => {
                let showVideo = item.type == '人员' ? 'inline':'none';
                let graphic = new mars3d.graphic.BillboardEntity({
                position: [item.lng, item.lat],
                style: {
                    image: "/img/jiuyuanrenyuan.png",
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    clampToGround: true,
                    scale: 0.4,
                    label: {
                    text: "",
                    font_size: 14,
                    color: "#ffffff",
                    pixelOffsetY: 10,
                    distanceDisplayCondition: true,
                    distanceDisplayCondition_far: 500000,
                    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-value">${_this.userIdentity[item.type]}</div>
                                        </div>
                                        <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">
                                                <span class="label-tag data-value-status-2"  title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span>
                                            </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.markGraphicLayerArr.push(graphic);
                this.markGraphicLayer.addGraphic(graphic);
            });
        },
        videoCall(phone){
            let userId = localStorage.getItem("userName");

            let wind = window.open("https://ssl.hopetrytech.com:9239/#/?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});
        },
        deleteRoute(){
            clearRouterFunc();
        },
        designRoute(userId){
            getMethodCommon("/Patrol/LoadUserNavigationByUserId",{id:userId}).then(res=>{
                if(res.code == 200){
                    if(res.data){
                        this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
                        this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
                        this.getRoutePath();
                    }else{
                        this.$message({
                            type:"warning",
                            message:"当前人员暂无任务",
                        })
                    }
                }
            })
        },
        getRoutePath() {
        // 获取路线数据
            let startCoor = this.startPoint.split(",")
            let endCoor = this.endPoint.split(",");
            let params = {
                startlng: parseFloat(startCoor[0]),
                startlat: parseFloat(startCoor[1]),
                endlng: parseFloat(endCoor[0]),
                endlat: parseFloat(endCoor[1]),
                areaname: localStorage.getItem("areaName"),
            };
            getRouterFunc(params,"all").then(res => {
                drawRouterFunc(res)
            }).catch(err => {
                clearRouterFunc()
            })
        },
    }
  }
</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:60px;
      line-height:60px;
      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% - 70px);
          overflow-y: auto;
      }
  
       .table-body .table-li{
           width: calc( 33% - 20px);
           margin:0px 10px;
           float:left;
           height:99px;
           background: #082929;
           margin-bottom: 8px;
           padding: 10px 10px;
       }

        .img-box{
            width:28px;
            margin:0px 4px;
            cursor:pointer;
            position:relative;
        }
       
 
      
     
  
       ::-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>
