<template>
  <view class="tab-bar">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="handleTabClick(index, item)"
    >
      <image
        :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
        :class="`tab-icon tab-icon-${index}`"
      />
      <text class="tab-text" :class="{ active: currentIndex === index }">{{
        item.text
      }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, computed } from "vue";
import { useUserStore } from "@/stores/user.js";
import { useGlobalStore } from "@/stores/global.js";

const globalStore = useGlobalStore();
const userStore = useUserStore();

const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;

const tabList = ref([
  {
    text: "首页",
    iconPath: $baseUrl + "tabBar/icon_tab_home_normal.png",
    selectedIconPath: $baseUrl + "tabBar/icon_tab_home_selected.png",
  },
  {
    text: "品牌故事",
    iconPath: $baseUrl + "tabBar/icon_tab_brand_normal.png",
    selectedIconPath: $baseUrl + "tabBar/icon_tab_brand_selected.png",
  },
  {
    text: "积分权益",
    iconPath: $baseUrl + "tabBar/icon_tab_gift_normal.png",
    selectedIconPath: $baseUrl + "tabBar/icon_tab_gift_selected.png",
  },
  {
    text: "我的",
    iconPath: $baseUrl + "tabBar/icon_tab_person_normal.png",
    selectedIconPath: $baseUrl + "tabBar/icon_tab_person_selected.png",
  },
]);

const emit = defineEmits(["tabClick"]);

const currentIndex = computed(() => globalStore.curTabIndex);

const handleTabClick = (index, item) => {
  globalStore.setCurTabIndex(index);
  emit("tabClick", { index, item });
};

onMounted(() => {
  userStore.wxAutoLogin();
});
</script>

<style lang="less" scoped>
@import "@/common.less";

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .tab-icon {
      width: 48rpx;
      height: 48rpx;

      position: absolute;
      top: 28rpx;
    }

    .tab-icon-0 {
      width: 36rpx;
      height: 40rpx;
      top: 28rpx;
    }
    .tab-icon-1 {
      width: 34rpx;
      height: 38rpx;
      top: 29rpx;
    }
    .tab-icon-2 {
      width: 38rpx;
      height: 41rpx;
      top: 24rpx;
    }

    .tab-icon-3 {
      width: 36rpx;
      height: 41rpx;
      top: 28rpx;
    }

    .tab-text {
      font-size: 20rpx;
      color: #666;

      position: absolute;
      top: 81rpx;

      &.active {
        color: @color-gold-cover;
        font-weight: 500;
      }
    }
  }
}
</style>
