<template>
    <view class="scroll-container theme-light">
        <view class="recharge-page">
            <MemberInfoSubNav title="储值卡充值" @back="goBack" />
            <view class="recharge-page__body">
                <!-- 当前余额 -->
                <view class="rc-balance-card">
                    <view class="rc-balance-card__inner">
                        <text class="rc-balance-card__label">当前余额</text>
                        <view class="rc-balance-card__amount">
                            <text class="rc-balance-card__symbol">¥</text>
                            <text class="rc-balance-card__num">{{ currentBalance }}</text>
                        </view>
                        <text class="rc-balance-card__card-name">{{ currentCardName }}</text>
                    </view>
                </view>

                <!-- 充值档位 -->
                <view class="rc-section">
                    <text class="rc-section__title">选择充值金额</text>
                    <view class="rc-grid">
                        <view
                            v-for="(item, index) in rechargeOptions"
                            :key="index"
                            class="rc-grid-item"
                            :class="{ 'rc-grid-item--selected': selectedIndex === index }"
                            @tap="selectRecharge(index)"
                        >
                            <view class="rc-grid-item__top">
                                <text class="rc-grid-item__amount">¥{{ item.amount }}</text>
                            </view>
                            <view class="rc-grid-item__bottom">
                                <text class="rc-grid-item__bonus">赠¥{{ item.bonus }}</text>
                            </view>
                            <view class="rc-grid-item__check" v-if="selectedIndex === index">
                                <text>✓</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 充值说明 -->
                <view class="rc-rules">
                    <text class="rc-rules__title">充值说明</text>
                    <view class="rc-rules__list">
                        <view class="rc-rules__item">
                            <text>1. 充值金额实时到账，赠送金额同步到账</text>
                        </view>
                        <view class="rc-rules__item">
                            <text>2. 余额可用于购买会员卡、消费等</text>
                        </view>
                        <view class="rc-rules__item">
                            <text>3. 充值金额一经到账，不予退还</text>
                        </view>
                    </view>
                </view>

                <!-- 底部按钮 -->
                <view class="rc-bottom">
                    <view class="rc-bottom__info">
                        <text class="rc-bottom__label">实付金额</text>
                        <view class="rc-bottom__amount">
                            <text class="rc-bottom__symbol">¥</text>
                            <text class="rc-bottom__num">{{ selectedAmount }}</text>
                        </view>
                    </view>
                    <view
                        class="rc-bottom__btn"
                        :class="{ 'rc-bottom__btn--disabled': loading }"
                        @tap="handleRecharge"
                    >
                        <text>{{ loading ? '处理中...' : '立即充值' }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { getMemberId } from '@/utils/request.js'
import { checkPayPasswordSet, getStoredCardInfo } from '@/api/main.js'
import { navigateToPage, PAGE } from '@/common/constants/routes.js'

const currentBalance = ref('0.00')
const selectedIndex = ref(0)
const loading = ref(false)

const rechargeOptions = ref([
    { amount: 100, bonus: 10, payAmount: 100 },
    { amount: 200, bonus: 20, payAmount: 200 },
    { amount: 300, bonus: 30, payAmount: 300 }
])

const selectedAmount = computed(() => {
    return rechargeOptions.value[selectedIndex.value]?.payAmount || 0
})

onLoad(() => {
    loadBalance()
})

async function loadBalance() {
    const memberId = getMemberId()
    if (!memberId) return

    try {
        const res = await getStoredCardInfo(memberId)
		const data = res.data || res
		currentBalance.value = ((data.balance || 0).toFixed(2))
    } catch (e) {
        console.error('获取储值卡余额失败:', e)
    }
}

function selectRecharge(index) {
    selectedIndex.value = index
}

async function handleRecharge() {
    if (loading.value) return

    const memberId = getMemberId()

    if (!memberId) {
        uni.showToast({ title: '用户未登录', icon: 'none' })
        return
    }

    // 检查支付密码
    uni.showLoading({ title: '检查中...' })
    try {
        const checkRes = await checkPayPasswordSet(memberId)
        uni.hideLoading()

        const isSet = checkRes.isSet || checkRes.data?.isSet || false

        if (!isSet) {
            uni.showModal({
                title: '提示',
                content: '您尚未设置支付密码，请先设置支付密码后再进行充值',
                confirmText: '去设置',
                success: (res) => {
                    if (res.confirm) {
                        navigateToPage(PAGE.SET_PAY_PASSWORD)
                    }
                }
            })
            return
        }

        // 确认充值
        const option = rechargeOptions.value[selectedIndex.value]
        uni.showModal({
            title: '确认充值',
            content: `确认充值 ${option.amount} 元？\n到账金额：${option.amount + option.bonus} 元\n（含赠送 ${option.bonus} 元）`,
            confirmText: '确认充值',
            success: async (res) => {
                if (res.confirm) {
                    await initiatePayment(option)
                }
            }
        })
    } catch (e) {
        uni.hideLoading()
        console.error('检查支付密码失败:', e)
        uni.showToast({ title: '检查失败，请稍后重试', icon: 'none' })
    }
}

async function initiatePayment(option) {
    const amount = option.payAmount
    const desc = `储值卡充值：充${option.amount}得${option.amount + option.bonus}`
    const remark = `rechargeAmount=${option.amount}&bonus=${option.bonus}`

    uni.navigateTo({
        url: `/pages/memberInfo/confirmPayment?orderType=STORED_CARD_RECHARGE&amount=${amount}&desc=${encodeURIComponent(desc)}&remark=${encodeURIComponent(remark)}&returnPage=memberCard&cardType=stored`,
        fail: (err) => {
            console.error('跳转支付页面失败:', err)
            uni.showToast({ title: '跳转支付页面失败', icon: 'none' })
        }
    })
}

function goBack() {
    uni.navigateBack()
}
</script>

<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';

.recharge-page {
    min-height: 100vh;
    background: #F5F7FA;
    padding-bottom: 100px;
}

.recharge-page__body {
    padding: 16px;
}

.rc-balance-card {
    margin-bottom: 20px;
}

.rc-balance-card__inner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    color: #FFFFFF;
}

.rc-balance-card__label {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 8px;
    display: block;
}

.rc-balance-card__amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 8px;
}

.rc-balance-card__symbol {
    font-size: 18px;
    font-weight: 600;
    margin-right: 4px;
}

.rc-balance-card__num {
    font-size: 36px;
    font-weight: 700;
}

.rc-balance-card__card-name {
    font-size: 13px;
    opacity: 0.9;
}

.rc-section {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.rc-section__title {
    font-size: 15px;
    font-weight: 600;
    color: #1A202C;
    margin-bottom: 16px;
    display: block;
}

.rc-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rc-grid-item {
    width: calc(33.33% - 8px);
    background: #F7FAFC;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    position: relative;
    transition: all 0.2s;

    &--selected {
        background: #F0F4FF;
        border-color: #1677FF;
    }
}

.rc-grid-item__top {
    margin-bottom: 4px;
}

.rc-grid-item__amount {
    font-size: 20px;
    font-weight: 700;
    color: #1A202C;
}

.rc-grid-item__bottom {
    margin-bottom: 0;
}

.rc-grid-item__bonus {
    font-size: 12px;
    color: #E53E3E;
    font-weight: 500;
}

.rc-grid-item__check {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    background: #1677FF;
    border-radius: 0 10px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    text {
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
    }
}

.rc-rules {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
}

.rc-rules__title {
    font-size: 14px;
    font-weight: 600;
    color: #1A202C;
    margin-bottom: 12px;
    display: block;
}

.rc-rules__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-rules__item {
    font-size: 13px;
    color: #718096;
    line-height: 1.5;
}

.rc-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.rc-bottom__info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rc-bottom__label {
    font-size: 13px;
    color: #718096;
}

.rc-bottom__amount {
    display: flex;
    align-items: baseline;
}

.rc-bottom__symbol {
    font-size: 14px;
    font-weight: 600;
    color: #E53E3E;
    margin-right: 2px;
}

.rc-bottom__num {
    font-size: 24px;
    font-weight: 700;
    color: #E53E3E;
}

.rc-bottom__btn {
    padding: 12px 32px;
    background: #1677FF;
    border-radius: 24px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;

    &--disabled {
        opacity: 0.6;
    }
}
</style>
