<template>
  <view class="">
    <view class="custom-tab-bar-placeholder"></view>
    <view class="custom-tab-bar">
      <view
        class="tab-item"
        v-for="(item, i) in tabBarList"
        :key="i"
        v-if="tabBarShowList[i]"
        @click="switchTab(i)"
      >
        <image
          :src="currentTab === i ? item.select_img : item.img"
          style="height: 80rpx;"
		  :style="{'width':item.width}"
        ></image>
        <!-- <text :style="{ color: currentTab === i ? item.selectColor : '#fff' }">{{
 	      item.text
 	    }}</text> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentTab: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabBarList: [
        {
          pagePath: "pages/index/index",
          selectColor: "#00FF00",
          img: require("@/static/image/tabbar/home.png"),
          select_img: require("@/static/image/tabbar/home_select.png"),
          text: "首页",
		  width:'53rpx'
        },
        {
          pagePath: "pages/index/readingBody",
          selectColor: "#00FF00",
          text: "阅读体",
          img: require("@/static/image/tabbar/book.png"),
          select_img: require("@/static/image/tabbar/book_select.png"),
		  width:'58rpx'
        },
        // {
        //   pagePath: "pages/index/sensoryStore",
        //   selectColor: "#00FF00",
        //   text: "有感商店",
        // },
        {
          pagePath: "pages/index/timeShopBank",
          selectColor: "#00FF00",
          text: "时间银行",
          img: require("@/static/image/tabbar/time.png"),
          select_img: require("@/static/image/tabbar/time_select.png"),
		  width:'58rpx'
        },
        {
          pagePath: "pages/index/intelligentAgent",
          selectColor: "#00FFFF",
          text: "智能体",
          img: require("@/static/image/tabbar/agent.png"),
          select_img: require("@/static/image/tabbar/agent_select.png"),
		  width:'58rpx'
        },
        {
          pagePath: "pages/index/iSoul",
          selectColor: "#00FF00",
          text: "iSoul",
          img: require("@/static/image/tabbar/isoul.png"),
          select_img: require("@/static/image/tabbar/isoul_select.png"),
		  width:'47rpx'
        },
      ],
      tabBarShowList: [],
    };
  },
  onLoad() {
    this.getCurrentTab();
  },
  mounted() {
    this.tabBarShowList = uni
      .getStorageSync("SHFlag")
      .split(",")
      .map((item) => {
        return item.trim().toLowerCase() === "true";
      });
  },
  methods: {
    getCurrentTab() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const currentPath = currentPage.route;
      this.tabBarList.forEach((item, index) => {
        if (item.pagePath === currentPath) {
          this.currentTab = index;
        }
      });
    },
    switchTab(index) {
      if (this.currentTab === index) return;
      uni.switchTab({
        url: "/" + this.tabBarList[index].pagePath,
      });
    },
  },
};
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 30;
  padding: 20rpx 0;
  background: white;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

.custom-tab-bar-placeholder {
  height: calc(env(safe-area-inset-bottom) + 120rpx);
  width: 100%;
}

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

.tab-item text {
  font-size: 31rpx;
}
</style>
