<template>
  <div class="ob-topology-content">
    <el-drawer
      title="quoteservice"
      :visible.sync="drawerFlag"
      direction="rtl"
      size="75%"
      :before-close="handleClose"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick" class="customdrawer">
        <el-tab-pane v-for="item in btnArr" :key="item.name" :name="item.name">
          <span slot="label">
            <el-button size="small" round class="ob-header-btn">{{ item.name }}</el-button>
          </span>
          <component :is="currentComponent" />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script>
import TopologyOverview from './topologyOverview/index.vue'
import JVM from './jvm/index.vue'
import ServiceRelationship from './serviceRelationship/index.vue'
import CallChain from './callChain/index.vue'
import Log from './log/index.vue'
import Abnormal from './abnormal/index.vue'
import SQLCall from './SQLCall/index.vue'
import NoSQLCall from './noSQLCall/index.vue'
export default {
  components: {
    TopologyOverview,
    JVM,
    ServiceRelationship,
    CallChain,
    Log,
    Abnormal,
    SQLCall,
    NoSQLCall
  },
  props: {
    drawerFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      btnArr: [{
        name: '概览',
        id: '1'
      }, {
        name: 'JVM/GC',
        id: '2'
      }, {
        name: '服务关系',
        id: '3'
      }, {
        name: '调用链(业务)',
        id: '4'
      },
      // {
      //   name: '接口调用',
      //   id: '5'
      // },
      {
        name: '日志',
        id: '6'
      }, {
        name: '异常',
        id: '7'
      }, {
        name: 'SQL调用',
        id: '8'
      }, {
        name: 'NoSQL调用',
        id: '9'
      }],
      isShow: false,
      currentComponent: 'TopologyOverview',
      activeName: '概览'
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose', false)
    },
    handleClick() {
      const obj = {
        '概览': 'TopologyOverview',
        'JVM/GC': 'JVM',
        '服务关系': 'ServiceRelationship',
        '调用链(业务)': 'CallChain',
        '日志': 'Log',
        '异常': 'Abnormal',
        'SQL调用': 'SQLCall',
        'NoSQL调用': 'NoSQLCall'
      }
      this.currentComponent = obj[this.activeName]
    }
  }
}
</script>
<style lang="scss" scoped>
.ob-topology-content{
  ::v-deep .el-drawer__body{
    background: #F5F5F5;
    padding:0;
  }
  ::v-deep .el-tabs__nav-wrap{
    padding:20px;
  }
  .customdrawer ::v-deep .el-tabs__header{
    margin:0;
    background: white;
    position: fixed;
    z-index: 999;
    width: 100%;
  }
  ::v-deep .el-drawer__header{
    background: #4E5969;
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 0;
  }
  ::v-deep .el-tabs__item{
    padding: 0 10px;
  }
  ::v-deep .el-tabs__nav-wrap::after{
    height: 0;
  }
  ::v-deep .el-tabs__item.is-active .el-button{
    background: #F2F3F5;
    font-weight: 500;
    font-size: 14px;
    color: #165DFF;
    border:none;
  }
  ::v-deep .el-tabs__active-bar{
    height:0;
  }
  .ob-header-btn{
    width: 110px;
    box-sizing: border-box;
    font-size: 14px;
  }
}

</style>
