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

<script>
import local from "@/utils/local";
export default {
  data() {
    return {
      routeQuery: "",
      devicenum: "",
      // serveinfo: {
      //   deviceInfo: {
      //     enabled: 1,
      //     productId: 1,
      //     productName: "排队机",
      //     siteCode: "",
      //     siteId: 2,
      //     siteName: "",
      //     source: 1,
      //   },
      //   rabbmitInfo: {
      //     downTopicFilter: "/down/00-F1-F5-12-3F-64",
      //     exchangeName: "phxt.pdj",
      //     host: "192.168.0.98",
      //     messageTtl: "86400000",
      //     password: "admin@2020",
      //     port: 5672,
      //     uploadTopicFilter: "/upload/00-F1-F5-12-3F-64",
      //     username: "taxi_mq",
      //     virtualHost: "/test",
      //   },
      //   serviceInfo: { homeUrl: "", serverUrl: "http://192.168.0.98:8090" },
      // },
    };
  },
  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;
    },
    getInfo(info = {}) {
      let { serveinfo, devicenum } = info;
      let { deviceInfo, rabbmitInfo, serviceInfo } = serveinfo;
      let { serverUrl } = serviceInfo;
      let { siteId } = deviceInfo;
      this.devicenum = devicenum;
      local.setLocal("baseURL", serverUrl);
      local.setLocal("siteId", siteId);
      local.setLocal("devicenum", this.devicenum);
      if (serveinfo) {
        // **正式环境请打开下面内容**
        rabbmitInfo && this.clientMp(rabbmitInfo);
      }
    },
    loadconfig() {
      this.routeQuery = this.urlGet();
      if (JSON.stringify(this.routeQuery) !== "{}") {
        this.getInfo(this.routeQuery);
      } else if (JSON.stringify(this.$route.query) !== "{}") {
        this.getInfo(this.$route.query);
      } else {
        local.setLocal("baseURL", "http://192.168.0.98:11078");
        local.setLocal("siteId", 3);
        local.setLocal("devicenum", "90-2B-34-BF-1B-48");
      }
    },
  },
};
</script>

<style lang="less">
.app {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  font-family: Source Han Sans CN;
  display: flex;
}
:root {
  // 标题颜色
  --main-h1-color: #fff;
  /* 辅助颜色 */
  --main-assist-color: #59d1fe;
  --main-assist-color1: #59d1fe;
  --main-assist-color2: #f77234;
  --main-assist-color3: #f53f3f;
  --main-assist-color4: #58c09e;
  /* 主题颜色 */
  --main-theme-color: #0857e8;
  // 底部数据标题名称
  --main-sjbt-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;
}
.main-kstd-img {
  background: url("./assets/img/btn_kuaisu.png") no-repeat;
}
</style>
