recommend/static/js/recommendation.js

// <20>Ƽ<EFBFBD><C6BC><EFBFBD><EFBFBD>ܽű<DCBD>

let currentUserId = null;

// DOMԪ<4D><D4AA>
const loginSection = document.getElementById('loginSection');
const requestSection = document.getElementById('requestSection');
const recommendationsSection = document.getElementById('recommendationsSection');
const messageArea = document.getElementById('messageArea');

const loginBtn = document.getElementById('loginBtn');
const userIdInput = document.getElementById('userId');
const getRecommendationBtn = document.getElementById('getRecommendationBtn');
const mealTypeSelect = document.getElementById('mealType');
const recommendationsList = document.getElementById('recommendationsList');

// <20><>ʾ<EFBFBD><CABE>Ϣ
function showMessage(message, type = 'info') {
    messageArea.textContent = message;
    messageArea.className = `message-area ${type}`;
    setTimeout(() => {
        messageArea.className = 'message-area';
        messageArea.style.display = 'none';
    }, 3000);
}

// <20>û<EFBFBD><C3BB><EFBFBD>¼
loginBtn.addEventListener('click', async () => {
    const userId = userIdInput.value.trim();
    
    if (!userId) {
        showMessage('<27><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>û<EFBFBD>ID', 'error');
        return;
    }
    
    loginBtn.disabled = true;
    loginBtn.textContent = '<27><>¼<EFBFBD><C2BC>...';
    
    try {
        const response = await fetch('/api/user/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            body: JSON.stringify({
                user_id: userId
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            currentUserId = userId;
            loginSection.style.display = 'none';
            requestSection.style.display = 'block';
            showMessage(`<EFBFBD><EFBFBD>ӭ<EFBFBD><EFBFBD>${data.name || userId}<EFBFBD><EFBFBD>`, 'success');
        } else {
            showMessage(data.message || '<27><>¼ʧ<C2BC><CAA7>', 'error');
        }
    } catch (error) {
        console.error('<27><>¼ʧ<C2BC><CAA7>:', error);
        showMessage('<27><>¼ʧ<C2BC>ܣ<EFBFBD><DCA3><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>', 'error');
    } finally {
        loginBtn.disabled = false;
        loginBtn.textContent = '<27><>¼';
    }
});

// <20><>ȡ<EFBFBD>Ƽ<EFBFBD>
getRecommendationBtn.addEventListener('click', async () => {
    const mealType = mealTypeSelect.value;
    
    getRecommendationBtn.disabled = true;
    getRecommendationBtn.textContent = '<27><>ȡ<EFBFBD><C8A1>...';
    
    try {
        const response = await fetch('/api/recommendation/get', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            body: JSON.stringify({
                user_id: currentUserId,
                meal_type: mealType,
                preferences: {},
                context: {}
            })
        });
        
        const data = await response.json();
        
        if (data.success && data.recommendations && data.recommendations.length > 0) {
            displayRecommendations(data.recommendations);
            recommendationsSection.style.display = 'block';
            showMessage('<27>Ƽ<EFBFBD><C6BC><EFBFBD>ȡ<EFBFBD>ɹ<EFBFBD><C9B9><EFBFBD>', 'success');
        } else {
            showMessage(data.message || '<27><><EFBFBD><EFBFBD><EFBFBD>Ƽ<EFBFBD><C6BC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƹ<EFBFBD><C6B8><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>', 'info');
        }
    } catch (error) {
        console.error('<27><>ȡ<EFBFBD>Ƽ<EFBFBD>ʧ<EFBFBD><CAA7>:', error);
        showMessage('<27><>ȡ<EFBFBD>Ƽ<EFBFBD>ʧ<EFBFBD>ܣ<EFBFBD><DCA3><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>', 'error');
    } finally {
        getRecommendationBtn.disabled = false;
        getRecommendationBtn.textContent = '<27><>ȡ<EFBFBD>Ƽ<EFBFBD>';
    }
});

// <20><>ʾ<EFBFBD>Ƽ<EFBFBD><C6BC><EFBFBD><EFBFBD><EFBFBD>
function displayRecommendations(recommendations) {
    recommendationsList.innerHTML = '';
    
    recommendations.forEach((rec, index) => {
        const card = document.createElement('div');
        card.className = 'recommendation-card';
        
        let foods = [];
        if (rec.foods && Array.isArray(rec.foods)) {
            foods = rec.foods;
        } else if (rec.food) {
            foods = [rec.food];
        }
        
        card.innerHTML = `
            <h3><EFBFBD>Ƽ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> ${index + 1}</h3>
            <div class="food-list">
                ${foods.map(food => `<div class="food-item">${food}</div>`).join('')}
            </div>
            ${rec.confidence ? `<div class="confidence"><3E><><EFBFBD>Ŷ<EFBFBD>: ${(rec.confidence * 100).toFixed(1)}%</div>` : ''}
            ${rec.reason ? `<div style="margin-top: 10px; color: #666;"><3E>Ƽ<EFBFBD><C6BC><EFBFBD><EFBFBD><EFBFBD>: ${rec.reason}</div>` : ''}
        `;
        
        recommendationsList.appendChild(card);
    });
}