<template>
  <div>
    <el-card>
      <el-table :data="littleDate" border stripe>
        <el-table-column type="index" label="UE"></el-table-column>
        <el-table-column prop="rnti" label="RNTI" width="100">
        </el-table-column>
        <el-table-column label="速度">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              trigger="hover"
            >
              <div v-html="pingInfo"></div>
                      <div
                          style="margin: 10px"
                          @mouseover="hover = scope.row.imsi"
                          @mouseleave="hover = false"
                          slot="reference"
                        >
              <el-button >{{ scope.row.Mbs }}</el-button></div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="切片">
          <template slot-scope="scope">
            <el-dropdown>
              <el-button type="primary">
                {{ scope.row.label }}
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item1, index1) in slices"
                  :key="index1"
                  v-bind="item1"
                  >分配至：切片{{ item1.id }}
                  <el-tag
                    effect="dark"
                    @click="changeslice(scope.row.imsi, item1.id)"
                  >
                    {{ item1.label }}
                  </el-tag></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="imsi" label="IMSI"> </el-table-column>
      </el-table>
                <el-pagination
    layout="prev, pager, next"
    :total="dataList.length"
    style="margin-top:5px"
    :page-size="4"
    background
     @current-change="handleCurrentChange"
      :current-page="currentPage"
    >
  </el-pagination>
    </el-card>

  </div>
</template>
<script>
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import * as flexranAPI from "../../../utils/flexranAPI";
export default {
  data() {
    return {
      currentPage:1,
      hover: false,
      littleDate:[],
      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/>",
    };
  },
  created() {
    this.getDataList();
  },
  computed: {
    slices() {
      return this.$store.state.slice_info;
    },
    dataList() {
      return this.$store.state.ue_list;
    },
  },
  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,
    },
    dataList: {
      handler(newValue, oldValue) {
      this.littleDate=newValue.slice((this.currentPage-1)*4,(this.currentPage-1)*4+4)
      },
      deep: true,
    },
  },
  mounted(){
    this.littleDate=this.dataList.slice(0*4,+4)
  },
  methods: {
    handleCurrentChange(val){
      console.log(val)
      this.currentPage=val
      val=val-1
      console.log(this.currentPage)
      this.littleDate=this.dataList.slice(val*4,val*4+4)
    },
    async getping(imsi) {
      this.timer = setInterval(() => {
        flexranAPI.SEND_PING({ imsi: imsi }).then((result) => {
          this.pingInfo = result.output.split("\n").join("<br/>");
        });
      }, 1000);
    },
    getDataList() {},
    changeslice(imsi, to) {
      this.$confirm(`是否将${imsi}切换到切片${to}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          flexranAPI
            .CHANGE_SLICE_ASSOC(
              {
                ueConfig: [
                  {
                    imsi: imsi,
                    dlSliceId: to,
                  },
                ],
              },
              -1
            )
            .then((res) => {
              console.log(res);
              if (res.status == "Ok") {
                this.$message({
                  type: "success",
                  message: "切换成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.status,
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消切换",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>

