<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { useRouter, useRoute } from 'uni-mini-router'
import { onMounted, computed, watch } from 'vue';
import { useTabbar } from '@/stores/useTabbar';

const props = defineProps({
  currentName: {
    type: String,
    default: 'home'
  }
})

const router = useRouter()
const tab = useTabbar()

// const isFirstTime = ref(true)

// onMounted(() => {
//   if (isFirstTime.value) {
//     tab.activeTab = props.currentName
//     isFirstTime.value = false
//   }
// })

const tabWhitelist = ['home', 'progress', 'my']

const nameLabelIconMap = {
  home: {
    title: '进度查看',
    icon: 'dashboard'
  },
  progress: {
    title: '进度管理',
    icon: 'transfer'
  },
  my: {
    title: '我的',
    icon: 'user'
  }
}

const tabList = computed(() => router.routes.filter((r: { name: string }) => tabWhitelist.includes(r.name)).map((route: { name: keyof typeof nameLabelIconMap }) => {
  return {
    name: route.name,
    title: nameLabelIconMap[route.name]?.title,
    icon: nameLabelIconMap[route.name]?.icon
  }
}))
</script>

<template>
  <div>
    <wd-tabbar v-model="tab.activeTab" fixed safe-area-inset-bottom bordered placeholder>
      <wd-tabbar-item v-for="(tab, i) in tabList" :name="tab.name" :title="tab.title" :icon="tab.icon" :key="i"
        @tap="router.pushTab({ name: tab.name })" />
    </wd-tabbar>
  </div>
</template>

<style scoped></style>
