<script setup lang="ts">
import { customTabbarEnable, nativeTabbarList, nativeTabbarNeedHide, tabbarCacheEnable } from './config'
import { tabbarStore } from './store'

const OSS = inject('OSS')

// 根据当前路由确定激活的 tabbar
const activeTabbar = ref(nativeTabbarList[tabbarStore.curIdx]?.pagePath || nativeTabbarList[0]?.pagePath || '')

// 初始化激活的 tabbar
function initActiveTabbar() {
  const pages = getCurrentPages()
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1]
    const path = `/${currentPage.route}`

    // 根据当前路径找到对应的 tabbar
    const item = nativeTabbarList.find(tab => `/${tab.pagePath}` === path)
    if (item) {
      const index = nativeTabbarList.findIndex(tab => tab.pagePath === item.pagePath)
      tabbarStore.setCurIdx(index)
      activeTabbar.value = item.pagePath
    }
  }
}

// 初始化
onLoad(() => {
  initActiveTabbar()

  // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
  if (customTabbarEnable && nativeTabbarNeedHide) {
    uni.hideTabBar({
      fail(err) {
        console.log('hideTabBar fail: ', err)
      },
      success(res) {
        // console.log('hideTabBar success: ', res)
      },
    })
  }
})

// 监听页面变化
onShow(() => {
  initActiveTabbar()
})

// tabbar 切换处理
function handleTabbarChange({ value }: { value: string }) {
  const item = nativeTabbarList.find(tab => tab.pagePath === value)
  if (!item)
    return

  const index = nativeTabbarList.findIndex(tab => tab.pagePath === value)
  tabbarStore.setCurIdx(index)
  activeTabbar.value = value

  const url = `/${item.pagePath}`
  if (tabbarCacheEnable) {
    uni.switchTab({ url })
  }
  else {
    uni.navigateTo({ url })
  }
}
</script>

<template>
  <wd-tabbar
    v-if="customTabbarEnable"
    v-model="activeTabbar"
    active-color="#018d71"
    inactive-color="#999999"

    safe-area-inset-bottom fixed
    @change="handleTabbarChange"
  >
    <wd-tabbar-item
      v-for="(item, index) in nativeTabbarList"
      :key="index"
      :title="item.text"
      :name="item.pagePath"
    >
      <template #icon>
        <!-- 如果配置了图标名称，使用 wot-design-uni 图标，否则使用图片 -->
        <wd-icon
          v-if="item.icon && item.selectedIcon"
          :name="activeTabbar === item.pagePath ? item.selectedIcon : item.icon"
          :color="activeTabbar === item.pagePath ? '#018d71' : '#999999'"
          size="40rpx"
        />
        <wd-img
          v-else
          height="40rpx"
          width="40rpx"
          :src="activeTabbar === item.pagePath ? `/${item.selectedIconPath}` : `/${item.iconPath}`"
        />
      </template>
    </wd-tabbar-item>
  </wd-tabbar>
</template>

<style scoped lang="scss">
// wot-design-uni tabbar 组件自带样式，无需额外样式
</style>
