<template>
  <up-tabbar
    :value="activeIndex"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :safeAreaInsetBottom="true"
    :fixed="true"
    :placeholder="true"
    :border="false"
    @change="handleChange"
    zIndex="100"
  >
    <up-tabbar-item
      v-for="(item, index) in tabList"
      :key="index"
      :text="item.text"
      :name="index"
    >
      <template #active-icon>
        <image :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
      </template>
      <template #inactive-icon>
        <image :src="item.icon" class="tabbar-icon" mode="widthFix" />
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import useUserStore from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import { getDynamicTabMenus } from '@/utils/permissionMenu'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userStore = useUserStore()
const { menus } = storeToRefs(userStore)

const inactiveColor = '#666666'
const activeColor = '#1a3a5c'

const activeIndex = ref(0)

const homeIcon = '/static/images/tabbar/home.png'
const homeSelectedIcon = '/static/images/tabbar/home_.png'
const reportIcon = '/static/images/tabbar/report.png'
const reportSelectedIcon = '/static/images/tabbar/report_.png'
const workIcon = '/static/images/tabbar/work.png'
const workSelectedIcon = '/static/images/tabbar/work_.png'
const mineIcon = '/static/images/tabbar/mine.png'
const mineSelectedIcon = '/static/images/tabbar/mine_.png'

const routeMap = {
  'pages/index': 0,
  'pages/report': 1,
  'pages/work': 2,
  'pages/mine': 3
}

function getCurrentActiveIndex() {
  const pages = getCurrentPages()
  if (pages && pages.length > 0) {
    const route = pages[pages.length - 1].route
    return routeMap[route] !== undefined ? routeMap[route] : 0
  }
  return 0
}

const tabList = computed(() => {
  const dynamicMenus = getDynamicTabMenus(menus.value)

  return [
    {
      text: t('nav.home'),
      icon: homeIcon,
      selectedIcon: homeSelectedIcon,
      path: '/pages/index'
    },
    {
      text: dynamicMenus[0]?.name || t('tab.report'),
      icon: reportIcon,
      selectedIcon: reportSelectedIcon,
      path: '/pages/report'
    },
    {
      text: dynamicMenus[1]?.name || dynamicMenus[0]?.name || t('tab.work'),
      icon: workIcon,
      selectedIcon: workSelectedIcon,
      path: '/pages/work'
    },
    {
      text: t('nav.mine'),
      icon: mineIcon,
      selectedIcon: mineSelectedIcon,
      path: '/pages/mine'
    }
  ]
})

onMounted(() => {
  activeIndex.value = getCurrentActiveIndex()
})

function handleChange(index) {
  if (activeIndex.value === index) return
  activeIndex.value = index
  const item = tabList.value[index]
  if (item) {
    uni.reLaunch({
      url: item.path
    })
  }
}

watch(() => useUserStore().menus, () => {
  activeIndex.value = getCurrentActiveIndex()
})
</script>

<style lang="scss" scoped>
.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
}
</style>
