<template>
    <div class="fixed bottom-0 w-full max-w-md mx-auto z-50">
        <div class="backdrop-blur-md bg-white/70 border-t border-gray-200 px-4 py-2">
            <div class="flex justify-around items-center">
                <!-- 首页 -->
                <view
                    @click="navigateTo('/pages/index/index')"
                    :class="getTabClass('index')"
                >
                    <Home size="20" :color="getIconColor('index')" />
                    <span class="text-xs mt-1">首页</span>
                </view>

                <!-- 分类 -->
                <view
                    @click="navigateTo('/pages/post/index')"
                    :class="getTabClass('post')"
                >
                    <Category size="20" :color="getIconColor('post')" />
                    <span class="text-xs mt-1">分类</span>
                </view>

                <!-- 我要卖车 -->
                <div class="relative -mt-5">
                    <view
                        @click="navigateTo('/pages/sell/index')"
                        class="bg-orange-500 rounded-full p-3 text-white shadow-lg"
                    >
                        <span class="text-sm font-medium">我要卖车</span>
                    </view>
                </div>

                <!-- 消息 -->
                <view
                    @click="navigateTo('/pages/messages/index')"
                    :class="getTabClass('messages')"
                    class="relative"
                >
                    <Message size="20" :color="getIconColor('messages')" />
                    <!-- 未读消息红点 -->
                    <div
                        v-if="unreadCount > 0"
                        class="absolute top-0 right-0 bg-red-500 rounded-full w-2 h-2"
                    >
                    </div>
                    <span class="text-xs mt-1">通知</span>
                </view>

                <!-- 我的 -->
                <view
                    @click="navigateTo('/pages/profile/index')"
                    :class="getTabClass('profile')"
                >
                    <My size="20" :color="getIconColor('profile')" />
                    <span class="text-xs mt-1">我的</span>
                </view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import Taro from '@tarojs/taro'
import { Home, Category, Message, My } from '@nutui/icons-vue-taro'
import { useUserStore } from '@/stores/user'
import { checkPermission, PERMISSION_TYPES } from '@/utils/permission'

// 当前激活的tab
const activeTab = ref('')
// 用户状态管理
const userStore = useUserStore()
// 未读消息数量
const unreadCount = computed(() => userStore.userInfo.message_count)

/**
 * 获取当前页面路径并设置激活状态
 */
const getCurrentPage = () => {
    const pages = Taro.getCurrentPages()
    if (pages.length > 0) {
        const currentPage = pages[pages.length - 1]
        const route = currentPage.route

        if (route.includes('index/index')) {
            activeTab.value = 'index'
        } else if (route.includes('post/index')) {
            activeTab.value = 'post'
        } else if (route.includes('sell/index')) {
            activeTab.value = 'sell'
        } else if (route.includes('messages/index')) {
            activeTab.value = 'messages'
        } else if (route.includes('profile/index')) {
            activeTab.value = 'profile'
        }
    }
}

/**
 * 导航到指定页面
 * @param {string} url - 页面路径
 */
const navigateTo = async (url) => {
    // 定义需要权限验证的页面（移除个人中心和sell页面的权限检查）
    // const permissionPages = {
        // '/pages/messages/index': PERMISSION_TYPES.MESSAGE
    // }

    // 检查是否需要权限验证
    // const permissionType = permissionPages[url]
    // if (permissionType) {
    //     const hasPermission = await checkPermission(permissionType)
    //     if (!hasPermission) {
    //         return
    //     }
    // }

    Taro.reLaunch({
        url
    })
}

/**
 * 获取tab按钮的样式类
 * @param {string} tab - tab标识
 * @returns {string} 样式类名
 */
const getTabClass = (tab) => {
    const baseClass = 'flex flex-col items-center p-2'
    const activeClass = activeTab.value === tab ? 'text-orange-500' : 'text-gray-500'
    return `${baseClass} ${activeClass}`
}

/**
 * 获取图标颜色
 * @param {string} tab - tab标识
 * @returns {string} 颜色值
 */
const getIconColor = (tab) => {
    return activeTab.value === tab ? '#f97316' : '#6b7280'
}

onMounted(async () => {
    getCurrentPage()
    // 初始化用户信息
    await userStore.fetchUserInfo()
})
</script>

<style lang="less" scoped>
/* 确保底部导航栏在最上层 */
.z-50 {
    z-index: 50;
}
</style>