<template>
  <nav class="tabbar">
    <RouterLink
      v-for="item in tabs"
      :key="item.to"
      :to="item.to"
      class="tabbar-item"
      :class="{ 'is-active': route.path === item.to }"
    >
      <img :src="item.icon" :alt="item.label" class="tabbar-icon" />
      <span class="tabbar-label">{{ item.label }}</span>
    </RouterLink>
  </nav>
</template>

<script setup lang="ts">
import disciplineIcon from '@/assets/tabbar/discipline.png'
import taskIcon from '@/assets/tabbar/task.png'
import artifactIcon from '@/assets/tabbar/artifact.png'
import learningSituationIcon from '@/assets/tabbar/learningSituation.png'

const route = useRoute()

const tabs = [
  { label: '学科', to: '/subjects', icon: disciplineIcon },
  { label: '任务', to: '/tasks', icon: taskIcon },
  { label: '英语神器', to: '/english-tools', icon: artifactIcon },
  { label: '学情中心', to: '/insights', icon: learningSituationIcon },
]
</script>

<style scoped lang="scss">
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 50;
  display: flex;
  height: 104px;
  width: calc(100% - 40px);
  max-width: 880px;
  transform: translateX(-50%);
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-around;
  padding: 0 24px;
  background-image: url('@/assets/tabbar/bgImg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.tabbar-item {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 4px 0;
  font-size: 26px;
  line-height: 1;
  color: #333;
  margin-top: -45px;
  text-decoration: none;

  &.is-active {
    color: var(--color-text-brand);
  }
}

.tabbar-icon {
  height: 72px;
  width: 72px;
}

.tabbar-label {
  margin-top: 8px;
  padding-bottom: 4px;
}
</style>
