<template>
  <div class="tab-bar">
    <template v-for="(item, index) in tabbarData" :key="index">
      <div
        class="tab-bar-item"
        @click="itemClick(index, item.path)"
        :class="currentIndex === index ? 'activeClass' : ''"
      >
        <img
          :src="getAssetUrl(item.activeImg)"
          alt=""
          v-if="currentIndex === index"
        />
        <img :src="getAssetUrl(item.image)" alt="" v-else />
        <span>{{ item.name }}</span>
      </div>
    </template>
  </div>
</template>

<script setup>
import tabbarData from '@/assets/data/tabbar.js'
import { getAssetUrl } from '@/utils/getAssetUrl.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentIndex = ref(0)
const itemClick = (index, routePath) => {
  currentIndex.value = index
  router.push(routePath)
}
</script>

<style scoped lang="less">
.tab-bar {
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #f3f3f3;
  .activeClass {
    color: red;
  }
  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 36px;
      height: 36px;
    }
  }
}
</style>
