<script setup>
import { ref } from "vue";

const activeTab = ref("member");

const tabs = [
  { id: "member", image: "../static/tab-vip.png" },
  { id: "growth", image: "../static/tab-grow.png" },
  { id: "shop", image: "../static/tab-mall.png" },
];

function handleTabClick(tabId) {
  activeTab.value = tabId;
}
</script>

<template>
  <view class="footer">
    <image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
    <view
      v-for="(tab, index) in tabs"
      :key="tab.id"
      class="tab-item"
      :class="{ active: activeTab === tab.id }"
      @click="handleTabClick(tab.id)"
    >
      <image
        :src="tab.image"
        :style="{
          width: index === 1 ? '100px' : '40px',
          transform: index === 1 ? '' : 'translateY(10px)',
        }"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<style scoped>
.footer {
  height: 90px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.footer-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  transform: translateX(5px);
}

.tab-item {
  z-index: 1;
}
</style>
