<template>
    <view class="custom-tabbar">
        <view 
            class="tabbar-item" 
            v-for="(item, index) in tabbarList" 
            :key="index"
            :class="{ 'center-item': item.centerItem }"
            @click.stop="switchTab(item, index)"
            @tap.stop="switchTab(item, index)"
        >
            <view class="tabbar-icon">
                <view class="icon-container">
                    <image 
                        :src="currentItem === item.id ? item.selectedIconPath : item.iconPath"
                        mode="aspectFit"
                    />
                </view>
            </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';
import { checkLoginAndNavigate } from '@/utils/loginHelper';

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: '',
            path: '/pages/chat/chat',
            iconPath: '/static/tabbar/robot2.png',
            selectedIconPath: '/static/tabbar/robot2.png',
            centerItem: true,
            badge: readMsg.badges[2]?.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: '/packageA/pages/job/publishJob',
            iconPath: '/static/tabbar/post.png',
            selectedIconPath: '/static/tabbar/posted.png',
            centerItem: false,
            badge: 0,
        });
    } else {
        // 求职者用户（包括未登录状态）：显示招聘会
        // H5端隐藏招聘会
        // #ifndef H5
        // 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,
        // });
        // #endif
    }
    if (userType === 0) {
        baseItems.splice(2, 0, {
            id: 5,
            text: '招聘会',
            path: '/pages/careerfair/careerfair',
            iconPath: '/static/tabbar/careerfair.png',
            selectedIconPath: '/static/tabbar/careerfaired.png',
            centerItem: false,
            badge: 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) => {
    console.log('switchTab called', item, index);
    
    // 检查是否为需要登录的页面
    const loginRequiredPages = [
        '/packageA/pages/job/publishJob',
        '/pages/mine/mine',
        '/pages/mine/company-mine',
        '/pages/msglog/msglog'
    ];
    
    if (loginRequiredPages.includes(item.path)) {
        // 检查用户是否已登录
        const token = uni.getStorageSync('token') || '';
        const hasLogin = userStore.hasLogin;
        
        if (!token || !hasLogin) {
            // 未登录，根据平台类型跳转到对应的登录页面
            checkLoginAndNavigate();
            return; // 不进行页面跳转
        }
        
        // 已登录，处理特定页面的逻辑
        if (item.path === '/packageA/pages/job/publishJob') {
            // 检查企业信息是否完整
            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: '/packageA/pages/complete-info/company-info',
                });
            } else {
                // 企业信息完整，跳转到发布岗位页面
                uni.navigateTo({
                    url: '/packageA/pages/job/publishJob',
                });
            }
            
            currentItem.value = item.id;
            return;
        }
        
        if (item.path === '/pages/mine/mine') {
            // 根据用户类型跳转到不同的"我的"页面
            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>
/* 动画定义 */
@keyframes pulse {
    0% {
        transform: scale(1.6);
        box-shadow: 0 0 10rpx #256BFA;
        border-color: #256BFA;
    }
    50% {
        transform: scale(1.7);
        box-shadow: 0 0 20rpx #256BFA, 0 0 30rpx rgba(37, 107, 250, 0.5);
        border-color: #4A89FF;
    }
    100% {
        transform: scale(1.6);
        box-shadow: 0 0 10rpx #256BFA;
        border-color: #256BFA;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.custom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #ffffff;
    // border-top: 1rpx solid #e5e5e5;
    display: flex;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 9999;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    pointer-events: auto;
}

.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;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    .icon-container{
        width: 50rpx;
        height: 50rpx;
    }
}

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

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

.tabbar-text {
    font-size: 22rpx;
    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: 32rpx;
    height: 32rpx;
    background-color: #ff4444;
    color: #fff;
    font-size: 19rpx;
    border-radius: 16rpx;
    text-align: center;
    line-height: 32rpx;
    padding: 0 10rpx;
    transform: scale(0.8);
}

/* 中间按钮特殊样式 */
.tabbar-item.center-item {

    .tabbar-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 0;
    }
    .tabbar-icon image {
        // margin-top: -25rpx;
        width: 80%;
        animation: bounce 2s ease-in-out infinite;
    }
    .icon-container{
        width: 50rpx;
        height: 50rpx;
        text-align: center;
        border-radius: 50%;
        border: 2rpx solid #256BFA;
        box-shadow: 0 0 10rpx #256BFA;
        transform: scale(1.6);
        position: relative;
        top: 5rpx;
        animation: pulse 2s ease-in-out infinite;
    }
}
</style>
