{include file="head.html"}

<style>
/* ====================== 购物车PC页面独有样式（与全站案例/帮助中心统一架构） ====================== */
.position-nav {
    margin-bottom: 30px;
    font-size: 15px;
    color: var(--text-gray);
}
.position-nav a {
    color: var(--primary);
    text-decoration: none;
}

.cart-wrap {
    background: var(--bg-white);
    border-radius: var(--radius-large);
    padding: 40px;
    box-shadow: var(--shadow-light);
}

/* 购物车商品列表 */
.cart-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    gap: 16px;
}
.cart-item:last-child {
    border-bottom: none;
}
.item-check {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.item-check.checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.item-check.checked::after {
    content: "✓";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}
.item-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-normal);
    flex-shrink: 0;
}
.item-main {
    flex: 1;
}
.item-name {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.item-spec {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 8px;
}
.item-price {
    font-size: 16px;
    color: var(--primary);
    font-weight: 500;
}
.item-num {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 20px;
}
.num-btn {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #ddd;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
}
.num-btn:hover {
    background: #f6f6f6;
}
.num-input {
    width: 50px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
}
.del-btn {
    color: #999;
    font-size: 14px;
    cursor: pointer;
    margin-left: 24px;
    transition: color 0.2s;
}
.del-btn:hover {
    color: var(--primary);
}

/* 空购物车 */
.empty-tip {
    text-align: center;
    padding: 80px 0;
    color: var(--text-gray);
    font-size: 16px;
}
.empty-tip a {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 28px;
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
}

/* 底部结算栏 */
.cart-bottom-bar {
    margin-top: 30px;
    padding-top: 24px;
    border-top:1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.check-all {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.bottom-right {
    display: flex;
    align-items: center;
    gap: 24px;
}
.total-price-text {
    font-size: 16px;
}
.total-price-num {
    font-size: 22px;
    color: var(--primary);
    font-weight: bold;
    margin-left:6px;
}
.order-btn {
    min-width: 140px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background-color: var(--primary);
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
    font-size:16px;
    transition: all 0.3s;
}
.order-btn:hover:not(.disabled) {
    opacity:0.9;
}
.order-btn.disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* 响应式适配，小屏幕自动兼容 */
@media (max-width: 992px) {
    .cart-wrap {
        padding: 25px 20px;
    }
    .cart-item {
        flex-wrap: wrap;
    }
    .item-img {
        width:80px;
        height:80px;
    }
    .cart-bottom-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .bottom-right {
        justify-content: flex-end;
    }
}
</style>

<!-- 主体容器，和案例、帮助中心页面结构完全统一 -->
<section class="section section-bg-light">
    <div class="container">
        <div class="cart-wrap">
            <!-- 面包屑导航 -->
            <div class="position-nav">
                您的位置：{pboot:position separator=>> }
            </div>

            <!-- 购物车容器 -->
            <div id="cartContainer">
                <div class="empty-tip">购物车为空，请添加商品<br>
                    <a href="/product/">前往商城选购</a>
                </div>
            </div>

            <!-- 底部结算区域 -->
            <div class="cart-bottom-bar">
                <div class="check-all">
                    <div class="item-check" id="checkAllBtn" onclick="toggleCheckAll()"></div>
                    <span>全选</span>
                </div>
                <div class="bottom-right">
                    <div class="total-price-text">
                        选中总价：<span class="total-price-num">¥<span id="selectedTotalPrice">0.00</span></span>
                    </div>
                    <div class="order-btn disabled" id="orderBtn" onclick="toOrder()">去下单</div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
let cartList = [];
const CART_KEY = 'cartList';
const ORDER_CREATE_URL = '/order-create/';

// 页面初始化：加载购物车+更新角标+渲染商品
window.onload = function() {
    loadCart();
    renderCart();
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('item-check') && e.target.id !== 'checkAllBtn') {
            updateSelectedTotal();
            updateOrderBtnStatus();
        }
    });
};

// 1. 加载购物车数据
function loadCart() {
    try {
        const localCart = localStorage.getItem(CART_KEY);
        cartList = localCart ? (Array.isArray(JSON.parse(localCart)) ? JSON.parse(localCart) : []) : [];
        cartList = cartList.map(item => ({
            ...item,
            checked: item.checked || false
        }));
        if (!Array.isArray(cartList)) {
            cartList = [];
            localStorage.setItem(CART_KEY, JSON.stringify(cartList));
        }
    } catch (e) {
        cartList = [];
        localStorage.setItem(CART_KEY, JSON.stringify(cartList));
        console.error('加载购物车失败，已重置：', e);
    }
}

// 2. 渲染购物车商品
function renderCart() {
    const container = document.getElementById('cartContainer');
    const selectedTotalEl = document.getElementById('selectedTotalPrice');
    let selectedTotal = 0;

    if (cartList.length === 0) {
        container.innerHTML = `<div class="empty-tip">购物车为空，请添加商品<br><a href="/product/">前往商城选购</a></div>`;
        selectedTotalEl.innerText = '0.00';
        updateOrderBtnStatus();
        return;
    }

    let html = '';
    cartList.forEach(item => {
        const price = parseFloat(item.product_price) || 0;
        const num = parseInt(item.num) || 1;
        if (item.checked) {
            selectedTotal += price * num;
        }

        const productId = String(item.product_id).replace(/'/g, "\\'");
        const size = String(item.size || '').replace(/'/g, "\\'");
        const colour = String(item.colour || '').replace(/'/g, "\\'");
        const checkClass = item.checked ? 'checked' : '';

        html += `
            <div class="cart-item">
                <div class="item-check ${checkClass}" onclick="toggleCheck('${productId}', '${size}', '${colour}')"></div>
                <img src="${item.img || 'images/default.png'}" class="item-img" alt="${item.product_name}">
                <div class="item-main">
                    <div class="item-name">${item.product_name || '未知商品'}</div>
                    <div class="item-spec">规格：${colour || '默认色'} / ${size || '均码'}</div>
                    <div class="item-price">¥${price.toFixed(2)}</div>
                </div>
                <div class="item-num">
                    <div class="num-btn" onclick="changeNum('${productId}', '${size}', '${colour}', -1)">-</div>
                    <input type="text" class="num-input" value="${num}" readonly>
                    <div class="num-btn" onclick="changeNum('${productId}', '${size}', '${colour}', 1)">+</div>
                </div>
                <div class="del-btn" onclick="delItem('${productId}', '${size}', '${colour}')">删除</div>
            </div>
        `;
    });

    container.innerHTML = html;
    selectedTotalEl.innerText = selectedTotal.toFixed(2);
    updateCheckAllStatus();
    updateOrderBtnStatus();
}

// 3. 切换单个商品选中状态
function toggleCheck(productId, size, colour) {
    cartList.forEach(item => {
        if (String(item.product_id) === String(productId) &&
            String(item.size || '') === String(size) &&
            String(item.colour || '') === String(colour)) {
            item.checked = !item.checked;
        }
    });
    localStorage.setItem(CART_KEY, JSON.stringify(cartList));
    renderCart();
}

// 4. 切换全选/取消全选
function toggleCheckAll() {
    const isAllChecked = cartList.every(item => item.checked);
    cartList.forEach(item => {
        item.checked = !isAllChecked;
    });
    localStorage.setItem(CART_KEY, JSON.stringify(cartList));
    renderCart();
}

// 5. 更新全选按钮状态
function updateCheckAllStatus() {
    const checkAllBtn = document.getElementById('checkAllBtn');
    if (cartList.length === 0) {
        checkAllBtn.classList.remove('checked');
        return;
    }
    const isAllChecked = cartList.every(item => item.checked);
    checkAllBtn.classList.toggle('checked', isAllChecked);
}

// 6. 获取选中商品
function getSelectedItems() {
    return cartList.filter(item => item.checked);
}

// 7. 更新选中总价
function updateSelectedTotal() {
    const selectedTotalEl = document.getElementById('selectedTotalPrice');
    const selectedItems = getSelectedItems();
    const selectedTotal = selectedItems.reduce((sum, item) => {
        const price = parseFloat(item.product_price) || 0;
        const num = parseInt(item.num) || 1;
        return sum + price * num;
    }, 0);
    selectedTotalEl.innerText = selectedTotal.toFixed(2);
}

// 8. 更新下单按钮状态
function updateOrderBtnStatus() {
    const orderBtn = document.getElementById('orderBtn');
    const selectedItems = getSelectedItems();
    if (selectedItems.length > 0) {
        orderBtn.classList.remove('disabled');
    } else {
        orderBtn.classList.add('disabled');
    }
}

// 9. 修改数量
function changeNum(productId, size, colour, type) {
    cartList.forEach(item => {
        if (String(item.product_id) === String(productId) &&
            String(item.size || '') === String(size) &&
            String(item.colour || '') === String(colour)) {
            let newNum = item.num + type;
            item.num = newNum < 1 ? 1 : newNum;
        }
    });
    localStorage.setItem(CART_KEY, JSON.stringify(cartList));
    renderCart();
}

// 10. 删除商品
function delItem(productId, size, colour) {
    if (!confirm('确认删除该商品吗？')) return;
    cartList = cartList.filter(item =>
        !(String(item.product_id) === String(productId) &&
            String(item.size || '') === String(size) &&
            String(item.colour || '') === String(colour))
    );
    localStorage.setItem(CART_KEY, JSON.stringify(cartList));
    renderCart();
}

// 11. 删除选中商品（订单页面调用）
function removeSelectedItems() {
    cartList = cartList.filter(item => !item.checked);
    localStorage.setItem(CART_KEY, JSON.stringify(cartList));
    renderCart();
}

// 12. 去下单
function toOrder() {
    const selectedItems = cartList.filter(item => item.checked === true);
    if (selectedItems.length === 0) {
        alert('请先选择要下单的商品！');
        return;
    }
    try {
        sessionStorage.setItem('temp_order_cart', JSON.stringify(selectedItems));
    } catch (e) {
        alert('商品数据存储失败，请清理缓存后重试！');
        console.error('sessionStorage存储失败：', e);
        return;
    }
    window.location.href = ORDER_CREATE_URL;
}

// 全局：商品页面调用【加入购物车】
window.addToCart = function(product) {
    loadCart();
    const isExist = cartList.some(item =>
        item.product_id === product.product_id &&
        String(item.size || '') === String(product.size || '') &&
        String(item.colour || '') === String(product.colour || '')
    );
    if (!isExist) {
        cartList.push({
            product_id: product.product_id,
            product_name: product.product_name,
            product_price: product.product_price,
            img: product.img,
            size: product.size || '',
            colour: product.colour || '',
            num: 1,
            checked: false
        });
        localStorage.setItem(CART_KEY, JSON.stringify(cartList));
        renderCart();
        alert('已加入购物车');
    } else {
        alert('该商品（同尺码/颜色）已在购物车中');
    }
};

window.removeSelectedItems = removeSelectedItems;
</script>

{include file="foot.html"}