<template>
  <div>
    <div class="header">
      <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
      <el-button
        size="mini"
        icon="el-icon-back"
        class="back-button"
        @click="back"
        type="primary"
        >返回</el-button
      >
      <h2 class="back-h2">{{ pathQuery.instanceId }}</h2>
      <span class="back-h2" style="font-size:12px"
        >({{ pathQuery.instanceName }})</span
      >
    </div>
    <div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        type="border-card"
      >
        <el-menu-item
          v-for="(item, index) in siteNameList"
          :index="`${index}`"
          :key="item.index"
          class="title"
          >{{ item.name }}</el-menu-item
        >
      </el-menu>
    </div>
    <div style="height:calc(100% - 112px)">
      <router-view id="ContentView1"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "0",
      siteNameList: [
        { path: "/ServiceWatch/serverDetail", name: "基本信息" },
        { path: "/ServiceWatch/serverMonitor", name: "监控" },
        { path: "/ServiceWatch/serverApplied", name: "服务应用" }
      ],
      pathQuery: []
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      this.$router.push({
        path: this.siteNameList[key]["path"],
        query: this.pathQuery
      });
      // console.log(key,'key')
    },
    back() {
      this.$router.push("/ServiceWatch/serverManage");
    }
  },
  created() {
    this.pathQuery = this.$route.query;
    this.siteNameList.forEach((item, index) => {
      if (item.path === this.$route.path) {
        this.activeIndex = index + "";
      }
    });
    // this.activeIndex
    // console.log(this.$route,this.pathQuery)
  }
};
</script>

<style scoped>
.header {
  background-color: var(--tablethead);
  /* display: flex; */
  text-align: left;
  padding: 10px 20px;
  border-bottom: 1px solid var(--tablethead);
}
.el-menu {
  background-color: var(--tablebody);
}
.el-menu.el-menu--horizontal {
  border-bottom: 1px solid var(--tablebody);
}
.back-a {
  height: 26px;
  line-height: 26px;
  width: 26px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  /* margin-left: -6px; */
  vertical-align: middle;
  margin-right: 24px;
}
.back-button {
  margin-right: 24px;
}
.el-icon-back {
  /* width: 16px;
    height: 16px; */
  font-size: 20px;
  /* display: inline-block; */
  /* vertical-align: middle; */
  /* background-repeat: no-repeat; */
}
.back-h2 {
  color: var(--white);
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 700;
  margin-right: 20px;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 30px;
  line-height: 30px;
}
#ContentView1 {
  /* height: 100px; */
  /* background-color: #fff; */
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.el-menu-demo .title {
  background-color: var(--tablebody) !important;
  background-image: none !important;
  color: var(--white) !important;
}
</style>