<template>
  <div class="box">
    <div class="box-title">视频巡航</div>
    <div class="leida" v-if="!list.length">
      <div class="tangjialing"></div>
    </div>

    <div class="box-container" v-if="list.length">
      <!-- 没有无人机提示 -->
      <div class="video-container">
        <video
          id="player-container-id"
          width="235px"
          height="178px"
          autoplay
          preload="auto"
          playsinline
          webkit-playsinline
        ></video>
      </div>

      <div class="none-uav">
        <div
          class="uav-item"
          v-for="(item, index) in list"
          :key="(index+1)*uavRandom"
          @click="
            flyToPoint([item.lng, item.lat]);
            playerVideo(item.account);
          "
        >
          <p>
            <img
              src="/img/uav-icon.png"
              style="width: 22px; margin-right: 10px"
              alt=""
            />
            <span style="font-size: 14px; line-height: 30px">{{
              item.model
            }}</span>
          </p>
          <p>{{ item.account }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isJson } from "../../../utils/index";
export default {
  name: "uavbox",
  data() {
    return {
      list: [],
      player: null,
      uavGraphicLayer: null,
      uavRandom:100,
    };
  },
  mounted() {
    this.drawUavPoint();
    window.addEventListener("onmessageWS", this.getSocketData);
  },
  methods: {
    getSocketData(evt) {
      let _this = this;
      if (isJson(evt.detail.data)){
        let obj = JSON.parse(evt.detail.data);
        if (obj != "close") {
          if (obj != "" && obj.ip) {
            _this.isAddUav(obj);
            
          }
        } 
      }else if(evt.detail.data.match("close")){
        let ip = evt.detail.data.split(",")[0];
        this.isUAVHave(ip); 
      }
    },
    isUAVHave(ip){
      // 如果匹配到IP就删除掉
      this.list.forEach((item,index)=>{
        if(item.ip == ip){
          this.list.splice(index,1);
        }
      })
      this.drawUavPoint();
    },
    isAddUav(obj){
      console.log("objjj",obj);
      let idx = null;
      let uav = this.list.find((item,index)=>{
        if(item.ip == obj.ip){
          idx = index;
        }
        return item.ip == obj.ip
      })

      if(!uav){
        this.list.push(obj);
      }else{
        this.list[idx] = obj;
      }
      this.uavRandom = Math.random();
      this.drawUavPoint();
      console.log(this.list);
    },
    flyToPoint(lngLat) {
      try {
        window.globalmap.flyToPoint(lngLat, { radius: 1200, pitch: -90 });
      } catch (e) {}
    },
    drawUavPoint() {
      if (this.uavGraphicLayer) {
        this.uavGraphicLayer.clear();
      } else {
        this.uavGraphicLayer = new this.mars3d.layer.GraphicLayer({
          id: 99999119,
        });
        window.globalmap.addLayer(this.uavGraphicLayer);
      }

      this.list.forEach((item, index) => {
        let graphic = new mars3d.graphic.ModelEntity({
          name: "无人机",
          position: [parseFloat(item.lng), parseFloat(item.lat), 556.58],
          style: {
            url: "//data.mars3d.cn/gltf/mars/wrj.glb",
            scale: 0.1,
            minimumPixelSize: 50,
            silhouette: false,
            label: {
              text: item.model,
              font_size: 14,
              color: "#ffffff",
              pixelOffsetY: -50,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 10000,
              distanceDisplayCondition_near: 0,
            },

            // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
            highlight: {
              label: {
                font_size: 30,
              },
              silhouette: true,
              silhouetteColor: "#ff0000",
              silhouetteSize: 4,
            },
          },
          attr: { remark: "示例3" },
        });
        this.uavGraphicLayer.addGraphic(graphic);
      });
    },
    playerVideo(phone) {
      window.websocket.send(phone);
      if (this.player) {
        this.player.src("http://live.hopetrytech.com/live/" + phone + ".flv");
      } else {
        this.player = TCPlayer("player-container-id", {});
        this.player.src("http://live.hopetrytech.com/live/" + phone + ".flv");
      }
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  text-align: left;
  position: relative;
}
.box-title {
  width: 100%;
  height: 17%;
  padding-left: 35px;
  font-size: 18px;
  color: #fff;
  padding-top: 4px;
  text-align: left;
  display: flex;
  align-items: center;
}
.box-container {
  width: 100%;
  padding-top: 12px;
}

.video-container {
  width: 235px;
  float: left;
  margin: 15px;
  height: 178px;
  background: rgba(0, 0, 0, 0.4);
}

/*  
 */
.none-uav {
  width: calc(100% - 280px);
  height:178px;
  margin: 15px 0px;
  text-align: center;
  float: left;
  color: #fff;
  line-height: 100px;
  overflow-y: auto;
}

::-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, 0.1),
    inset -1px -1px 0 rgba(0, 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, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}

.none-uav .uav-item {
  width: 100%;
  padding: 10px 10px;
  height: 80px;
  line-height: 30px;
  text-indent: 0px;
  text-align: left;
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 10px;
  cursor: pointer;
}

.none-uav .uav-item .uav-icon {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  float: left;
}
.none-uav .uav-item .uav-info {
  width: calc(100% - 40px);
  height: 80px;
  float: left;
}
.none-uav .uav-item p {
  margin-bottom: 0px;
}

.leida {
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.15) 25%,
      rgba(32, 255, 77, 0.15) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.15) 75%,
      rgba(32, 255, 77, 0.15) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.15) 25%,
      rgba(32, 255, 77, 0.15) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.15) 75%,
      rgba(32, 255, 77, 0.15) 76%,
      transparent 77%,
      transparent
    );
  background-size: 3rem 3rem;
  background-position: -5.2rem -5.2rem;
  width: calc(100% - 30px);
  height: 178px;
  position: absolute;
  top: 75px;
  left: 15px;
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
  box-sizing: border-box;
  overflow: hidden;
}

.leida::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(https://dingyue.nosdn.127.net/8kRm5cG5wM8B56dyKyYYOypaqqSCYSuoefqIEdAhmZvq71535100373299compressflag.jpg);
  background-size: 100% 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.tangjialing {
  background: -webkit-radial-gradient(
      center,
      rgba(32, 255, 77, 0.3) 0%,
      rgba(32, 255, 77, 0) 75%
    ),
    -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(
            32,
            255,
            77,
            0
          )
          18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%),
    -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d
          50%, rgba(32, 255, 77, 0) 50.2%),
    -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d
          50%, rgba(32, 255, 77, 0) 50.2%);
  background: radial-gradient(
      center,
      rgba(32, 255, 77, 0.3) 0%,
      rgba(32, 255, 77, 0) 75%
    ),
    repeating-radial-gradient(
      rgba(32, 255, 77, 0) 5.8%,
      rgba(32, 255, 77, 0) 18%,
      #20ff4d 18.6%,
      rgba(32, 255, 77, 0) 18.9%
    ),
    linear-gradient(
      90deg,
      rgba(32, 255, 77, 0) 49.5%,
      #20ff4d 50%,
      #20ff4d 50%,
      rgba(32, 255, 77, 0) 50.2%
    ),
    linear-gradient(
      0deg,
      rgba(32, 255, 77, 0) 49.5%,
      #20ff4d 50%,
      #20ff4d 50%,
      rgba(32, 255, 77, 0) 50.2%
    );
  width: 408px;
  height: 408px;
  max-height: 75vh;
  max-width: 75vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -70%);
  border-radius: 50%;
  /* border: 0.2rem solid #0cdd36;; */
  overflow: hidden;
}
.tangjialing:before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: bei 5s infinite;
  animation-timing-function: linear;
  animation-delay: 1.4s;
}
.tangjialing:after {
  content: " ";
  display: block;
  background-image: linear-gradient(
    44deg,
    rgba(0, 255, 51, 0) 50%,
    #00bb22 100%
  );
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: zhuan 5s infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  border-radius: 100% 0 0 0;
}

@keyframes zhuan {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bei {
  14% {
    background: radial-gradient(
      2vmin circle at 75% 70%,
      #ffffff 10%,
      #20ff4d 30%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  14.0002% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      );
  }
  25% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 56% 86%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      );
  }
  26% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 56% 86%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      );
    opacity: 1;
  }
  100% {
    background: radial-gradient(
        2vmin circle at 75% 70%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 63% 72%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        2vmin circle at 56% 86%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      );
    opacity: 0;
  }
}
</style>
