<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 version="1.0" v-if="index === 0" :fill="selected === 0 ? '#fb322e' : '#000000'"
            xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1486.000000 1554.000000"
            preserveAspectRatio="xMidYMid meet">

            <g transform="translate(0.000000,1554.000000) scale(0.100000,-0.100000)" :fill="selected === 0 ? '#fb322e' : '#000000'" stroke="none">
              <path d="M7325 15449 c-172 -11 -228 -23 -445 -96 -193 -64 -233 -89 -1435
-898 -331 -223 -790 -531 -1335 -897 -381 -256 -579 -388 -1265 -849 -176
-119 -507 -341 -735 -494 -1275 -856 -1385 -930 -1465 -995 -329 -268 -553
-687 -595 -1115 -8 -78 -10 -1318 -7 -4305 3 -3807 5 -4202 19 -4275 70 -347
219 -635 448 -865 147 -148 267 -236 440 -320 157 -78 371 -139 545 -158 88
-9 11807 -9 11895 0 132 14 331 65 457 117 85 35 265 137 343 194 194 144 376
365 485 588 47 97 110 280 141 409 18 72 19 267 22 4320 2 2943 0 4273 -8
4338 -35 309 -194 659 -411 900 -137 153 -164 173 -964 710 -225 151 -558 375
-740 497 -181 122 -490 329 -685 460 -195 131 -472 317 -615 413 -143 97 -438
295 -655 440 -408 274 -855 574 -1350 907 -824 554 -1053 706 -1131 753 -195
117 -466 204 -679 217 -52 3 -111 7 -130 9 -19 1 -84 -1 -145 -5z m795 -2326
c885 -595 1228 -826 1800 -1209 499 -335 1064 -715 1600 -1075 168 -113 566
-380 885 -594 319 -214 583 -393 587 -399 4 -6 8 -1769 8 -3918 l0 -3908
-5557 0 -5558 0 2 3912 c2 3121 5 3915 15 3924 7 6 247 168 533 359 286 192
678 454 870 584 610 410 1145 769 1645 1105 267 179 611 410 765 513 154 104
546 367 870 585 325 218 646 435 715 482 77 53 133 85 145 83 11 -2 315 -202
675 -444z" />
            </g>
          </svg>
          <svg v-if="index === 1" version="1.0" :fill="selected === 1 ? '#fb322e' : '#000000'"
            xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1486.000000 1554.000000"
            preserveAspectRatio="xMidYMid meet">

            <g transform="translate(0.000000,1554.000000) scale(0.100000,-0.100000)" :fill="selected === 1 ? '#fb322e' : '#000000'" stroke="none">
              <path d="M3950 15169 c-307 -14 -632 -62 -875 -130 -38 -11 -86 -24 -105 -29
-228 -64 -426 -142 -675 -267 -71 -36 -159 -83 -194 -104 -34 -22 -65 -39 -68
-39 -11 0 -293 -198 -382 -268 -279 -221 -558 -499 -767 -767 -213 -273 -335
-466 -462 -736 -105 -220 -117 -251 -183 -452 -92 -281 -149 -551 -186 -882
-17 -151 -18 -354 -18 -3730 0 -3902 -3 -3647 55 -3999 48 -292 156 -688 221
-808 5 -10 9 -22 9 -28 0 -9 14 -42 90 -205 107 -231 297 -537 479 -770 137
-176 383 -433 561 -588 58 -51 111 -97 118 -105 8 -7 30 -25 50 -40 21 -15 39
-29 42 -32 28 -28 363 -257 400 -273 8 -4 38 -20 65 -37 104 -63 400 -206 510
-247 40 -15 66 -25 108 -42 39 -17 140 -50 202 -66 33 -9 83 -22 110 -30 87
-23 286 -63 415 -84 297 -48 150 -46 3980 -46 3397 0 3623 1 3753 18 422 53
793 143 1042 252 17 8 55 23 85 35 64 25 315 148 380 186 25 15 59 35 75 44
139 79 455 300 540 377 12 10 59 52 105 92 103 91 310 298 405 406 39 44 78
89 88 100 24 26 204 266 244 325 30 45 98 155 134 217 11 18 29 50 41 70 38
67 154 297 172 343 10 25 24 61 33 80 109 252 210 629 254 955 39 288 39 239
39 3900 0 2202 -4 3561 -10 3630 -25 280 -61 498 -120 730 -36 137 -98 341
-119 390 -5 11 -15 36 -22 55 -36 99 -189 416 -251 519 -21 34 -38 65 -38 67
0 3 -28 46 -61 97 -441 661 -1042 1200 -1687 1515 -176 86 -329 150 -437 183
-22 6 -49 15 -60 19 -41 16 -164 51 -280 80 -304 75 -517 105 -860 120 -262
12 -6682 11 -6945 -1z m7085 -1654 c198 -24 293 -43 446 -90 600 -185 1142
-644 1454 -1230 162 -305 243 -609 265 -1000 13 -228 13 -6632 0 -6860 -12
-212 -24 -297 -72 -495 -22 -93 -53 -195 -68 -222 -6 -10 -10 -22 -10 -28 0
-25 -110 -251 -183 -375 -231 -392 -652 -782 -1051 -974 -319 -153 -574 -217
-956 -241 -223 -13 -6622 -14 -6850 0 -91 6 -196 15 -235 20 -614 92 -1133
390 -1553 893 -223 268 -402 617 -476 932 -81 340 -75 62 -76 3916 0 2288 3
3462 10 3535 52 542 239 976 601 1389 363 415 821 689 1329 795 237 49 99 48
3815 49 3002 1 3507 -1 3610 -14z" />
              <path d="M4444 11249 c-16 -4 -48 -7 -71 -8 -23 0 -66 -7 -95 -15 -318 -84
-559 -342 -608 -652 -12 -76 -14 -201 -5 -271 42 -307 285 -580 595 -669 63
-18 173 -19 3205 -22 2709 -2 3150 0 3210 12 299 62 551 299 632 596 26 94 25
330 -1 420 -41 139 -98 239 -197 344 -142 153 -302 234 -504 257 -90 10 -6114
18 -6161 8z" />
              <path d="M4300 7949 c-365 -30 -666 -303 -735 -668 -33 -170 -9 -346 69 -505
106 -213 305 -376 536 -438 l85 -23 2175 0 c2368 0 2247 -3 2393 56 222 89
399 276 474 499 100 297 25 617 -197 841 -139 141 -313 223 -500 235 -110 8
-4212 10 -4300 3z" />
            </g>
          </svg>


          <svg version="1.0" xmlns="http://www.w3.org/2000/svg" v-if="index === 2"
            :fill="selected === 2 ? '#fb322e' : '#000000'" width="18" height="18" viewBox="0 0 1284.000000 1514.000000"
            preserveAspectRatio="xMidYMid meet">

            <g transform="translate(0.000000,1514.000000) scale(0.100000,-0.100000)" :fill="selected === 2 ? '#fb322e' : '#000000'" stroke="none">
              <path d="M6180 15024 c-362 -24 -555 -47 -800 -95 -934 -182 -1825 -609 -2527
-1211 -523 -450 -909 -919 -1255 -1528 -62 -108 -204 -403 -264 -548 -292
-700 -426 -1373 -426 -2132 0 -876 190 -1686 578 -2462 93 -186 103 -206 202
-373 339 -571 817 -1110 1356 -1529 75 -59 86 -71 70 -77 -10 -4 -109 -35
-219 -69 -444 -137 -1077 -380 -1467 -563 -605 -284 -1070 -849 -1233 -1496
-48 -195 -60 -300 -60 -551 1 -265 14 -376 70 -595 125 -489 436 -933 881
-1262 298 -220 666 -360 1056 -402 67 -8 1417 -11 4285 -11 3705 0 4203 2
4313 15 492 61 903 258 1267 609 323 310 530 654 634 1050 115 442 93 962 -58
1366 -204 546 -601 993 -1109 1248 -353 177 -1205 502 -1682 642 -40 12 -72
25 -70 29 2 5 48 44 103 86 459 358 903 842 1221 1332 584 899 894 1943 894
3013 0 2093 -1181 4003 -3050 4934 -626 312 -1266 495 -1960 561 -157 15 -633
27 -750 19z m545 -1744 c644 -54 1245 -262 1780 -615 251 -166 472 -354 698
-595 548 -587 897 -1360 981 -2178 21 -200 21 -564 0 -764 -84 -818 -433
-1591 -981 -2178 -429 -458 -903 -776 -1474 -988 -454 -169 -906 -242 -1409
-229 -410 11 -748 71 -1120 199 -559 193 -1032 489 -1450 908 -622 621 -990
1395 -1091 2290 -17 150 -17 610 0 760 53 475 176 897 381 1307 189 380 405
679 710 983 653 654 1472 1028 2415 1103 98 8 451 6 560 -3z m115 -9490 c1007
-44 1919 -214 2858 -535 391 -133 976 -377 1077 -448 81 -58 149 -149 177
-240 32 -99 31 -264 -1 -352 -56 -154 -189 -286 -341 -338 l-65 -22 -4070 -3
c-2760 -2 -4095 1 -4149 8 -117 15 -213 64 -301 154 -114 116 -155 217 -155
381 1 109 11 160 52 243 39 78 128 164 223 214 146 75 634 274 936 381 1182
418 2493 612 3759 557z" />
            </g>
          </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>
