<template>
    <view class="page-container">
        <u-navbar title="充值" :autoBack="true" placeholder border></u-navbar>

        <view class="balance-section">
            <view class="card-content">
                <view class="label">当前余额 (元)</view>
                <view class="amount">1999.00</view>
            </view>
            <view class="record-btn">
                <text>余额记录</text>
            </view>
        </view>

        <view class="list-section">
            <view class="section-title">可用卡</view>

            <view class="recharge-item" v-for="(item, index) in cardList" :key="index"
                :class="{ 'active-item': selectedIndex === index }" @click="selectCard(index)">
                <view class="discount-tag">
                    <text>{{ item.tag }}</text>
                </view>

                <view class="item-body">
                    <view class="left-info">
                        <view class="activity-name">{{ item.name }}</view>
                        <view class="rule-list">
                            <view class="rule-text" v-for="(rule, rIndex) in item.rules" :key="rIndex">
                                {{ rule }}
                            </view>
                        </view>
                    </view>

                    <view class="right-price">
                        <text class="symbol">¥</text>
                        <text class="num">{{ item.price }}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="footer-bar">
            <u-button :text="`同意并支付 ¥${currentPrice}`" shape="circle"
                customStyle="height: 76rpx; font-size: 36rpx; color: #fff; background: var(--theme-color-gradient);" 
                @click="handlePay"
            ></u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            selectedIndex: 0, // 默认选中第一个
            cardList: [
                {
                    id: 1,
                    tag: '享9.3折优惠',
                    name: '活动名称',
                    price: '1000',
                    rules: [
                        '1.1张面值为1000元的9.3折会员权益',
                        '2.不记名，不挂失，不计息，不支持回兑',
                        '3.卡使用有效期一年，购卡如有疑问可联系客服'
                    ]
                },
                {
                    id: 2,
                    tag: '享9.0折优惠',
                    name: '活动名称',
                    price: '3000',
                    rules: [
                        '1.1张面值为3000元的9.0折会员权益',
                        '2.不记名，不挂失，不计息，不支持回兑',
                        '3.卡使用有效期一年，购卡如有疑问可联系客服'
                    ]
                },
                {
                    id: 3,
                    tag: '享8.7折优惠',
                    name: '活动名称',
                    price: '5000',
                    rules: [
                        '1.1张面值为5000元的8.7折会员权益',
                        '2.不记名，不挂失，不计息，不支持回兑',
                        '3.卡使用有效期一年，购卡如有疑问可联系客服'
                    ]
                }
            ]
        };
    },
    computed: {
        currentPrice() {
            return this.cardList[this.selectedIndex].price;
        }
    },
    methods: {
        selectCard(index) {
            this.selectedIndex = index;
        },
        handlePay() {
            uni.showToast({
                title: `发起支付 ${this.currentPrice}元`,
                icon: 'none'
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    padding: 30rpx;
    padding-bottom: 120rpx; 
    background-color: #fff;

    .balance-section {
        color: #fff;
        border-radius: 24rpx;
        padding: 40rpx 30rpx;
        margin-bottom: 32rpx;
        position: relative;
        box-shadow: 0 8rpx 20rpx rgba(0, 224, 181, 0.2);
        background: linear-gradient(131deg, #35DCCE 0%, #2BF8CB 100%);

        .label {
            font-size: 32rpx;
            margin-bottom: 20rpx;
        }

        .amount {
            font-size: 56rpx;
            font-weight: bold;
        }

        .record-btn {
            font-size: 28rpx;
            padding: 10rpx 24rpx;
            background: #2DC5B3;
            border-radius: 26rpx 0rpx 0rpx 26rpx;
            position: absolute;
            bottom: 50rpx;
            right: 0;
        }
    }

    .list-section {
        .section-title {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 30rpx;
        }
    }
}

.recharge-item {
    padding: 40rpx 30rpx 30rpx; 
    margin-bottom: 20rpx;
    position: relative;
    background-color: #fcfefe; 
    border: 4rpx solid #e0fbf7; 
    border-radius: 16rpx;
    transition: all 0.2s;
    overflow: hidden;

    &.active-item {
        border-color: #1BD6CD;
        background-color: #f0fdfa;
        box-shadow: 0 0 10rpx rgba(0, 224, 181, 0.1);
    }

    .discount-tag {
        color: #fff;
        font-size: 22rpx;
        padding: 6rpx 20rpx;
        border-bottom-right-radius: 20rpx;
        background-color: #00e0b5;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
    }

    .item-body {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-info {
            flex: 1;
            margin-right: 20rpx;

            .activity-name {
                font-size: 30rpx;
                font-weight: bold;
                color: #00e0b5;
                margin: 16rpx 0 10rpx; 
            }

            .rule-list {
                .rule-text {
                    font-size: 20rpx;
                    color: #17cbb3; 
                    line-height: 1.5;
                    margin-bottom: 4rpx;
                }
            }
        }

        .right-price {
            color: #00e0b5;
            text-align: right;

            .symbol {
                font-size: 40rpx;
                font-weight: 500;
            }

            .num {
                font-size: 60rpx;
                font-weight: 500;
                font-family: fantasy;
                line-height: 1;
            }
        }
    }
}
</style>