<template>
    <div class="tabbar footer">
      <div class="tabbar-item" v-for="(item, index) in tabbarList" :key="index" @click="switchTab(item)">
        <div class="tab_icon">
          <img :src="item.pageUrl === routePath ? item.activeImg : item.normalImg" width="48px" alt="" />
          <div class="msg" v-if="item.isShowBubble">99</div>
        </div>
        <h3 :class="[item.pageUrl === routePath ? textStyleLight : textStyleDark]">{{ item.text }}</h3>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  
  const textStyleLight = 'textStyleLight';
  const textStyleDark = 'textStyleDark';
  const tabbarList = ref([
    {
      text: '首页',
      pageUrl: '',
      activeImg: '',
      normalImg: '',
      isShowBubble: false
    },
    {
      text: '权益中心',
      pageUrl: '',
      activeImg: '',
      normalImg: '',
      isShowBubble: false
    },
    {
      text: '我的',
      pageUrl: '',
      activeImg: '',
      normalImg: '',
      isShowBubble: false
    }
  ]);
  
  const route = useRoute();
  const router = useRouter();
  const routePath = computed(() => route.path);
  
  function switchTab(item: any) {
    if (item.pageUrl === routePath.value) return;
    router.push(item.pageUrl);
  }
  </script>
  
  <style lang="less" scoped>
  /* Style remains the same as provided */
  </style>