<!--
 * @Author: micky
 * @Date: 2024-08-10 15:24:06
 * @LastEditors: micky
 * @LastEditTime: 2024-10-19 15:17:40
 * @FilePath: \chargingpile-uniapp\src\components\tabbar\tabbar.vue
-->
<template>
    <u-tabbar
        :value="activeTabBar"
        @change="handleTabbar"
        :fixed="true"
        :placeholder="true"
        :safeAreaInsetBottom="true"
    >
        <u-tabbar-item v-for="tabbar in tabBarList" :key="tabbar.text" :text="tabbar.text">
            <template #active-icon>
                <image class="active-icon" :src="tabbar.activeIcon"></image>
            </template>
            <template #inactive-icon>
                <image class="inactive-icon" :src="tabbar.inactiveIcon"></image>
            </template>
        </u-tabbar-item>
    </u-tabbar>
</template>

<script setup lang="ts">
import { unref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useTabBarStore } from '@/stores/tabbar'
import { navigateTo } from '@/utils/util'

interface TabBarProps {
    defaultTabBar?: number
}
const props = withDefaults(defineProps<TabBarProps>(), {
    defaultTabBar: 0
})

const tabBarStore = useTabBarStore()
const { tabBarList, activeTabBar } = storeToRefs(tabBarStore)

const handleTabbar = (index: number) => {
    tabBarStore.setActiveTabBar(index)
    navigateTo(unref(tabBarList)[index], 'reLaunch')
}
watch(
    () => props.defaultTabBar,
    () => {
        tabBarStore.setActiveTabBar(activeTabBar.value)
    },
    { immediate: true }
)
</script>
<style lang="scss" scoped>
.active-icon,
.inactive-icon {
    width: 40rpx;
    height: 40rpx;
    object-fit: cover;
}
</style>
