<template>
    <view class="recharge-container">
        <view class="header">
            <text class="title">充值积分</text>
            <text class="subtitle">更多积分，享受更多精彩内容</text>
        </view>
        
        <view class="recharge-list">
            <view class="recharge-item" 
                  v-for="(item, index) in rechargeOptions" 
                  :key="index"
                  @click="handleRecharge(item)"
                  :class="{'selected': selectedIndex === index}">
                <view class="item-content">
                    <view class="price-box">
                        <text class="price-symbol">¥</text>
                        <text class="price-value">{{item.price}}</text>
                    </view>
                    <view class="points-box">
                        <view class="main-points">
                            <text class="num">{{item.points}}</text>
                            <text class="unit">积分</text>
                        </view>
                        <view class="bonus">
                            <text class="tag">赠送</text>
                            <text class="num">+{{item.bonus}}</text>
                        </view>
                    </view>
                    <view class="total-box">
                        <text class="label">总计</text>
                        <text class="value">{{item.total}}积分</text>
                    </view>
                    <view class="best-value" v-if="index === 2">
                        <text>超值优惠</text>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="notice">
            <view class="notice-item">
                <text class="dot">·</text>
                <text>充值积分可用于兑换平台内所有资源</text>
            </view>
            <view class="notice-item">
                <text class="dot">·</text>
                <text>充值金额越多，赠送积分越多</text>
            </view>
        </view>
        
        <view class="submit-btn" :class="{'disabled': selectedIndex === -1}" @click="submitRecharge">
            <text v-if="selectedIndex === -1">请选择充值金额</text>
            <text v-else>确认支付 ¥{{rechargeOptions[selectedIndex].price}}</text>
        </view>
    </view>
</template>

<style lang="less" scoped>
.recharge-container {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding: 30rpx;
    
    .header {
        text-align: center;
        margin-bottom: 50rpx;
        padding: 40rpx 0;
        
        .title {
            font-size: 44rpx;
            font-weight: bold;
            display: block;
            margin-bottom: 20rpx;
            color: #333;
        }
        
        .subtitle {
            font-size: 28rpx;
            color: #999;
        }
    }
    
    .recharge-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        margin-bottom: 40rpx;
        
        .recharge-item {
            position: relative;
            border-radius: 16rpx;
            overflow: hidden;
            
            .item-content {
                background: #fff;
                padding: 30rpx;
                height: 100%;
                box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
                border: 2rpx solid #eee;
                transition: all 0.3s;
                
                .price-box {
                    margin-bottom: 20rpx;
                    
                    .price-symbol {
                        font-size: 32rpx;
                        color: #333;
                        font-weight: bold;
                    }
                    
                    .price-value {
                        font-size: 48rpx;
                        color: #333;
                        font-weight: bold;
                        margin-left: 4rpx;
                    }
                }
                
                .points-box {
                    .main-points {
                        margin-bottom: 10rpx;
                        
                        .num {
                            font-size: 32rpx;
                            color: #666;
                            margin-right: 8rpx;
                        }
                        
                        .unit {
                            font-size: 26rpx;
                            color: #666;
                        }
                    }
                    
                    .bonus {
                        .tag {
                            background: #fff1f0;
                            color: #ff4d4f;
                            padding: 2rpx 10rpx;
                            border-radius: 8rpx;
                            font-size: 22rpx;
                            margin-right: 8rpx;
                        }
                        
                        .num {
                            color: #ff4d4f;
                            font-size: 24rpx;
                        }
                    }
                }
                
                .total-box {
                    margin-top: 20rpx;
                    font-size: 24rpx;
                    
                    .label {
                        color: #999;
                        margin-right: 8rpx;
                    }
                    
                    .value {
                        color: #333;
                        font-weight: 500;
                    }
                }
            }
            
            .best-value {
                position: absolute;
                top: 0;
                right: 0;
                background: linear-gradient(135deg, #ff6b6b, #ff8585);
                color: #fff;
                font-size: 22rpx;
                padding: 6rpx 20rpx;
                border-radius: 0 16rpx 0 16rpx;
            }
            
            &.selected {
                .item-content {
                    border-color: #007AFF;
                    background: #f0f7ff;
                    transform: translateY(-2rpx);
                    box-shadow: 0 4rpx 16rpx rgba(0,122,255,0.1);
                }
            }
        }
    }
    
    .notice {
        padding: 30rpx;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 120rpx;
        
        .notice-item {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            font-size: 26rpx;
            color: #666;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            .dot {
                color: #007AFF;
                margin-right: 10rpx;
                font-weight: bold;
            }
        }
    }
    
    .submit-btn {
        position: fixed;
        bottom: 40rpx;
        left: 30rpx;
        right: 30rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background: #007AFF;
        color: #fff;
        border-radius: 45rpx;
        font-size: 32rpx;
        box-shadow: 0 4rpx 16rpx rgba(0,122,255,0.2);
        transition: all 0.3s;
        
        &.disabled {
            background: #ccc;
            box-shadow: none;
        }
    }
}
</style>

<script>
import { createRechargeOrder, updateUserPoints } from "@/api/app/index.js"

export default {
    data() {
        return {
            selectedIndex: -1,
            isIOS: false,
            rechargeOptions: [
				{
				    price: 10,
				    points: 100,
				    bonus: 10,
				    total: 110
				},
				{
				    price: 30,
				    points: 300,
				    bonus: 30,
				    total: 330
				},
                {
                    price: 50,
                    points: 500,
                    bonus: 50,
                    total: 550
                },
                {
                    price: 100,
                    points: 1000,
                    bonus: 100,
                    total: 1100
                },
                {
                    price: 200,
                    points: 2000,
                    bonus: 300,
                    total: 2300
                },
                {
                    price: 300,
                    points: 3000,
                    bonus: 500,
                    total: 3500
                }
            ]
        }
    },
    onLoad() {
        // 检查是否是iOS设备
        const systemInfo = uni.getSystemInfoSync();
        this.isIOS = systemInfo.platform === 'ios';
    },
    methods: {
        handleRecharge(item) {
            this.selectedIndex = this.rechargeOptions.indexOf(item)
        },
        submitRecharge() {
            if(this.selectedIndex === -1) {
                uni.showToast({
                    title: '请选择充值金额',
                    icon: 'none'
                })
                return
            }

            // iOS设备提示
            if(this.isIOS) {
                uni.showModal({
                    title: '提示',
                    content: '由于相关政策限制，iOS设备暂不支持充值功能，请使用安卓设备或Windows电脑进行充值。',
                    showCancel: false,
                    confirmText: '我知道了'
                });
                return;
            }

            const selected = this.rechargeOptions[this.selectedIndex];
            
            uni.showLoading({
                title: '加载中...'
            });

            // 创建充值订单
            const orderData = {
                amount: selected.price,
                points: selected.total,
                userId: uni.getStorageSync('userInfo').userId
            }

            createRechargeOrder(orderData).then(res => {
                uni.hideLoading();
                if(res.code === 200) {
                    // 调起微信支付
                    uni.requestPayment({
                        provider: 'wxpay',
						appId: res.data.appId,
						nonceStr: res.data.nonceStr,
						package: res.data.packageVal,
						signType: res.data.signType,
                        timeStamp: res.data.timeStamp,
                        paySign: res.data.paySign,
                        success: () => {
                            uni.showToast({
                                title: '充值成功',
                                icon: 'success'
                            });
                        },
                        fail: (err) => {
                            console.log('支付失败', err);
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            });
                        }
                    });
                } else {
                    uni.showToast({
                        title: res.msg || '创建订单失败',
                        icon: 'none'
                    });
                }
            }).catch(() => {
                uni.hideLoading();
                uni.showToast({
                    title: '网络请求失败',
                    icon: 'none'
                });
            });
        }
        // handlePaySuccess(points) {
        //     // 更新用户积分
        //     const pointsData = {
        //         userId: uni.getStorageSync('userInfo').userId,
        //         points: points
        //     }
            
        //     updateUserPoints(pointsData).then(res => {
        //         if(res.code === 200) {
        //             uni.showToast({
        //                 title: '充值成功',
        //                 icon: 'success'
        //             });
        //             // 更新本地存储的用户信息
        //             let userInfo = uni.getStorageSync('userInfo');
        //             userInfo.integral = (parseInt(userInfo.integral) || 0) + points;
        //             uni.setStorageSync('userInfo', userInfo);
                    
        //             setTimeout(() => {
        //                 uni.navigateBack();
        //             }, 1500);
        //         } else {
        //             uni.showToast({
        //                 title: res.msg || '更新积分失败',
        //                 icon: 'none'
        //             });
        //         }
        //     });
        // }
    }
}
</script>