<template>
  <div class="system-tab-content">
    <el-tabs v-model="activeName" class="customTab">
      <el-tab-pane name="topoCon">
        <span slot="label">
          <el-button size="small" round class="ob-header-btn">动态拓扑</el-button>
        </span>
        <TopoCon v-if="activeName === 'topoCon'" />
      </el-tab-pane>
      <el-tab-pane name="keyBusinessCon">
        <span slot="label">
          <el-button size="small" round class="ob-header-btn">重点业务</el-button>
        </span>
        <keyBusinessCon v-if="activeName === 'keyBusinessCon'" />
      </el-tab-pane>
      <el-tab-pane name="allBusinessCon">
        <span slot="label">
          <el-button size="small" round class="ob-header-btn">业务总览</el-button>
        </span>
        <AllBusinessCon v-if="activeName === 'allBusinessCon'" :is-show-error-rate="isShowErrorRate" />
      </el-tab-pane>
      <el-tab-pane v-if="isShowSlopTopTab" name="slowSituationTOP">
        <span slot="label">
          <el-button size="small" round class="ob-header-btn">慢情况TOP</el-button>
        </span>
        <SlowSituationTOP v-if="activeName === 'slowSituationTOP'" />
      </el-tab-pane>
    </el-tabs>

    <!-- <el-tabs v-model="activeName" @tab-click="handleClick" class="customTab">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
        <span slot="label">
          <el-button size="small" round class="ob-header-btn">{{ tab.label }}</el-button>
        </span>
        <component :is="tab.component" :key="tab.name" />
      </el-tab-pane>
    </el-tabs> -->
  </div>
</template>
<script>
import TopoCon from './components/topoCon.vue'
import KeyBusinessCon from './components/keyBusinessCon.vue'
import AllBusinessCon from './components/allBusinessCon.vue'
import SlowSituationTOP from './components/SlowSituationTOP.vue'
export default {
  components: {
    TopoCon,
    KeyBusinessCon,
    AllBusinessCon,
    SlowSituationTOP
  },
  props: {
    isShowSlopTopTab: {
      default: true,
      type: Boolean
    },
    systemTabType: {
      default: 'topoCon',
      type: String
    }
  },
  data() {
    return {
      activeName: 'topoCon',
      tabs: [
        {
          name: 'topoCon',
          label: '动态拓扑',
          component: 'TopoCon' // 组件名称
        },
        {
          name: 'keyBusinessCon',
          label: '重点业务',
          component: 'KeyBusinessCon' // 组件名称
        },
        {
          name: 'allBusinessCon',
          label: '业务总览',
          component: 'AllBusinessCon' // 组件名称
        },
        {
          name: 'allBusinessCon',
          label: '慢情况TOP',
          component: 'AllBusinessCon' // 组件名称
        }
      ],
      isShowErrorRate: false
    }
  },
  watch: {
    'systemTabType': {
      handler(newValue, oldValue) {
        this.activeName = newValue
        if (newValue === 'allBusinessCon') {
          this.isShowErrorRate = true
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.system-tab-content{
  ::v-deep .el-drawer__body{
    background: #F5F5F5;
    padding:0;
  }
  ::v-deep .el-tabs__nav-wrap{
    padding:20px;
  }
  .customTab ::v-deep .el-tabs__header{
    margin: 0;
    padding: 0;
    background: white;
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 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>
