<template>
  <div id="first">
    <div id="wrapper">
      <main>
        <div id="left" class="left-side">
          <img
            src="~@/assets/ustb-oai.com.png"
            alt="electron-vue"
            width="350px"
          />
          <slice-information></slice-information>
        </div>

        <div class="right-side">
          <base-station-info></base-station-info>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import SystemInformation from "./LandingPage/SystemInformation";
import SliceInformation from "./sliceInfos/SliceInformation";
import BaseStationInfo from "./sliceInfos/BaseStationInfo";
import SshPage from "./SshPage/SshPage";
import UeLists from "./sliceInfos/UeLists";
import * as flexranAPI from "../../utils/flexranAPI";

export default {
  name: "landing-page",
  components: {
    SystemInformation,
    "slice-information": SliceInformation,
    "ue-lists": UeLists,
    "base-station-info": BaseStationInfo,
    "ssh-page": SshPage,
  },
  async mounted() {
    let res = await flexranAPI.DETECT({});
    try {
    let returnCitySN = JSON.parse(res.split("= ")[1].split(";")[0]);
    let local = await flexranAPI.DETECT_LOCAL({}, returnCitySN["cip"]);
    if (local.area == "北京科技大学") {
      console.log("在校园网内");
      flexranAPI.SET_URL({});
    } else {
      console.log("不在校园网");
    }
    } catch (error) {
      console.log("在校园网内");
      flexranAPI.SET_URL({});
    }

    this.timeInterval1 = setInterval(() => {
      flexranAPI.GET_MAC_STATS().then((result) => {
        let dataList =
          result.eNB_config[0].eNB.cellConfig[0].sliceConfig.dl.slices;
        let ue_list = result.mac_stats[0].ue_list
        this.$store.commit("updateSlices", {
          slice_info: dataList,
        });
        this.$store.commit("updateUes", {
          ue_list: ue_list,
        });        
        dataList.forEach(e => {
          e = e.ddqn
        });
        this.$store.commit("updatePrbs", {
          prb_info: dataList,
        }); 
       // console.log(dataList)

      });
    }, 500);
  },
  methods: {
    open(link) {
      this.$electron.shell.openExternal(link);
    },
    openFlexran() {
    },
    closeFlexran() {
    },
  },
};
</script>

<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}

body {
  font-family: "Source Sans Pro", sans-serif;
}
img {
  filter: grayscale(70%);
  display: fixed;
  bottom: 2px;
}
header {
  margin-top: 15px;
}
#wrapper {
  background: radial-gradient(
    ellipse at top left,
    rgba(255, 255, 255, 1) 40%,
    rgba(229, 229, 229, 0.9) 100%
  );
  height: 100vh;
  padding: 15px 20px;
  width: 100vw;
}
#left {
  padding-right: 10px;
}
.right-side {
  margin-top: 76.39px;
}
main {
  display: flex;
  justify-content: space-between;
  margin-right: 56px;
}

main > div {
  flex-basis: 50%;
}

.left-side {
  display: flex;
  flex-direction: column;
}
#first {
  height: 100%;
}

.doc button {
  font-size: 0.8em;
  cursor: pointer;
  outline: none;
  padding: 0.75em 2em;
  border-radius: 2em;
  display: inline-block;
  color: #fff;
  background-color: #4fc08d;
  transition: all 0.15s ease;
  box-sizing: border-box;
  border: 1px solid #4fc08d;
}

.doc button.alt {
  color: #42b983;
  background-color: transparent;
}
</style>
