<template>
  <div>
    <div v-for="(item1, index1) in ue_list" :key="index1" v-bind="item1">
      <el-popover
        placement="right"
         trigger="hover"
      >
      <div  v-html="pingInfo"></div>
        <div
          style="margin: 10px"
          @mouseover="hover = item1.imsi"
          @mouseleave="hover = false"
          slot="reference"
        >
            <span>
              <tree-view
                :data="{
                  rnti: item1.rnti,
                  imsi: item1.imsi,
                  sliceID: item1.dlSliceId,
                  label: item1.label,
                  Rate: item1.Mbs,
                }"
                :options="{
                  maxDepth: 2,
                  rootObjectKey: 'UE ' + index1,
                  modifiable: false,
                  slice_num: 1,
                }"
              />
            </span>
        </div>
      </el-popover>
      
    </div>

  </div>
</template>

<script>
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import * as flexranAPI from "../../../utils/flexranAPI";
import Tooltip from "element-ui";
Vue.use(vueJsonTreeView);
Vue.use(Tooltip);
export default {
  data() {
    return {
      hover: false,
      ue_list: [],
      slice_conf: [],
      pingInfo: "PING 172.16.0.x (172.16.0.x) 56(84) bytes of data.<br/>64 bytes from 172.16.0.6: icmp_seq=1 ttl=64 time=39.5 ms<br/>64 bytes from 172.16.0.6: icmp_seq=2 ttl=64 time=39.1 ms<br/>64 bytes from 172.16.0.6: icmp_seq=3 ttl=64 time=28.7 ms<br/>64 bytes from 172.16.0.6: icmp_seq=4 ttl=64 time=45.6 ms<br/><br/>--- 172.16.0.6 ping statistics ---<br/>4 packets transmitted, 4 received, 0% packet loss, time 242ms<br/>rtt min/avg/max/mdev = 28.799/38.307/45.687/6.068 ms<br/>",
      visible:false
    };
  },
  mounted() {
    this.timeInterval = setInterval(() => {
      console.log(result.eNB_config[0].eNB.cellConfig[0].sliceConfig.dl)
      flexranAPI.GET_MAC_STATS().then((result) => {
          
          this.slice_conf =
            result.eNB_config[0].eNB.cellConfig[0].sliceConfig.dl;
          this.ue_list = result.mac_stats[0].ue_list;
          for (let i = 0; i < this.ue_list.length; i++) {
            let slice_type = this.slice_conf.slices.filter(
              (_item) => _item.id === this.ue_list[i].dlSliceId
            );
            this.ue_list[i].label = slice_type[0].label;
          }

      });
    }, 1000);
  },
  methods: {
    async getping(imsi) {
      this.timer = setInterval(() => {
        flexranAPI.SEND_PING({ imsi: imsi }).then((result) => {
          this.pingInfo = result.output.split("\n").join("<br/>");
        });
      }, 1000);
    },
  },
  watch: {
    hover: {
      handler(newValue, oldValue) {
        console.log(this.hover);
        if (this.hover !== false) {
          this.getping(this.hover);
        }
        if (this.hover == false) {
          clearInterval(this.timer);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.title {
  color: #888;
  font-size: 18px;
  font-weight: initial;
  letter-spacing: 0.25px;
  margin-top: 10px;
}

.items {
  margin-top: 8px;
}

.item {
  display: flex;
  margin-bottom: 6px;
}

.item .name {
  color: #6a6a6a;
  margin-right: 6px;
}

.item .value {
  color: #35495e;
  font-weight: bold;
}
</style>
