<template>
  <div>
    <el-card>
          <el-popover
  placement="right"
  width="620"
  trigger="hover">
   <prb-info></prb-info>
  <el-button slot="reference">时频图</el-button>
</el-popover>
      <el-table :data="slice_info" border stripe>
        <el-table-column  label="网络切片ID" width="75px">
          <template slot-scope="scope">
             <el-button :type="color_arrs[scope.row.id]" circle> {{ scope.row.id }}</el-button>
          </template> 

        </el-table-column>
        <el-table-column prop="label" label="业务类型" width="150px">
          <template slot-scope="scope">
            {{ scope.row.label  }}
          </template>
        </el-table-column>
        <el-table-column label="吞吐量(Mps)">
          <template slot-scope="scope">
            {{ scope.row.ddqn.thrpt }}
          </template>
        </el-table-column>
        <el-table-column label="时延(ms)">
          <template slot-scope="scope">
            {{ scope.row.ddqn.delay }}
          </template>
        </el-table-column>
        <el-table-column label="PRB(x2)">
          <template slot-scope="scope">
            {{ scope.row.id==0?'*':scope.row.ddqn.mrb }}
          </template>
        </el-table-column>
        <el-table-column label="RB使用情况">
          <template slot-scope="scope">
            {{ scope.row.ddqn.arb }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

      <flex-ran></flex-ran>
    

    <!-- <iframe id="show-iframe" style="height:500px;width:100%" frameborder=0 name="showHere" scrolling=auto :src="src"></iframe> -->
  </div>
</template>

<script>
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import PRBInfo from "./PRBInfo";
import * as flexranAPI from "../../../utils/flexranAPI";
import FlexRan from '../SshPage/FlexRan.vue';
// 渲染进程接收主进程的传参
const { ipcRenderer } = require("electron");

Vue.use(vueJsonTreeView);
export default {
  data() {
    return {
      dataList: [],
        color_arrs:["info","danger","warning","success"],      
      slices_getter: "a",
    };
  },
  components: { "prb-info": PRBInfo,"flex-ran":FlexRan },
  computed: {
    slice_info(){
      return this.$store.state.slice_info
    },
    getterSlice(){
      return this.$store.getters.getterSlice
    }
  },
  watch:{
    // slice_info:{
    //   function(val, oldVal) {console.log(val,oldVal)},
    //   deep: true
    // }
  }
  ,
  mounted() {
    let a = {
      dl: {
        algorithm: "DDQN",
        slices: [
          {
            id: 0,
            label: "Besteffort",
            ddqn: {
              typeid: 0,
              arb: 0,
              mrb: 0,
            },
          },
        ],
      },
    };
    ipcRenderer.on("eNB", (event, arg) => {
      if (arg) {
        flexranAPI.START_ENB({});
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          flexranAPI.ADD_SLICE(a, -1);
          loading.close();
          this.$message({
            message: "成功启动OAI基站",
            type: "success",
          });
        }, 4000);
      }
    });
    ipcRenderer.on("eNBl2", (event, arg) => {
      if (arg) {
        flexranAPI.START_ENB_L2({});
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          flexranAPI.ADD_SLICE(a, -1);
          loading.close();
          this.$message({
            message: "成功启动OAI基站",
            type: "success",
          });
        }, 2000);
      }
    });

    ipcRenderer.on("addUE", (event, arg) => {
      if (arg) {
                this.$prompt('请输入激活UE数目', 'L2-nFAPI', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[0-9]$|^[0-2][0-9]$|^3[0-2]$/,
          inputErrorMessage: 'MAX_UE=32'
        }).then(({ value }) => {
        flexranAPI.START_ENB_L2({ues:value});
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        setTimeout(() => {
          loading.close();
          this.$message({
            message: "成功启动OAI基站",
            type: "success",
          });
        }, 2000);
        setTimeout(()=>{
          flexranAPI.ADD_SLICE(a, -1);
         
        },4000)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
        // flexranAPI.ADD_UE({ueid:this.$store.state.ue_nums});
        // console.log(arg)
        // this.$store.commit("addUes", {});
      }
    });

  },
};
</script>

<style scoped>
html,
body,
#app {
  height: 100%;
}
.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>
