<template>
  <div class="tabs" v-if="sidebarList.find(({ path }) => path === $route.path)">
    <div :class="['item', tab.path === $route.path ? 'active' : '']" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)">
      <div class="icon"><img :src="tab.icon" /></div>
      <div class="title">{{ switchLanguage(tab, 'title') }}</div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from '@/store/root'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
const { sidebarList } = storeToRefs(store)
const goPage = item => {
  store.SET_SELECTED_MODULE(item.title)
  router.push(item.path)
}
</script>

<style  lang="scss" scoped>
.tabs {
  position: fixed;
  top: 400px;
  left: 68px;
  right: 68px;
  display: flex;
  .item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 170px;
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 97px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 24px;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .title {
      font-weight: 700;
      font-size: 18px;
      line-height: 21px;
      text-align: center;
      color: rgba(0, 0, 0, 0.4);
      margin-top: 12px;
    }
    &.active {
      .icon {
        background: #ffffff;
      }
      .title {
        color: rgba(0, 0, 0, 0.8);
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 124px;
        height: 6px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
        border-radius: 2px 2px 0px 0px;
      }
    }
  }
  .item + .item {
    margin-left: 24px;
  }
}
</style>