<template>
  <div class="box">
    <div class="box-name">现场人员</div>
    <div class="close-button" @click="close">
      <i class="el-icon el-icon-close"></i>
    </div>
    <div class="box-container">
      <div class="flex fc-w fz-16 column" style="margin: 10px">
        <div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
      </div>
      <div class="table-body">
        <div
          class="item flex jc-sb"
          v-for="(item, index) in listDataInfo.onOffLineInfo"
          :key="index"
        >
          <div>{{ item.time }}</div>
          <div>{{ item.name }}{{ item.typeName }}了</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import axios from "axios";
import { postMethodCommon, getMethodCommon } from "@/api/common.js";
import { WS_URL } from "../../../utils/websocketApi";
export default {
  name: "monitorbox",
  computed: {
    ...mapGetters([]),
    //trtc
    ...mapState({
      websocket: (state) => state.Emergency.listenWebSocket,
    }),
  },
  data() {
    return {
      listDataInfo: [],
      pointData: [],
      markGraphicLayer: null,
      markGraphicLayerArr: [],
    };
  },
  watch: {},
  created() {
    this.getOnLineInfo();
    this.initWebSocket();
    setInterval(() => {
      this.pointData = [];
      let arr = ["人员信息", "对讲机信息"];
      arr.forEach((item) => {
        this.getPointer(item);
      });
    }, 120000);
  },
  mounted() {
    window.videoCall = this.videoCall;
  },
  methods: {
    close() {
      this.markGraphicLayerArr.forEach((item) => {
        this.markGraphicLayer.removeGraphic(item);
      });
      this.$emit("close");
    },
    videoCall(phone) {
      this.$emit("videoCall", phone);
    },
    getOnLineInfo() {
      getMethodCommon("/FireManagement/GetOnOffLineInfo").then((res) => {
        this.listDataInfo = res.data;
      });
    },
    getPointer(type) {
      getMethodCommon("/FireManagement/GetPointByType", { type: type }).then(
        (res) => {
          res.data.forEach((item) => {
            this.pointData.push(item);
          });
          this.addLayerPoint();
          console.log("this.markGraphicLayerArr", this.markGraphicLayerArr);
        }
      );
    },
    addLayerPoint() {
      if (this.markGraphicLayer == null) {
        this.markGraphicLayer = new mars3d.layer.GraphicLayer();
        window.globalmap.addLayer(this.markGraphicLayer);
      }
      this.markGraphicLayerArr.forEach((item) => {
        this.markGraphicLayer.removeGraphic(item);
      });
      this.markGraphicLayerArr = [];
      this.pointData.forEach((item, index) => {
        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.7,
            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-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);
      });
    },
    initWebSocket() {
      let _this = this;
      if ("WebSocket" in window) {
        // 打开一个 web socket

        var ws = new WebSocket(WS_URL);
        var heartCheck;
        ws.onopen = function () {
          //Web Socket 已连接上，使用 send() 方法发送数据
          console.log("WEBSOCKET-ONLINE");
          heartCheck = setInterval(function () {
            ws.send("HeartBeat");
          }, 5000);
        };
        ws.onmessage = function (evt) {
          clearInterval(heartCheck);
          heartCheck = setInterval(function () {
            ws.send("HeartBeat");
          }, 5000);
          if (evt.data && evt.data !== '发生数据') {
            let obj = JSON.parse(evt.data);
            if (obj.Module) {
              _this.pointData = [];
              if (obj.Module == "人员信息" || obj.Module == "对讲机信息") {
                _this.getPointer(obj.Module);
              }
              if (obj.Module == "上线" || obj.Module == "下线") {
                _this.getOnLineInfo();
              }
            }
          }
        };
        ws.onclose = function () {
          console.log("WEBSOCKET-CLOSED");
          clearInterval(heartCheck);
          _this.initWebSocket();
        };
      } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
      }
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: calc(100% - 5px);
  overflow: hidden;
  text-align: left;
  z-index: 99;
}
.box-name {
  height: 47px;
  line-height: 47px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 0 40px;
}
.box-title {
  width: 100%;
  height: 40px;
  line-height: 50px;
  text-indent: 20px;
  color: #00fff0;
}
.box-container {
  width: calc(100% - 0px);
  padding: 10px 12px;
  height: calc(100% - 50px);
}
.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% - 40px);
  overflow-y: auto;
}

.table-body .item {
  width: 100%;
  height: 40px;
  background: #00ffee2f;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
}

.table-body .item:nth-child(2n) {
  background: #00ffee50;
}
.close-button {
  position: absolute;
  right: 20px;
  top: 14px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  width: 20px;
  height: 20px;
  background: #0abfb5cc;
  line-height: 20px;
  text-align: center;
}

.table-body .item div {
  float: left;
  width: 33%;
  color: #eee;
}

::-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);
}
</style>
