<!--
  商家端自定义 TabBar 组件
  - 仅在 merchant Tab 页中使用
  - 支持微信小程序 custom tabBar 模式
  - 底部安全区自动适配
-->
<template>
  <view class="merchant-tabbar" :style="{ paddingBottom: safeBottom }">
    <view
      v-for="(item, index) in tabs"
      :key="index"
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="switchTab(index)"
    >
      <view class="tab-icon-wrap">
        <text class="tab-icon">{{ item.icon }}</text>
        <view v-if="item.badge > 0" class="tab-badge">
          <text class="badge-text">{{ item.badge > 99 ? '99+' : item.badge }}</text>
        </view>
      </view>
      <text class="tab-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script lang="uts">
  export default {
    props: {
      current: {
        type: Number,
        default: 0
      },
      badges: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        currentIndex: this.current as number,
        safeBottom: '0px',
        tabs: [
          { text: '首页', icon: '🏠', path: '/pages/mall/merchant/index', badge: 0 },
          { text: '消息', icon: '💬', path: '/pages/mall/merchant/messages', badge: 0 },
          { text: '订单', icon: '📋', path: '/pages/mall/merchant/orders', badge: 0 },
          { text: '成长', icon: '🚀', path: '/pages/mall/merchant/growth', badge: 0 },
          { text: '我的', icon: '👤', path: '/pages/mall/merchant/profile', badge: 0 }
        ]
      }
    },

    watch: {
      current(val: number) {
        this.currentIndex = val
      },
      badges(val: Record<string, number>) {
        this.updateBadges(val)
      }
    },

    mounted() {
      this.initSafeArea()
      this.currentIndex = this.current
    },

    methods: {
      initSafeArea() {
        // #ifdef MP-WEIXIN
        try {
          const info = wx.getWindowInfo()
          const safeAreaBottom = info.screenHeight - info.safeArea.bottom
          if (safeAreaBottom > 0) {
            this.safeBottom = safeAreaBottom + 'px'
          }
        } catch (e) {}
        // #endif
      },

      updateBadges(badgeMap: Record<string, number>) {
        const keys = ['index', 'messages', 'orders', 'growth', 'profile']
        for (let i = 0; i < keys.length; i++) {
          if (badgeMap[keys[i]] != null) {
            this.tabs[i].badge = badgeMap[keys[i]]
          }
        }
      },

      switchTab(index: number) {
        if (this.currentIndex === index) return
        this.currentIndex = index
        uni.reLaunch({
          url: this.tabs[index].path
        })
      }
    }
  }
</script>

<style>
  .merchant-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background-color: #ffffff;
    border-top-width: 1rpx;
    border-top-style: solid;
    border-top-color: #eeeeee;
    z-index: 999;
    padding-top: 16rpx;
  }

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 12rpx;
    position: relative;
  }

  .tab-icon-wrap {
    position: relative;
    margin-bottom: 8rpx;
  }

  .tab-icon {
    font-size: 48rpx;
    line-height: 1;
    filter: grayscale(100%) opacity(0.45);
  }

  .tab-item.active .tab-icon {
    filter: none;
  }

  .tab-text {
    font-size: 22rpx;
    color: #999999;
  }

  .tab-item.active .tab-text {
    color: #09C39D;
    font-weight: bold;
  }

  .tab-badge {
    position: absolute;
    top: -10rpx;
    right: -20rpx;
    min-width: 32rpx;
    height: 32rpx;
    background-color: #ff3b30;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8rpx;
    padding-right: 8rpx;
  }

  .badge-text {
    font-size: 20rpx;
    color: #ffffff;
    font-weight: bold;
  }
</style>
