<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>

<script>
import local from "@/utils/local";
export default {
  data() {
    return {
      routeQuery: "",
      devicenum: "",
    };
  },
  created() {
    this.loadconfig();
  },
  methods: {
    errorFn() {
      let dom;
      return function (err) {
        if (dom) {
          dom.innerText = err || "MQ通讯异常";
          return dom;
        } else {
          let createdDom = document.createElement("div");
          createdDom.style.position = "absolute";
          createdDom.style.left = "0";
          createdDom.style.top = "10px";
          createdDom.style.width = "100%";
          createdDom.style.textAlign = "center";
          createdDom.style.fontSize = "12px";
          createdDom.style.color = "red";
          createdDom.style.zIndex = 10;
          createdDom.style.display = "none";
          createdDom.innerText = err || "MQ通讯异常";
          document.body.appendChild(createdDom);
          dom = createdDom;
          return dom;
        }
      };
    },
    clientMp(obj) {
      var _this = this;
      // var downTopicFilter = obj.downTopicFilter.replace(/\//g, '%2F')
      var uploadTopicFilter = obj.uploadTopicFilter.replace(/\//g, "%2F");
      var ws = new WebSocket("ws://" + obj.host + ":15674/ws");
      /* eslint-disable */
      var client = Stomp.over(ws);
      // var conditions = {
      //   durable: true,
      //   "x-message-ttl": parseInt(obj.messageTtl),
      // };
      client.connect(
        obj.username,
        obj.password,
        function () {
          _this.settimer = setInterval(function () {
            // 心跳上行消息
            let beatObj = {
              data: "=",
              headers: {
                data: {
                  protocol: "json",
                  messageType: "HEART_BEAT",
                  deviceCode: _this.devicenum,
                  sign: "abcd1234",
                  timestamp: _this.$moment().format("YYYY-MM-DD H:mm:ss"),
                },
              },
              key: new Date().getTime() + "-" + _this.devicenum,
            };
            client.send(
              "/queue/" + uploadTopicFilter,
              { "x-message-ttl": parseInt(obj.messageTtl) },
              JSON.stringify(beatObj)
            );
          }, 1000);
          this.errorFn().style.display = "none";
        },
        function (e) {
          this.errorFn("MQ通讯异常：" + e).style.display = "block";
          _this.settimer && clearInterval(_this.settimer);
          setTimeout(function () {
            _this.clientMp(obj);
          }, 1000);
        },
        obj.virtualHost
      );
    },
    urlGet() {
      let q = {};
      location.search.replace(/([^?&=]+)=([^&]+)/g, function (_, k, v) {
        return (q[k] = v);
      });
      return q;
    },
    loadconfig() {
      this.routeQuery = this.urlGet();
      if (JSON.stringify(this.routeQuery) !== "{}") {
        let serveinfo = this.routeQuery["serveinfo"]
          ? JSON.parse(this.UrlDecode(this.routeQuery["serveinfo"]))
          : {};
        let serverUrl =
          this.routeQuery["serverUrl"] || "http://192.168.0.98:11078";
        this.devicenum = this.routeQuery["devicenum"] || "90-2B-34-BF-1B-48";
        if (serveinfo) {
          // **正式环境请打开下面内容**
          // serveinfo["rabbmitInfo"] && this.clientMp(serveinfo["rabbmitInfo"]);
          if (!serveinfo["serviceInfo"]["serverUrl"]) {
            serverUrl = "http://192.168.0.98:11078";
          }
        }
        local.setLocal("baseURL", serverUrl);
        // this.SET_devicenum(this.devicenum);
        // this.getIndexSetinfo();
      }
    },
  },
};
</script>

<style lang="less">
.app {
  width: 1920px !important;
  height: 1080px !important;
  background-color: #f5f5f5;
  font-family: Source Han Sans CN;
}
:root {
  // 标题颜色
  --main-title-color: #fff;
  /* 辅助颜色 */
  --main-assist-color1: #59d1fe;
  --main-assist-color2: #f77234;
  --main-assist-color3: #f53f3f;
  --main-assist-color4: #58c09e;
  /* 主题颜色 */
  --main-theme-color1: #0857e8;
  // 底部数据名称
  --data-name-color: #666;
  // 渐变色(主色)
  --gradient-ramp-theme1: #0857e8;
  --gradient-ramp-theme2: #fd644f;
  --gradient-ramp-theme3: #58c09e;
  // 渐变色（辅色）
  --gradient-ramp-assist1: #59d1fe;
  --gradient-ramp-assist2: #f28e26;
  --gradient-ramp-assist3: #48fca5;
}
.main-bg-img {
  background: url("./assets/img/bg(1).jpg") no-repeat;
}
</style>
