<template>
  <div class="box">
    <div class="box-title">无人机巡航</div>

    <div class="video-container">
      <div class="radar"></div>
    </div>
    <div class="box-container">
        <!-- 没有无人机提示 -->
        <div class="item" onclick="">
          <span class="uav-icon" data-uavname="${item.createuser}" data-phone="${item.createuser}">
            <img src="/img/uav-icon.png" alt="" >
          </span>
          <span>DJ Mavic 2 Air</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://221.2.83.254:7002/",
        uavGraphicLayer:null,
      }
    },
    mounted(){
      this.initWebSocket();
    },
    methods:{
      // 创建websocket
      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 () { // 监听长链接关闭 
          // jianshougaoshangqingcao

              _this.websocketReconnect();
          };
        }else {
          this.$message({
            type:"error",
            message:"当前浏览器没有长连接，无法获取无人机实时信息！！！"
          })
        }
      },
      // websocket断开重连机制
      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:100%;
        height:100%;
        background-image: url(/img/goods-pingyixian.png);
        background-size:100% 100%;
        text-align: left;
    }
    .box-title{
        width:100%;
        height:40px;
        line-height:40px;
        text-indent:20px;
        text-align:center;
        color: #fff;
    }

    .video-container{
      width:100%;
        height: calc( 100% - 100px);
    }
    .box-container{
        width:100%;
        height: 40px;
        
    }
    .box-container .item{
      width:100px;
      height:40px;
      float:left;
    }
    .box-container .item img{
      width:32px;
      height:32px;
    }
    .none-uav{
        width:100%;
        height:100%;
        text-align: center;
        color:#fff;
        line-height:100px;
    }

    *{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
}

.radar{
    width: 200px;
    height: 200px;
    background: 
        /* 重复的径向渐变 圈圈 */
        repeating-radial-gradient(
            transparent 0,
            transparent 30px,
            darkcyan 30px,
            darkcyan 32px
        ),
        /* 线性渐变 中间横线 */
        linear-gradient(
            transparent 49.75%,
            darkcyan 49.75%,
            darkcyan 50.25%,
            transparent 50.25%
        ),
        /* 线性渐变 中间竖线 */
        linear-gradient(
            90deg,
            transparent 49.75%,
            darkcyan 49.75%,
            darkcyan 50.25%,
            transparent 50.25%
        );
    position: relative;
    border-radius: 50%;
}
.radar::before{
    content: "";
    position: absolute;
    width: calc(200px / 2);
    height: calc(200px / 2);
    background: linear-gradient(
        45deg,
        rgba(0,0,0,0) 50%,
        rgba(0,255,255,1) 100%
    );
    border-radius: 100% 0 0 0;
    top: calc(48px / 2);
    left: calc(48px / 2);
    /* 执行动画: 动画名称 时长 线性的 无限次播放 */
    animation: scanning 5s linear infinite;
    /* 设置旋转元素的基点位置 */
    transform-origin: 100% 100%;
}

/* 定义动画 */
@keyframes scanning {
    to{
        transform: rotate(360deg);
    }
}
</style>