<template>
  <div class="app">
    <router-view></router-view>
    <NetworkError :isShowError="isShowError"></NetworkError>
    <EnabledDev :enabled="enabled"></EnabledDev>
  </div>
</template>

<script>
import local from "@/utils/local";
import NetworkError from "@/components/NetworkError.vue";
import EnabledDev from "@/components/EnabledDev.vue";
import mq from "@/mixin/mq";
import { getHomeInfo, getSkinList, getDeviceList } from "@/api";
import { mapMutations } from "vuex";
export default {
  mixins: [mq],
  components: {
    NetworkError,
    EnabledDev,
  },
  data() {
    return {
      routeQuery: "",
      devicenum: "",
      linkDom: null, // 换皮
      isShowError: false,
      enabled: 1,
    };
  },
  watch: {
    "$route.path"(newVal) {
      this.getDeviceList();
      if (newVal == "/" || newVal == "/home") {
        this.getHomeInfo();
        this.getSetinfo();
      }
    },
  },
  created() {
    this.getInfo();
    // 开发环境
    if (process.env.NODE_ENV == "development") {
      let obj = {
        deviceInfo: {
          enabled: 1,
          productId: 10,
          productName: "样表系统",
          siteCode: "511500000000-0001",
          siteId: 1,
          siteName: "宜宾市民中心",
          source: 1,
        },
        rabbmitInfo: {
          downTopicFilter: "/down/" + "dsadsdsadsa",
          exchangeName: "phxt.hjq",
          host: "10.12.185.213",
          messageTtl: "86400000",
          password: "admin@2020",
          port: 5672,
          uploadTopicFilter: "/upload/" + "dsadsdsadsa",
          username: "taxi_mq",
          virtualHost: "/",
        },
        serviceInfo: {
          homeUrl: "http://192.168.0.24:8080/#/",
          serverUrl: "http://192.168.0.98:11078/",
        },
        devicenum: "18-93-7F-C0-AD-B5",
        // devicenum: "B8-13-32-86-9F-04",
      };
      local.setLocal("devicenum", obj.devicenum);
      local.setLocal("deviceInfo", obj.deviceInfo);
      this.SET_deviceCode(obj.devicenum);
      this.WebSocketMq(obj);
    }
  },
  mounted() {
    // 设备在线
    window.addEventListener("online", () => {
      this.isShowError = false;
      location.reload();
    });
    // 设备离线
    window.addEventListener("offline", () => {
      this.isShowError = true;
    });
    this.getDevInfo();
  },
  methods: {
    ...mapMutations([
      "SET_homeInfo",
      "SET_datumList",
      "SET_matterList",
      "SET_deviceCode",
    ]),
    // 简析url
    urlGet() {
      let q = {};
      let search = location.search;
      let hash = location.hash;
      if (search) {
        location.search.replace(/([^?&=]+)=([^&]+)/g, function (_, k, v) {
          return (q[k] = v);
        });
      } else if (hash) {
        location.hash.replace(/([^?&=]+)=([^&]+)/g, function (_, k, v) {
          return (q[k] = v);
        });
      }
      return q;
    },
    // 获取地址栏信息
    getInfo() {
      let routeQuery = this.urlGet();
      if (JSON.stringify(routeQuery) !== "{}") {
        let serveinfo = routeQuery["serveinfo"]
          ? JSON.parse(decodeURIComponent(routeQuery["serveinfo"]))
          : {};
        let { devicenum } = routeQuery;
        let { deviceInfo, serviceInfo } = serveinfo;
        let { serverUrl } = serviceInfo;
        let siteId = deviceInfo.siteId; //站点id
        this.devicenum = devicenum;
        local.setLocal("siteId", siteId);
        local.setLocal("serverUrl", serverUrl);
        local.setLocal("devicenum", devicenum);
        local.setLocal("deviceInfo", deviceInfo);
        this.SET_deviceCode(devicenum);
      }
    },
    // 获取首页信息
    async getHomeInfo() {
      let res = await getHomeInfo({});
      let { data, code } = res.data;
      if (code === 1) {
        data.hotWords = data.hotWords.map((v) => v.hotwords);
        this.homeInfo = data;
        this.SET_homeInfo(data);
        this.SET_datumList(data.datumList);
        this.SET_matterList(data.matterList);
      }
    },
    // 换肤
    async getSetinfo() {
      let res = await getSkinList({
        page: 1,
        size: -1,
        used: 1,
      });

      if (res.data.code == 1) {
        let { data } = res.data.data;
        if (this.linkDom) {
          this.linkDom.remove();
        }
        if (data.length && data[0].cssFilePath) {
          let link = document.createElement("link");
          this.linkDom = link;
          link.rel = "stylesheet";
          link.href = data[0].cssFilePath;
          // document.getElementsByTagName("head")[0].appendChild(link);
          document.head.appendChild(link);
        }
      }
    },
    async getDeviceList() {
      let res = await getDeviceList({
        page: 1,
        size: -1,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        if (!data.length) return;
        let { enabled } = data[0];
        this.enabled = enabled;
      }
    },
    // 轮询设备状态
    getDevInfo() {
      this.timer = setInterval(() => {
        this.getDeviceList();
      }, 1000 * 60);
    },
  },
};
</script>

<style lang="less">
.app {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  // display: flex;
  // overflow: auto;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
}
: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-ksck-img {
  background: url("./assets/img/btn_kuaisu.png") no-repeat;
}
//内页标题背景
.main-title-bg-img {
  background: url("./assets/img/title_1.jpg") no-repeat;
}
</style>