<template>
  <div class="box">
    <div class="box-title">无人机巡航</div>
    <div class="box-container">
        <!-- 没有无人机提示 -->
        <div class="item" onclick="">
          <span>DJ Mavic 2 Air</span>
          <span>${item.createuser}</span>
          <span class="video-icon" data-uavname="${item.createuser}" data-phone="${item.createuser}">
            <img src="/img/video-icon.png" onclick="">
          </span>
          <span class="uav-icon" data-uavname="${item.createuser}" data-phone="${item.createuser}">
            <img src="/img/uav-icon.png" alt="" >
          </span>
        </div>

        <div class="none-uav">当前暂无无人机巡航</div>
    </div>
  </div>
</template>

<script>
// import AppConfig from '../../../../public/config/app.json'
  export default {
    name: 'uavbox',
    props:["globalMap"],
    data(){
      return {
        myWebSocket:null,
        lockReconnect:false,
        webSocket_URL:"ws://123.132.248.154:9211/",
        uavGraphicLayer:null,
      }
    },
    mounted(){
      this.initWebSocket();
    },
    methods:{

      initWebSocket(){
        if ("WebSocket" in window) {
          let _this = this;
          this.myWebSocket = new WebSocket(this.webSocket_URL);
          this.myWebSocket.onopen = function () {  //长连接打开
            this.message = "当前暂无无人机巡航";
          };
          this.myWebSocket.onmessage = function (evt) { //长连接接收到消息
              // 获取到信息之后更新无人机状态栏 和 无人机位置
              if(evt.data != 'close'){
                let data = JSON.parse(evt.data);
                if(data != ""){
                  _this.getUavData([data]);
                }else{
                  _this.getUavData([]);
                }
              }else{
                _this.getUavData([]);
              }
          };
          this.myWebSocket.onclose = function () { //长连接关闭
            _this.websocketReconnect();
          };
        }else {
          this.$message({
            type:"error",
            message:"当前浏览器没有长连接，无法获取无人机实时信息！！！"
          })
        }
      },
      websocketReconnect(){
        if (this.lockReconnect) {       // 是否已经执行重连
          return;
        };
        this.lockReconnect = true;
        // 没连接上会一直重连，设置延迟避免请求过多
        let _this = this;
        var tt = null;
        tt && clearTimeout(tt);
        tt = setTimeout(function () {
          _this.initWebSocket();
          _this.lockReconnect = false;
        }, 120000)
      },
      getUavData(data) {
        if(data.length>0){  // 如果有无人机
          let pathInfo = [
            {
              "uavname": data[0].model,
              "username": data[0].account,
              "createuser": data[0].account,
              "path": [
                data[0], data[0]
              ]
            }
          ]
          this.uavGraphicLayer.clear();
          this.addWuRenJiGraphic(pathInfo);
          this.getUavList(pathInfo);
        }else{   //如果没有无人机
          this.uavGraphicLayer.clear();
          this.getUavList([]);
          this.message = "当前暂无无人机巡航"
        }
      }
    }
  }
</script>

<style scoped>
    .box{
        width:250px;
        height:200px;
        background-image: url(/img/goods-pingyixian.png);
        background-size:100% 100%;
        text-align: left;
    }
    .box-title{
        width:100%;
        height:50px;
        line-height:50px;
        text-indent:20px;
        color: #00FFF0;
    }
    .box-container{
        width:100%;
        height: calc( 100% - 50px);
        
    }
    .none-uav{
        width:100%;
        height:100%;
        text-align: center;
        color:#fff;
        line-height:100px;
    }
</style>