<template>
  <div style="height: 100%">
    <div      
      v-for="(item1, index1) in srcs"
      :key="index1"
      v-bind="item1"
      v-show="item1.active">
    <iframe

      :id="index1"
      style="height: 500px; width: 100%"
      frameborder="0"
      :name="index1"
      scrolling="auto"
      :src="item1.url"
    ></iframe>
    </div>
    <div class="flex" >
      <div
        v-for="(item1, index1) in srcs"
        :key="index1"
        v-bind="item1"
        @click="handleCommand1(index1)"
        :class="item1.active?'activate':'s'"
        class="tags"
      >
      <el-dropdown >
        <el-tag v-if="item1.name=='FlexRan'" :type="item1.active?'success':'info'">
          {{ item1.name }}
        </el-tag>
        <el-tag v-else closable @close="handleClose(index1)" :type="item1.active?'success':'info'" >
          {{ item1.name }}
        </el-tag>
        <el-dropdown-menu  slot="dropdown" >
          <el-dropdown-item ><div v-if="item1.name=='OAI_ENB'" @click="handleCommand2(index1,0)"> 查看OAI基站LOG</div></el-dropdown-item>
          <el-dropdown-item ><div v-if="item1.name=='OAI_ENB'" @click="handleCommand2(index1,3)"> 查看OAI UELOG</div></el-dropdown-item>
          <el-dropdown-item ><div v-if="item1.name=='OAI_ENB'" @click="handleCommand2(index1,5)"> 查看空口协议</div></el-dropdown-item>
          <el-dropdown-item ><div v-if="item1.name=='CoreNet'" @click="handleCommand2(index1,4)"> 查看GTP流量</div></el-dropdown-item>
          <el-dropdown-item ><div v-if="item1.name=='FlexRan'" @click="refresh"> 刷新</div></el-dropdown-item>
          <el-dropdown-item ><div v-if="item1.name=='AI-Engine'" @click="handleCommand2(index1,1)"> 启动DRL切片智能分配</div></el-dropdown-item>
          <el-dropdown-item ><div v-if="item1.name=='CoreNet'" @click="handleCommand2(index1,2)"> 查看MME LOG</div></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>      

      </div>
      <el-dropdown @command="handleCommand">
        <el-tag type="primary">
          NewSSH<i class="el-icon-plus el-icon--right"></i>
        </el-tag>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="0">OAI_ENB</el-dropdown-item>
          <el-dropdown-item command="1">DroneFront</el-dropdown-item>
          <el-dropdown-item command="2">AI-Engine</el-dropdown-item>
          <el-dropdown-item command="3">CoreNet</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- <img  src="~@/assets/ustb-oai.com.png" alt="electron-vue" height="4%" >  -->
  </div>
</template>

<script>
import Vue from "vue";
import vueJsonTreeView from "vue-json-tree-view";
import * as flexranAPI from "../../../utils/flexranAPI";
import _ from 'lodash'
Vue.use(vueJsonTreeView);
export default {
  data() {
    return {
      dataList: [],
      host: "",
      action: "",
      view: true,
      commands:['tail -f ~/log/enb.log','cd /root/dqn_zoo/Dueling\\ DDQN/ && python dueling_ddqn.py','tail -f /root/log/mme.log','tail -f ~/log/ue.log',"tshark -i gtp0 ","tshark -i lo -f 'udp dst port  9999' --enable-heuristic mac_lte_udp  "],
      ssh_srcs:[      {
          name: "OAI_ENB",
          active: false,
          url:
            "http://202.204.54.185:2222/ssh/host/192.168.1.193?autologin=1&user=root&pass=199710",
        },
        {
          name: "DroneFront",
          active: false,
          url:
            "http://202.204.54.185:2222/ssh/host/192.168.1.36?autologin=1&user=root&pass=199710",
        },
        {
          name: "AI-Engine",
          active: false,
          url:
            "http://202.204.54.185:2222/ssh/host/192.168.1.80?autologin=1&user=root&pass=199710",
        },
        {
          name: "CoreNet",
          active: false,
          url:
            "http://202.204.54.185:2222/ssh/host/192.168.1.12?autologin=1&user=root&pass=199710",
        },],
      srcs: [
        { name: "FlexRan", active: true, url: "http://202.204.54.185:2224" },
      ],
      menus: [
        { name: "FlexRan", active: true },
        { name: "OAI_ENB", active: true },
        { name: "DroneFront", active: true },
        { name: "AI-Engine", active: true },
        { name: "CoreNet", active: true },
      ],
    };
  },
  async mounted() {
    this.host = this.$route.params.host;
    this.action = this.$route.params.action;
    this.user = this.$route.params.user;
    this.pass = this.$route.params.pass;
    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 == "北京科技大学") {
        this.src = `http://202.204.54.185:2224`;
      } else {
        this.src = `http://ustb-oai.com:2224`;
      }
    } catch (error) {
      this.src = `http://202.204.54.185:2224`;
    }
  },
  methods: {
    getJS(id,str) {
      var child = document
        .getElementById(String(id))
        .contentWindow.socket.emit("control", str);
    },
    refresh() {
      location.reload()
    },
    handleCommand(command) {
      this.$message("NewSSH to " + this.ssh_srcs[Number(command)].url.split('?')[0]);
      this.srcs.push( _.cloneDeep(this.ssh_srcs[Number(command)]))
      this.handleCommand1(this.srcs.length-1)
    },
    handleCommand2(id,command) {
      this.getJS(id,this.commands[command])

    },
    handleCommand1(command) {
      for(let i =0;i<this.srcs.length;i++){
        if(i==command){
          this.srcs[i].active=true
        }
        else{
          this.srcs[i].active=false

        }
      }
    },
    handleClose(index){
      _.pullAt(this.srcs, index)
      this.handleCommand1(index-1)
    }
  },
};
</script>

<style>
html,
body,
#app {
  height: 100%;
}
.flex {
  display: flex;
  width: 100%;
  margin-right: 10px;
  padding-right: 10px;
}
.tags{
    margin-right: 1px;
}
#icon {
  position: fixed;
  margin-top: 470px;
  margin-left: 10px;
  z-index: 9999;
}
.activate{
  background-color: #aaa;
}
</style>
