mobile_h5/card/pages/tpl/style3/new/js/logic-index.js

var state = {
    token: "",
    ecId: 0,
    pageName: "index",
    
    ecName: '', 
    ecDesc: '', 
    beginSecond: null, 
    endSecond: null, 
    secondCardName: '', 
    
    isJoin: null, 
    isFinished: false, 
    
    countdown: "", 
    interval: null,
    
    mcState: 0, // 0: Not started, 1: In progress, 2: Finished
    
    // Query params
    type: "锦标赛",
    btnText: "开始比赛"
};

function initIndexPage() {
    const params = new URLSearchParams(window.location.search);
    state.token = params.get('token') || '';
    state.ecId = params.get('id') || 0;
    state.type = params.get('type') || "锦标赛";
    state.btnText = params.get('btnText') || "开始比赛";
    
    if(window.cardfunc) {
        window.cardfunc.init(state.token, state.ecId);
        window.cardfunc.getCardConfig(onConfigLoaded);
    }
    
    // Bind events
    const btn = document.getElementById('action-btn');
    if(btn) {
        btn.addEventListener('click', btnClick);
    }
}

function onConfigLoaded(config) {
    // Load CSS if any (cardfunc handles common config, we handle page specific if needed)
    // For pure HTML with Tailwind, maybe we don't need dynamic CSS injection as much, 
    // or we rely on cardfunc.loadCardCommonConfig which is already called.
    
    // Now fetch data
    getCardBaseQuery();
    getUserJoinCardQuery();
    // matchRsDetailQuery(); // Optional: for red dot
}

function getCardBaseQuery() {
    uni.request({
        url: window.apiCardBaseQuery,
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            "token": state.token,
        },
        method: "POST",
        data: {
            ecId: state.ecId,
            pageName: state.pageName
        },
        success: (res) => {
            const data = res.data.data;
            if(data) {
                state.ecName = data.ecName;
                state.ecDesc = data.ecDesc;
                state.beginSecond = data.beginSecond;
                state.endSecond = data.endSecond;
                state.secondCardName = data.secondCardName;
                
                updateCountdown();
                if(state.interval) clearInterval(state.interval);
                state.interval = setInterval(updateCountdown, 60000);
            }
        }
    });
}

function getUserJoinCardQuery() {
    uni.request({
        url: window.apiUserJoinCardQuery,
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
            "token": state.token
        },
        method: "POST",
        data: {
            ecId: state.ecId
        },
        success: (res) => {
            const code = res.data.code;
            const data = res.data.data;
            if (code == 0) {
                state.isJoin = data.isJoin;
                updateUI();
            }
        }
    });
}

function updateCountdown() {
    if (state.endSecond > 0) {
        const now = Date.now() / 1000;
        
        // Calculate state based on time
        if(state.beginSecond > now) {
            state.mcState = 0; // Not started
        } else if (state.endSecond > now) {
            state.mcState = 1; // In progress
        } else {
            state.mcState = 2; // Finished
            state.isFinished = true;
        }

        let targetTime = state.mcState === 0 ? state.beginSecond : state.endSecond;
        let dif = targetTime - now;
        
        if(state.mcState === 2) {
            dif = 0;
        }

        // Update DOM
        const timerContainer = document.getElementById('timer-container');
        if(timerContainer) {
            let label = state.mcState === 0 ? "距开始" : (state.mcState === 1 ? "距结束" : "已结束");
            
            if(state.mcState === 2) {
                 timerContainer.parentElement.className = "absolute top-[5%] right-[5%] bg-gray-800/80 backdrop-blur-md rounded-full";
                 timerContainer.parentElement.style.padding = "1.5vw 3vw";
                 timerContainer.innerHTML = '<span class="text-gray-200 font-bold" style="font-size: 4vw;">已结束</span>';
            } else {
                let days = Math.floor(dif / (3600 * 24));
                let hours = Math.floor((dif % (3600 * 24)) / 3600);
                // let minutes = Math.floor((dif % 3600) / 60);
                
                timerContainer.innerHTML = `
                    <span class="opacity-90" style="font-size: 3.5vw;">${label}</span>
                    <span class="font-bold text-yellow-300 tabular-nums" style="font-size: 4.5vw;">
                        <span id="days">${days.toString().padStart(2,'0')}</span>天<span id="hours">${hours.toString().padStart(2,'0')}</span>时
                    </span>
                `;
            }
        }
        updateUI();
    }
}

function updateUI() {
    const btn = document.getElementById('action-btn');
    if(!btn) return;

    if(state.isJoin) {
        // Already joined, show "Enter Game" or "View Rank"
        if (state.mcState === 0) {
             // Not started but joined? Maybe "Wait for start" or just "View Rank"
             btn.innerHTML = '查看排名 <i class="fas fa-list-ol opacity-80" style="font-size: 4vw;"></i>';
             btn.className = "w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold shadow-xl border border-white/20 active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]";
        } else if (state.mcState === 1) {
            btn.innerHTML = '进入比赛 <i class="fas fa-flag-checkered opacity-80" style="font-size: 4vw;"></i>';
            btn.className = "w-full bg-gradient-to-r from-green-400 to-emerald-600 text-white font-bold shadow-xl border border-white/20 active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]";
        } else {
            btn.innerHTML = '查看数据';
            btn.className = "w-full bg-slate-600 text-white font-bold shadow-xl active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]";
        }
    } else {
        // Not joined
         if (state.mcState === 0 || state.mcState === 1) {
            btn.innerHTML = '开始报名 <i class="fas fa-chevron-right opacity-80" style="font-size: 4vw;"></i>';
            btn.className = "w-full bg-gradient-to-r from-orange-500 to-red-600 text-white font-bold shadow-xl border border-white/20 active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]";
         } else {
            btn.innerHTML = '查看排名'; // Event finished
            btn.className = "w-full bg-slate-600 text-white font-bold shadow-xl active:scale-95 transition-transform tracking-wide flex items-center justify-center gap-[2vw]";
         }
    }
    
    // Adjust styles based on vw (done in HTML mostly, but classes updated above)
    btn.style.fontSize = "5vw";
    btn.style.padding = "3.5vw 0";
    btn.style.borderRadius = "9999px";
}

function btnClick() {
    const queryString = `token=${state.token}&id=${state.ecId}&type=${state.type}&btnText=${state.btnText}`;
    
    if (state.isJoin) {	
        const url = `ranklist.html?${queryString}&full=true`;
        window.uni.navigateTo({ url: url });
    } else {	
        if (!state.isFinished) {
            if (state.secondCardName == 'rankList') {
                const url = `ranklist.html?${queryString}&full=true`;
                 window.uni.navigateTo({ url: url });
            } else {
                const url = `signup.html?${queryString}&full=true`;
                 window.uni.navigateTo({ url: url });
            }
        } else {
            const url = `ranklist.html?${queryString}&full=true`;
             window.uni.navigateTo({ url: url });
        }
    }
}