<template>
  <div class="dashboard-head flex">
    <!-- <div class="dashboard-head-title">{{title}}</div> -->
    <div class="dashboard-head-tabs flex-wrap">
      <div
        v-for="{ path, label } in tabs"
        :key="path"
        class="dashboard-head-tabs-list"
        :class="route.path === path ? 'active' : ''"
        @click="tabClick(path)"
      >
        {{ label }}
      </div>
    </div>
    <!-- <div class="dashboard-head-zw"></div> -->
  </div>
</template>

<script setup lang="ts">
const router = useRouter()
const route = useRoute()
const tabs = computed(() =>
  router.getRoutes().reduce((preTabs: any[], currentRoute) => {
    if (
      currentRoute.path.includes('/dashboard') &&
      currentRoute.path !== '/dashboard'
    ) {
      preTabs.push({
        label: currentRoute.meta?.title ?? '',
        path: currentRoute.path,
      })
    }
    return preTabs
  }, [])
)
const tabClick = (path: string) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.dashboard-head {
  &-tabs {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    &-list {
      margin-right: 60px;
      cursor: pointer;
      position: relative;
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      color: #51dee9;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 80%;
        left: 10%;
        height: 2px;
        background: #51dee9;
      }
    }
  }
}
</style>
