<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">返回</el-button>
        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
        <span 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.path">{{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: #fff;
    /* display: flex; */
    text-align: left;
    padding: 10px 20px;
    border-bottom:1px solid  #EBEEF5;
}
.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{
    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;
}
</style>