<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <div class="nav">
        <div v-for="(item, index) in navtopData" :key="index" :class="{'nav-item-active':activeNav==index}" @click="clickNav(index)" class="nav-item">
          {{ item.name }}
        </div>
      </div>
      <el-tab-pane label="网络结构图" name="first">
        <net-work></net-work>
      </el-tab-pane>
      <el-tab-pane label="SCD可视化" name="second">Config</el-tab-pane>
    </el-tabs>
  </div>
</template>
  

<script setup>
import { ref } from "vue";
import netWork from "./components/netWork";
import { useRoute } from 'vue-router';
const activeName = ref("first");//默认展示网络结构图
const navtopData = ref([
  { name: "CID一致性校核" },
  { name: "SCD文件一致性校核" },
  { name: "SCL文件校核" },
  { name: "CRC校核" },
  { name: "虚端子关系图" },
]);
const activeNav = ref(null);
const clickNav = (navIndex) => {  //点击导航栏事件
  activeNav.value = navIndex; 
}
</script>

<style scoped lang="scss">
$height:40px;
@mixin mid-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.el-tabs__item) {
  margin: 16px 0 0 32px;
  font-size: 18px;
}
:deep(.el-tabs__item:last-child) {
  margin-left: 0;
}
:deep(.el-tabs__nav-wrap::after) {
  --el-border-color-light: none;
}
:deep(.el-tabs__item.is-active),
:deep(.el-tabs__active-bar) {
  color: #255ce7;
}
:deep(.el-tabs__active-bar) {
  background-color: #255ce7;
}
//设置导航栏样式
 .nav {
  @include mid-center;
  .nav-item {
    width: 144px;
    height: $height;
    @include mid-center;
    margin-right: 8px;
    cursor: pointer;
    background: #fff url("~@/assets/image/instruct/navtop.png") no-repeat center;
    background-size: 144px $height;
  }
  .nav-item-active{
    background: #fff url("~@/assets/image/instruct/navtop_active.png") no-repeat center;
    background-size: 144px $height;
  }
}
//最外层的滚动条不要
:deep(.el-main) {
  overflow: hidden;
}
//ied的高度
:deep(.network-wrap) {
height: 70vh;
overflow: auto;
}
</style>