<template>
    <div class="gift-box">
        <!-- 页面标题 -->
        <div class="header">
            <h1 class="title">
                <el-icon class="title-icon"><Star /></el-icon>
                我的礼物盒
            </h1>
        </div>

        <!-- 礼物网格 -->
        <div class="gifts-grid">
            <div 
                v-for="gift in gifts" 
                :key="gift.id"
                class="gift-card"
                :class="{ 'special': gift.isSpecial }"
            >
                <!-- 特价标签 -->
                <div v-if="gift.isSpecial" class="special-tag">特</div>
                
                <!-- 礼物图标 -->
                <div class="gift-icon">
                    <span class="emoji">{{ gift.emoji }}</span>
                </div>
                
                <!-- 礼物名称 -->
                <div class="gift-name">{{ gift.name }}</div>
                
                <!-- 价格 -->
                <div class="gift-price">{{ gift.price }} 豆豆</div>
                
                <!-- 购买按钮 -->
                <el-button 
                    type="primary" 
                    size="small"
                    @click="buyGift(gift)"
                    :disabled="gift.price > userBeans"
                >
                    购买
                </el-button>
            </div>
        </div>

        <!-- 加载更多 -->
        <div class="load-more">
            <div class="divider">
                <el-icon class="divider-icon"><MoreFilled /></el-icon>
            </div>
            <p class="no-more-text">没有更多啦～</p>
        </div>
    </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useMainStore } from '@/store';
import { MoreFilled, Star } from '@element-plus/icons-vue';

export default {
    name: 'GiftBox',
    components: {
        MoreFilled,
        Star
    },
    setup() {
        const store = useMainStore();
        
        // 用户豆豆余额
        const userBeans = computed(() => store.user?.beanCount || 9999);

        // 礼物列表数据
        const gifts = reactive([
            // 第一行
            { id: 1, name: '小星星', price: 5, emoji: '💖', isSpecial: true },
            { id: 2, name: '爱你哦', price: 10, emoji: '💋', isSpecial: true },
            { id: 3, name: '加油鸭', price: 15, emoji: '🍊', isSpecial: true },
            { id: 4, name: '蓝色烟火', price: 20, emoji: '🎆', isSpecial: true },
            { id: 5, name: '西瓜', price: 10, emoji: '🍉', isSpecial: true },
            { id: 6, name: '冰棍', price: 8, emoji: '🍭', isSpecial: true },
            
            // 第二行
            { id: 7, name: '沙滩椅', price: 15, emoji: '🏖️', isSpecial: true },
            { id: 8, name: '菠萝汽水', price: 30, emoji: '🍍', isSpecial: true },
            { id: 9, name: '椰子水', price: 40, emoji: '🥥' },
            { id: 10, name: '汽水', price: 20, emoji: '🥤' },
            { id: 11, name: '咖啡', price: 60, emoji: '☕', isSpecial: true },
            { id: 12, name: '早餐套餐', price: 88, emoji: '🍳', isSpecial: true },
            
            // 第三行
            { id: 13, name: '花花', price: 188, emoji: '💜', isSpecial: true },
            { id: 14, name: '玫瑰', price: 199, emoji: '🌹', isSpecial: true },
            { id: 15, name: '玫瑰花', price: 399, emoji: '🌹', isSpecial: true },
            { id: 16, name: '玫瑰礼盒', price: 599, emoji: '🎁' },
            { id: 17, name: '礼花', price: 589, emoji: '🎊' },
            { id: 18, name: '灿烂辉煌', price: 699, emoji: '🎇', isSpecial: true },
            
            // 第四行
            { id: 19, name: '紫色星空', price: 766, emoji: '🌌', isSpecial: true },
            { id: 20, name: '跑车', price: 799, emoji: '🏎️' },
            { id: 21, name: '直升机', price: 899, emoji: '🚁' },
            { id: 22, name: '游艇', price: 966, emoji: '🛥️' },
            { id: 23, name: '黄金直升机', price: 999, emoji: '🚁' }
        ]);

        // 购买礼物
        const buyGift = async (gift) => {
            if (gift.price > userBeans.value) {
                ElMessage.error('豆豆余额不足，请先充值！');
                return;
            }

            try {
                await ElMessageBox.confirm(
                    `确定要购买 ${gift.name} 吗？将花费 ${gift.price} 豆豆`,
                    '确认购买',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                );

                // 模拟购买API调用
                await new Promise(resolve => setTimeout(resolve, 500));
                
                // 扣除豆豆
                if (store.updateUserBeans) {
                    store.updateUserBeans(userBeans.value - gift.price);
                }
                
                ElMessage.success(`成功购买 ${gift.name}！`);
                
            } catch {
                // 用户取消购买
            }
        };

        onMounted(() => {
            console.log('礼物盒页面已加载');
        });

        return {
            gifts,
            userBeans,
            buyGift
        };
    }
};
</script>

<style lang="scss" scoped>
.gift-box {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;

    .header {
        margin-bottom: 32px;
        padding-bottom: 16px;
        border-bottom: 1px solid #ebeef5;

        .title {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 600;
            color: #0A2463;
            margin: 0;

            .title-icon {
                margin-right: 8px;
                font-size: 28px;
            }
        }
    }

    .gifts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
        margin-bottom: 40px;

        .gift-card {
            background: #fff;
            border: 1px solid #e4e7ed;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

            &:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            &.special {
                background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
                border-color: #ffa726;
            }

            .special-tag {
                position: absolute;
                top: -1px;
                right: -1px;
                background: #ff6b35;
                color: white;
                font-size: 12px;
                font-weight: bold;
                width: 24px;
                height: 24px;
                border-radius: 50% 0 12px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
            }

            .gift-icon {
                font-size: 48px;
                margin-bottom: 12px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;

                .emoji {
                    font-size: 48px;
                    line-height: 1;
                }
            }

            .gift-name {
                font-size: 16px;
                font-weight: 600;
                color: #303133;
                margin-bottom: 8px;
            }

            .gift-price {
                font-size: 14px;
                color: #ffa726;
                font-weight: 600;
                margin-bottom: 12px;
            }

            .el-button {
                width: 100%;
                background-color: #0A2463;
                border-color: #0A2463;

                &:hover {
                    background-color: #083354;
                    border-color: #083354;
                }

                &:disabled {
                    background-color: #c0c4cc;
                    border-color: #c0c4cc;
                    color: #a8abb2;
                }
            }
        }
    }

    .load-more {
        text-align: center;
        padding: 20px 0;

        .divider {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;

            &::before,
            &::after {
                content: '';
                flex: 1;
                height: 1px;
                background: linear-gradient(to right, transparent, #ddd, transparent);
                margin: 0 20px;
            }

            .divider-icon {
                color: #ffa726;
                font-size: 20px;
                transform: rotate(90deg);
            }
        }

        .no-more-text {
            color: #999;
            font-size: 14px;
            margin: 0;
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .gift-box {
        padding: 16px;

        .gifts-grid {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 16px;

            .gift-card {
                padding: 16px;

                .gift-icon {
                    font-size: 36px;
                    height: 50px;

                    .emoji {
                        font-size: 36px;
                    }
                }

                .gift-name {
                    font-size: 14px;
                }

                .gift-price {
                    font-size: 13px;
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .gift-box {
        .gifts-grid {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;

            .gift-card {
                padding: 12px;

                .gift-icon {
                    font-size: 32px;
                    height: 40px;

                    .emoji {
                        font-size: 32px;
                    }
                }

                .gift-name {
                    font-size: 13px;
                }

                .gift-price {
                    font-size: 12px;
                }
            }
        }
    }
}
</style> 