<template>
  <view class="shop-tabbar-container" :class="{ 'cart-bg': tabbarStore.curIdx === 2 }">
    <view
      class="tabbar-item"
      @click="selectTabBar(category.path, 1)"
      :class="{ 'tabbar-active': tabbarStore.curIdx === 1 }"
    >
      <view class="tabbar-item-wrapper">
        <view class="tabbar-item-wrapper-active-bg"></view>
        <image :src="category.icon" class="tabbar-item-img" mode="widthFix"></image>
      </view>
      <view class="tabbar-item-text">{{ category.text }}</view>
    </view>
    <view
      class="tabbar-item"
      @click="selectTabBar(cate.path, 2)"
      :class="{ 'tabbar-active': tabbarStore.curIdx === 2 }"
    >
      <view class="tabbar-item-wrapper">
        <view class="tabbar-item-wrapper-active-bg"></view>
        <image :src="cate.icon" class="tabbar-item-img" mode="widthFix"></image>
      </view>
      <view class="tabbar-item-text">{{ cate.text }}</view>
    </view>
    <view
      class="home-item"
      @click="selectTabBar(home.path, 0)"
      :class="{ 'home-active': tabbarStore.curIdx === 0 }"
    >
      <view class="home-item-wrapper">
        <image :src="home.icon" class="home-item-img" mode="widthFix"></image>
      </view>
      <view class="home-item-text">{{ home.text }}</view>
    </view>
    <view
      class="tabbar-item"
      @click="selectTabBar(message.path, 3)"
      :class="{ 'tabbar-active': tabbarStore.curIdx === 3 }"
    >
      <view class="tabbar-item-wrapper">
        <view class="tabbar-item-wrapper-active-bg"></view>
        <image :src="message.icon" class="tabbar-item-img" mode="widthFix"></image>
      </view>
      <view class="tabbar-item-text">{{ message.text }}</view>
    </view>
    <view
      class="tabbar-item"
      @click="selectTabBar(person.path, 4)"
      :class="{ 'tabbar-active': tabbarStore.curIdx === 4 }"
    >
      <view class="tabbar-item-wrapper">
        <view class="tabbar-item-wrapper-active-bg"></view>
        <image :src="person.icon" class="tabbar-item-img" mode="widthFix"></image>
      </view>
      <view class="tabbar-item-text">{{ person.text }}</view>
    </view>
  </view>
</template>

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

  const tabbarStore = useTabbarStore()

  /** tabbarList 里面的 path 从 pages.config.ts 得到 */
  const [home, category, cate, message, person] = tabBar.list.map((item) => ({
    ...item,
    path: `/${item.pagePath}`,
    text: t(item.text),
  }))

  function selectTabBar(url: string, index: number) {
    tabbarStore.setCurIdx(index)
    uni.switchTab({ url })
  }

  onLoad(() => {
    // #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>
  .shop-tabbar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 144rpx;
    overflow: hidden;
    background-color: transparent;
    background-image: url(@/static/images/tabbar-bg.svg);
    background-size: cover;

    &.cart-bg {
      background: $shop-white;
    }

    .tabbar-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 110rpx;
      text-align: center;

      .tabbar-item-text {
        font-family: 'PingFang SC';
        font-size: 20rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 36rpx; /* 180% */
        color: var(--333, #333);
      }

      .tabbar-item-wrapper {
        position: relative;
        width: 64rpx;
        height: 64rpx;
        margin: 0 auto;
        border-radius: 50%;

        .tabbar-item-wrapper-active-bg {
          position: absolute;
          top: 15rpx;
          left: 22rpx;
          display: none;
          width: 22rpx;
          height: 50rpx;
          border-radius: 50%;
        }

        .tabbar-item-img {
          width: 64rpx;
          margin: 5rpx auto;
        }
      }

      &.tabbar-active {
        .tabbar-item-text {
          color: #ff4c1b;
        }
        .tabbar-item-wrapper {
          .tabbar-item-wrapper-active-bg {
            display: block;
            @include shop-box-show(40rpx);
          }
        }
      }
    }

    .home-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 96rpx;
      text-align: center;

      .home-item-text {
        font-family: 'PingFang SC';
        font-size: 20rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 36rpx; /* 180% */
        color: var(--333, #333);
      }

      .home-item-wrapper {
        display: flex;
        justify-content: center;
        width: 96rpx;
        height: 96rpx;
        background: var(--fff, $shop-white);
        // background-color: #f2f2f2;
        border-radius: 24rpx;
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.15);
        .home-item-img {
          width: 76rpx;
          margin-top: 10rpx;
        }
      }

      &.home-active {
        .home-item-wrapper {
          background-color: #ff4c1b;
        }

        .home-item-text {
          color: #ff4c1b;
        }
      }
    }
  }
</style>
