<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')"
                >
                    <Comment size="20" :color="getIconColor('messages')" />
                    <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 } from 'vue'
import Taro from '@tarojs/taro'
import { Home, Category, Comment, My } from '@nutui/icons-vue-taro'

// 当前激活的tab
const activeTab = ref('')

/**
 * 获取当前页面路径并设置激活状态
 */
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 = (url) => {
    Taro.redirectTo({
        url: 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(() => {
    getCurrentPage()
})
</script>

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