<script setup>
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);

const props = defineProps({
  signin: {
    type: Function,
    default: () => {},
  },
});

const tabs = [
  { image: "../static/tab-vip.png" },
  { image: "../static/tab-point-book.png" },
  { image: "../static/tab-mall.png" },
];

function handleTabClick(index) {
  if (index === 1 && !user.value.id) return props.signin();
  if (index === 0) {
    uni.navigateTo({
      url: "/pages/be-vip",
    });
  }
  if (index === 1) {
    uni.navigateTo({
      url: "/pages/point-book-create",
    });
  }
  if (index === 2) {
    uni.navigateTo({
      url: "/pages/device-intro",
    });
  }
}
</script>

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

<style scoped>
.footer {
  height: 120px;
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-x: hidden;
}
.footer-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}
.tab-item {
  z-index: 1;
}
.tab-item > image {
  width: 86%;
}
.tab-item:nth-child(2) {
  transform: translate(25%, 20%);
}
.tab-item:nth-child(3) {
  transform: translate(6%, -10%);
}
.tab-item:nth-child(4) {
  transform: translate(-25%, 20%);
}
</style>
