<template>
  <view class="ie-tabbar">
    <view class="ie-tabbar-item" v-for="(item, index) in list" :key="item.pagePath" @click="handleClick(index)">
      <view class="ie-tabbar-item-container">
        <ie-image class="ie-tabbar-item-image" :src="active === index ? item.selectedIconPath : item.iconPath"
          mode="widthFix" />
      </view>
      <view :class="[active === index ? 'text-primary' : 'text-fore-subcontent', 'ie-tabbar-item-text']">{{ item.text }}
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import iconHome from '@/pagesMain/static/image/tabbar/icon-home.png';
import iconHomeActive from '@/pagesMain/static/image/tabbar/icon-home-active.png';
import iconVolunteer from '@/pagesMain/static/image/tabbar/icon-volunteer.png';
import iconVolunteerActive from '@/pagesMain/static/image/tabbar/icon-volunteer-active.png';
import iconMe from '@/pagesMain/static/image/tabbar/icon-me.png';
import iconMeActive from '@/pagesMain/static/image/tabbar/icon-me-active.png';
defineOptions({
  options: {
    virtualHost: true
  }
})
const props = defineProps({
  active: {
    type: Number,
    default: 0
  }
});

const handleClick = (index: number) => {
  uni.switchTab({
    url: list[index].pagePath,
    complete: () => { },
    fail: (e) => {
      uni.showToast({
        title: '跳转失败',
        icon: 'none'
      });
    }
  });
}
const list = [
  {
    pagePath: "/pagesMain/pages/index/index",
    iconPath: iconHome,
    selectedIconPath: iconHomeActive,
    text: "首页"
  },
  {
    pagePath: "/pagesMain/pages/volunteer/volunteer",
    iconPath: iconVolunteer,
    selectedIconPath: iconVolunteerActive,
    text: "填志愿"
  },
  {
    pagePath: "/pagesMain/pages/me/me",
    iconPath: iconMe,
    selectedIconPath: iconMeActive,
    text: "我的"
  }
];
// #ifdef H5
uni.hideTabBar();
// #endif
</script>
<style lang="scss" scoped>
.ie-tabbar {
  
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: white;
  // border-top: 1px solid #efefef;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  padding-bottom: env(safe-area-inset-bottom);
  flex-shrink: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ie-tabbar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.ie-tabbar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 99;
}

.ie-tabbar-item-container {
  width: 22px;
  height: 22px;
}

.ie-tabbar-item-image {
  width: 100%;
  height: 100%;
}

.ie-tabbar-item-text {
  font-size: 10px;
  margin-top: 2px;
}
</style>