<!--
 * @Description: 系统指标页面
 * @Author: laoliu
 * @Date: 2021-01-17 22:43:52
-->
<template>
  <div class="body">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabList" :key="tab.id" :label="tab.tabName" :name="tab.id" />
      <gauge-panel :curServer="tabList[activeIndex]" />
    </el-tabs>
  </div>
</template>

<script>
import GaugePanel from "./GaugePanel.vue";

export default {
  name: 'SysIndex',
  components: { 
     'gauge-panel': GaugePanel,
  },

  data() {
    return {
      tabList: [],
      activeIndex: 0,
      activeName: ''
    }
  },

  methods:{
    genTabList(serverList) {
      for (let server of serverList) {
        for (let app of server.appList) {
          this.tabList.push({
            id: server.id + '-' + app.id,
            tabName: server.name + '-' + app.name,
            appType: app.type,
            serverId: server.id, 
            appId: app.id,
            druidUrl: app.druidUrl
          });
        }
      }
    },

    handleClick(tab, _event) {
      this.activeIndex = tab.index;
      this.activeName = this.tabList[this.activeIndex].id;
    }
  },

  mounted() {
    this.appAxios("GET", this.commonUrl.URL_LIST_SERVERS).then(result => {
      if (result != null) {
        let serverList = result.data;
        this.genTabList(serverList);
        this.activeIndex = serverList[0].appList.length - 1;   //管理端
        this.activeName = this.tabList[this.activeIndex].id;
      }
    })
  },
}
</script>

<style scoped>
.body {
  margin: 0 40px;
  border: solid 0px;
}
</style>