<template>
  <wd-tabbar :bordered="false" safeAreaInsetBottom :placeholder="true" fixed>
    <view
      class="tabbar-item h-[100rpx] flex flex-col justify-center w-full items-center text-center"
      v-for="(item, index) in tabbarList"
      :key="index"
      :class="[item.centerItem ? 'center-item' : '']"
      @click="changeItem(item)"
    >
      <view class="item-top w-[48rpx] h-[48rpx] p-[10rpx]">
        <image
          class="w-full h-full object-container"
          :src="currentPage == item.id ? item.selectIcon : item.icon"
        ></image>
      </view>
      <view
        class="item-bottom text-[20rpx] mt-[6rpx]"
        :class="[currentPage == item.id ? 'item-active text-[#3370ff]' : '']"
      >
        <text>{{ item.text }}</text>
      </view>
    </view>
  </wd-tabbar>
</template>

<script setup lang="ts">
import { TabesItem } from '@/service/app/types'
import { tabbarList } from '@/hooks/useTabbarList'

const tabbar = ref(1)

defineProps({
  currentPage: {
    type: Number,
    default: 0,
  },
})

const changeItem = (item: TabesItem) => {
  uni.switchTab({
    url: item.path,
  })
}

onMounted(() => {
  uni.hideTabBar()
})
</script>
<style scoped>
view {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.center-item {
  position: relative;
}

.center-item .item-top {
  width: 98rpx;
  height: 98rpx;
}

.center-item .item-bottom {
  position: absolute;
  bottom: 5rpx;
}
</style>
