<template>
  <uni-tabbar class="myCustomTabbar uni-tabbar" :style="{ flexDirection: direction === 'horizontal' ? 'row' : 'column' }">
    <div
      class="uni-tabbar__item"
      v-for="(item, index) in tabItems"
      :key="index"
      @click="handleTabItemTap(item)"
      :class="{ 'call-phone-item': item.phoneIcon }"
    >
      <div class="uni-tabbar__bd">
        <div class="uni-tabbar__icon">
          <svg v-if="index === 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18.733154296875" viewBox="0 0 18 18.733154296875"><path d="M18,17.733154C18,18.285454,17.552299,18.733154,17,18.733154L1,18.733154C0.44772005,18.733154,0,18.285454,0,17.733154L0,7.2222252C0,6.9136353,0.14246988,6.6223249,0.38606,6.4328756L8.3860998,0.21064496C8.7472,-0.070214987,9.2528,-0.070214987,9.6139002,0.21064496L17.613899,6.4328756C17.8575,6.6223249,18,6.9136353,18,7.2222252L18,17.733154ZM16,16.733154L16,7.7113056L9,2.266865L2,7.7113056L2,16.733154L16,16.733154Z" :fill="selected === 0 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
          <svg v-if="index === 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="20" viewBox="0 0 18 20"><path d="M17,20L1,20C0.44772005,20,0,19.552299,0,19L0,1C0,0.44772005,0.44772005,0,1,0L17,0C17.552299,0,18,0.44772005,18,1L18,19C18,19.552299,17.552299,20,17,20ZM16,18L16,2L2,2L2,18L16,18ZM5,5L13,5L13,7L5,7L5,5ZM5,9L13,9L13,11L5,11L5,9ZM5,13L10,13L10,15L5,15L5,13Z" :fill="selected === 1 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
          <svg v-if="index === 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="21" viewBox="0 0 16 21"><path d="M16,21L14,21L14,19C14,17.3431,12.6569,16,11,16L5,16C3.3431501,16,2,17.3431,2,19L2,21L0,21L0,19C0,16.2386,2.2385802,14,5,14L11,14C13.7614,14,16,16.2386,16,19L16,21ZM8,12C4.6862898,12,2,9.3136997,2,6C2,2.68629,4.6862898,0,8,0C11.3137,0,14,2.68629,14,6C14,9.3136997,11.3137,12,8,12ZM8,10C10.2091,10,12,8.2091398,12,6C12,3.7908602,10.2091,2,8,2C5.7908602,2,4,3.7908602,4,6C4,8.2091398,5.7908602,10,8,10Z" :fill="selected === 2 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
          <!-- <uv-icon v-if="showIcon" :name="item.icon" custom-prefix="custom-icon" :size="item.size || 20" :color="themeInfo.iconColor"></uv-icon> -->
        </div>
        <div class="uni-tabbar__label" :style="{ fontSize: '10px',color: selected === index ? '#fb322e' : '#000000' }">{{ item.label }}</div>
      </div>
    </div>
  </uni-tabbar>
</template>

<script setup>
import { ref, computed } from 'vue';
import { defineProps, defineEmits } from 'vue';
import { isXiaohongshu } from "@/config/index.js";

// 主题色配置
import { useMainStore } from "@/store/index.js"
const { themeInfo } = useMainStore();
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const props = defineProps({
  direction: {
    type: String,
    default: 'horizontal',
  },
  showIcon: {
    type: Boolean,
    default: true,
  },
  selected: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['onTabItemTap']);

const tabItems = computed(() => {
  if (isXiaohongshu) {
    return [
      { label: t('tabbar.home'), icon: 'home1', index:0, pagePath:'pages/index/index' },
      { label: '', icon: 'telephone', index:2, pagePath:'', size: 34, phoneIcon: true },
      { label: t('tabbar.book'), icon: 'book', index:1, pagePath:'pages/book/index'},
    ]
  } else {
    return [
      { label: t('tabbar.home'), icon: '/static/tabbar/home.svg', index:0, pagePath:'pages/index/index' },
      // { label: t('tabbar.book'), icon: 'book', index:1, pagePath:'pages/book/index'},
      // { label: '', icon: 'telephone', index:2, pagePath:'', size: 34, phoneIcon: true },
      { label: "订单", icon: '/static/tabbar/order.svg', index:3, pagePath:'pages/unlock/index' },
      { label: t('tabbar.personal'), icon: '/static/tabbar/user.svg', index:4, pagePath:'pages/personal/index' },
    ]
  }
});

const handleTabItemTap = (index) => {
  emit('onTabItemTap', index);
};
</script>

<style scoped lang="scss">
.myCustomTabbar {
  display: flex;
}
.uni-tabbar{
	    box-sizing: border-box;
	    width: 100%;
	    z-index: 998;
}
.uni-tabbar__item{
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	    flex: 1;
	    font-size: 0;
      padding: 0;
	    text-align: center;
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.uni-tabbar__bd{
	display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	    flex: 1;
	    font-size: 0;
	    text-align: center;
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
svg {
					max-width: 100%;
					height: 40rpx;
					width: 40rpx;
				}
</style>
