<template>
  <view class="tab-bar">
    <view
      v-for="(item, index) in tabBar.list"
      :key="item.pagePath"
      :class="['tab-item', { active: currentTab === index }]"
      @click.stop="selectTabBar(index, item.pagePath)"
    >
      <view class="icon-wrapper">
        <view v-if="currentTab === index">
          <image :src="item.roundIcon" class="PolygonIcon"></image>
          <image :src="item.iconShow" class="home-item-isShow"></image>
        </view>
        <image v-else :src="item.icon" class="home-item-img"></image>
      </view>
      <span class="labelTile">{{ item.text }}</span>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { tabBar } from '@/pages.json'
  import { t } from '@/locale'
  import { useTabbarStore } from '@/store/tabbar'
  import { onMounted, computed } from 'vue'

  const tabbarStore = useTabbarStore()
  const currentTab = computed(() => tabbarStore.curIdx)
  function selectTabBar(index: number, url: string) {
    tabbarStore.setCurIdx(index)
    uni.switchTab({
      url: `/${url}`,
    })
  }

  onMounted(() => {
    // #ifdef APP-PLUS | H5
    uni.hideTabBar({
      fail(err) {
        console.log('hideTabBar fail: ', err)
      },
      success(res) {
        console.log('hideTabBar success: ', res)
      },
    })
    const routes = getCurrentPages()
    const curRoute = routes[routes.length - 1]?.route
    for (let i = 0; i < tabBar.list.length; i++) {
      const { pagePath } = tabBar.list[i]
      if (pagePath === curRoute) {
        tabbarStore.setCurIdx(i)
        break
      }
    }

    // #endif
  })
</script>

<style lang="scss" scoped>
  .tab-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  .tab-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: #666;
    transition: color 0.3s ease;
  }

  .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .tab-item.active .icon-wrapper {
    transform: translateY(-48rpx);
  }
  .labelTile {
    margin-top: 6rpx;
    font-size: 24rpx;
    transition: all 0.3s ease;
  }
  .tab-item.active .labelTile {
    color: #f88842;
    transform: translateY(-60rpx);
  }

  .home-item-img {
    width: 48rpx;
    height: 48rpx;
    object-fit: contain;
  }
  .home-item-isShow {
    width: 100rpx;
    height: 100rpx;
    object-fit: contain;
  }

  .PolygonIcon {
    position: absolute;
    top: 18rpx;
    left: -76rpx;
    width: 250rpx;
    height: 32rpx;
  }
</style>
