<template>
    <view class="custom-tabbar">
        <view 
            class="tabbar-item" 
            v-for="(item, index) in tabbarList" 
            :key="index"
            @click="switchTab(item, index)"
        >
            <view class="tabbar-icon">
                <image 
                    :src="currentItem === item.id ? item.selectedIconPath : item.iconPath"
                    mode="aspectFit"
                />
            </view>
            <view class="badge" v-if="item.badge && item.badge > 0">{{ item.badge }}</view>
            <view class="tabbar-text" :class="{ 'active': currentItem === item.id }">
                {{ item.text }}
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import { useReadMsg } from '@/stores/useReadMsg';

const props = defineProps({
    currentPage: {
        type: Number,
        default: 0
    }
});

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const readMsg = useReadMsg();
const currentItem = ref(props.currentPage);

// 监听props变化
watch(() => props.currentPage, (newPage) => {
    currentItem.value = newPage;
});

// 生成tabbar配置的函数
const generateTabbarList = () => {
    const baseItems = [
        {
            id: 0,
            text: '职位',
            path: '/pages/index/index',
            iconPath: '/static/tabbar/calendar.png',
            selectedIconPath: '/static/tabbar/calendared.png',
            centerItem: false,
            badge: readMsg.badges[0]?.count || 0,
        },
        {
            id: 2,
            text: 'AI+',
            path: '/pages/chat/chat',
            iconPath: '/static/tabbar/logo3.png',
            selectedIconPath: '/static/tabbar/logo3.png',
            centerItem: true,
            badge: readMsg.badges[2]?.count || 0,
        },
        {
            id: 3,
            text: '消息',
            path: '/pages/msglog/msglog',
            iconPath: '/static/tabbar/chat4.png',
            selectedIconPath: '/static/tabbar/chat4ed.png',
            centerItem: false,
            badge: readMsg.badges[3]?.count || 0,
        },
        {
            id: 4,
            text: '我的',
            path: '/pages/mine/mine',
            iconPath: '/static/tabbar/mine.png',
            selectedIconPath: '/static/tabbar/mined.png',
            centerItem: false,
            badge: readMsg.badges[4]?.count || 0,
        },
    ];

    // 获取用户类型，统一使用isCompanyUser字段（0=企业用户，1=求职者, 3=网格员） 
    // 优先从store获取，如果为空则直接从缓存获取
    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
    
    // 获取isCompanyUser字段
    const storeIsCompanyUser = userInfo.value?.isCompanyUser;
    const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
    
    // 获取用户类型的逻辑：
    // 1. 优先使用store中的isCompanyUser
    // 2. 如果store中没有，使用缓存中的isCompanyUser
    // 3. 最后默认为1（求职者）
    const userType = Number(storeIsCompanyUser !== undefined ? storeIsCompanyUser : (cachedIsCompanyUser !== undefined ? cachedIsCompanyUser : 1));
    if (userType === 0 || userType === 2) {
        // 企业用户：显示发布岗位
        baseItems.splice(1, 0, {
            id: 1,
            text: '发布岗位',
            path: '/pages/job/publishJob',
            iconPath: '/static/tabbar/post.png',
            selectedIconPath: '/static/tabbar/posted.png',
            centerItem: false,
            badge: 0,
        });
    } else {
        // 求职者用户（包括未登录状态）：显示招聘会
        baseItems.splice(1, 0, {
            id: 1,
            text: '招聘会',
            path: '/pages/careerfair/careerfair',
            iconPath: '/static/tabbar/post.png',
            selectedIconPath: '/static/tabbar/posted.png',
            centerItem: false,
            badge: readMsg.badges[1]?.count || 0,
        });
    }

    return baseItems;
};

// 根据用户类型生成不同的导航栏配置
const tabbarList = computed(() => {
    return generateTabbarList();
});

// 强制刷新tabbar的方法
const forceRefresh = () => {
    // 触发响应式更新
    const cachedUserInfo = uni.getStorageSync('userInfo') || {};
    const currentUserType = userInfo.value?.isCompanyUser !== undefined ? userInfo.value.isCompanyUser : (cachedUserInfo.isCompanyUser !== undefined ? cachedUserInfo.isCompanyUser : 1);
};

// 监听用户类型变化（只监听isCompanyUser字段）
watch(() => userInfo.value?.isCompanyUser, (newIsCompanyUser, oldIsCompanyUser) => {
    if (newIsCompanyUser !== oldIsCompanyUser) {
        // 强制触发computed重新计算
        forceRefresh();
    }
}, { immediate: true });

// 监听用户信息变化（包括登录状态）
watch(() => userInfo.value, (newUserInfo, oldUserInfo) => {
    if (newUserInfo !== oldUserInfo) {
        // 强制触发computed重新计算
        forceRefresh();
    }
}, { immediate: true, deep: true });

// 切换tab
const switchTab = (item, index) => {
    // 检查是否为"发布岗位"页面，需要判断企业信息是否完整
    if (item.path === '/pages/job/publishJob') {
        // 检查用户是否已登录
        const token = uni.getStorageSync('token') || '';
        const hasLogin = userStore.hasLogin;
        
        if (!token || !hasLogin) {
            // 未登录，发送事件显示登录弹窗
            uni.$emit('showLoginModal');
            return; // 不进行页面跳转
        }
        
        // 已登录，检查企业信息是否完整
        const cachedUserInfo = uni.getStorageSync('userInfo') || {};
        const storeUserInfo = userInfo.value || {};
        const currentUserInfo = storeUserInfo.id ? storeUserInfo : cachedUserInfo;
        
        // 判断企业信息字段company是否为null或undefined
        if (!currentUserInfo.company || currentUserInfo.company === null) {
            // 企业信息为空，跳转到企业信息补全页面
            uni.navigateTo({
                url: '/pages/complete-info/company-info',
            });
        } else {
            // 企业信息完整，跳转到发布岗位页面
            uni.navigateTo({
                url: '/pages/job/publishJob',
            });
        }
        
        currentItem.value = item.id;
        return;
    }
    
    // 检查是否为"我的"页面，需要登录验证和用户类型判断
    if (item.path === '/pages/mine/mine') {
        // 检查用户是否已登录
        const token = uni.getStorageSync('token') || '';
        const hasLogin = userStore.hasLogin;
        
        if (!token || !hasLogin) {
            // 未登录，发送事件显示登录弹窗
            uni.$emit('showLoginModal');
            return; // 不进行页面跳转
        }
        
        // 已登录，根据用户类型跳转到不同的"我的"页面
        const cachedUserInfo = uni.getStorageSync('userInfo') || {};
        const storeIsCompanyUser = userInfo.value?.isCompanyUser;
        const cachedIsCompanyUser = cachedUserInfo.isCompanyUser;
        
        // 获取用户类型
        const userType = Number(storeIsCompanyUser !== undefined ? storeIsCompanyUser : (cachedIsCompanyUser !== undefined ? cachedIsCompanyUser : 1));
        
        let targetPath = '/pages/mine/mine'; // 默认求职者页面
        
        if (userType === 0) {
            // 企业用户，跳转到企业我的页面
            targetPath = '/pages/mine/company-mine';
        } else {
            // 求职者或其他用户类型，跳转到普通我的页面
            targetPath = '/pages/mine/mine';
        }
        
        // 跳转到对应的页面
        uni.navigateTo({
            url: targetPath,
        });
        
        currentItem.value = item.id;
        return;
    }
    
    // 判断是否为 tabBar 页面
    const tabBarPages = [
        '/pages/index/index',
        '/pages/careerfair/careerfair',
        '/pages/chat/chat',
        '/pages/msglog/msglog',
        '/pages/mine/mine'
    ];
    
    if (tabBarPages.includes(item.path)) {
        // TabBar 页面使用 redirectTo 避免页面栈溢出
        uni.redirectTo({
            url: item.path,
        });
    } else {
        // 非 TabBar 页面使用 navigateTo
        uni.navigateTo({
            url: item.path,
        });
    }
    
    currentItem.value = item.id;
};

onMounted(() => {
    currentItem.value = props.currentPage;
    // 调试信息：显示当前用户状态和tabbar配置
    forceRefresh();
});
</script>

<style lang="scss" scoped>
.custom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background-color: #ffffff;
    border-top: 1rpx solid #e5e5e5;
    display: flex;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 999;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #5E5F60;
    font-size: 22rpx;
    position: relative;
    cursor: pointer;
}

.tabbar-icon {
    width: 44rpx;
    height: 44rpx;
    margin-bottom: 4rpx;
    position: relative;
}

.tabbar-icon image {
    width: 100%;
    height: 100%;
}

.tabbar-text {
    font-size: 20rpx;
    line-height: 1;
    transition: color 0.3s ease;
}

.tabbar-text.active {
    color: #256BFA;
    font-weight: 500;
}

.badge {
    position: absolute;
    top: 4rpx;
    right: 20rpx;
    min-width: 30rpx;
    height: 30rpx;
    background-color: #ff4444;
    color: #fff;
    font-size: 18rpx;
    border-radius: 15rpx;
    text-align: center;
    line-height: 30rpx;
    padding: 0 10rpx;
    transform: scale(0.8);
}

/* 中间按钮特殊样式 */
.tabbar-item:has(.center-item) {
    .tabbar-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 0;
    }
}
</style>
