// 菜品卡片组件

// 渲染菜品卡片
function renderDishCard(dish, isInOrder = false) {
    const indicatorClass = isInOrder ? 'in-order' : 'not-in-order';
    const indicatorIcon = isInOrder ? '✓' : '+';

    return `
        <div class="dish-card" data-id="${dish.id}">
            <div class="img-wrapper">
                <img src="${dish.cover_image || getDefaultImage()}" alt="${dish.name}">
                ${dish.category_name ? `<span class="category-tag">${dish.category_name}</span>` : ''}
                <span class="order-indicator ${indicatorClass}">${indicatorIcon}</span>
            </div>
            <div class="card-content">
                <div class="dish-name">${dish.name}</div>
                <div class="dish-meta">${dish.view_count || 0} 次浏览</div>
            </div>
        </div>
    `;
}

// 渲染菜品网格
function renderDishGrid(dishes, containerSelector, onCardClick) {
    const container = document.querySelector(containerSelector);
    if (!container) return;

    container.innerHTML = dishes.map(dish => renderDishCard(dish)).join('');

    container.querySelectorAll('.dish-card').forEach(card => {
        card.addEventListener('click', () => {
            if (onCardClick) {
                onCardClick(card.dataset.id);
            }
        });
    });
}

// 导出
window.DishCard = {
    render: renderDishCard,
    renderGrid: renderDishGrid
};