<template>
  <nut-tabbar v-model="activeIndex" @tab-switch="tabSwitch" class="">
    <nut-tabbar-item v-for="(item,index) in menus" :key="index" :to="`${item.href}`">
      <template #icon="props">
        <div class="text-[36rpx] font-500 pt-[36rpx] mt-[8rpx]" :class="props.active ? 'active-bg w-[104rpx] h-[86rpx] text-[40rpx]':''">{{ item.name }}</div>
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import { useRoute } from "vue-router";

  const route = useRoute()
  const activeIndex = ref(0);

  const menus = [{name:'首页',href:'/home'},{name:'健康',href:"/medical"},{name:'商城',href:'/shop'},{name:'我的',href:'/mine'}]
  // const routeQuery = Object.entries(route.query).map(([key, value]) => `${key}=${value}`).join("&");
  
  const tabSwitch = (item: Record<string, unknown>, index: number) => {
    console.log(item, index);
  };
  
  const useMatchPath = () => {
    const path = route.path;
    activeIndex.value = menus.findIndex(item => item.href === path)
  }
  useMatchPath();
</script>

<style lang="scss" scoped>
.active-bg{
  background-image: url("/images/tabbar/menu-active.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
}
:deep(.nut-badge){
  height: 100%;

}
</style>

<style>
:root{
  --nut-tabbar-border-bottom:0px solid;
}
</style>
