<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="积分商城" @back="onBack" />
            <view class="bt-page__body">
                <view class="mi-mod-points-hero">
                    <text class="mi-mod-points-hero__label">可用积分</text>
                    <text class="mi-mod-points-hero__value">{{ balance }}</text>
                </view>
                <view class="bt-card">
                    <text class="bt-card__title">兑换商品</text>
                    <view class="mi-mod-rewards">
                        <view
                            v-for="item in rewards"
                            :key="item.id"
                            class="mi-mod-reward"
                            hover-class="mi-tap-card--hover"
                            @tap="redeem(item)"
                        >
                            <image class="mi-mod-reward__icon" :src="item.icon" mode="aspectFit" />
                            <text class="mi-mod-reward__name">{{ item.name }}</text>
                            <text class="mi-mod-reward__cost">{{ item.cost }} 积分</text>
                            <text class="mi-mod-reward__stock">剩余 {{ item.stock }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="redeemRecords.length" class="bt-card">
                    <text class="bt-card__title">兑换记录</text>
                    <view v-for="r in redeemRecords" :key="r.id" class="mi-mod-points-row">
                        <view class="mi-mod-points-row__info">
                            <text class="mi-mod-points-row__title">{{ r.name }}</text>
                            <text class="mi-mod-points-row__time">{{ r.time }}</text>
                        </view>
                        <text class="mi-mod-points-row__amount mi-mod-points-row__amount--spend">-{{ r.cost }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
import { getPointsPageData, redeemPointsReward } from '@/common/memberInfo/moduleStore.js'

export default {
    components: { MemberInfoSubNav },
    data() {
        return { balance: 0, rewards: [], redeemRecords: [] }
    },
    onShow() {
        const data = getPointsPageData(loadMemberStore())
        this.balance = data.balance
        this.rewards = data.rewards
        this.redeemRecords = data.redeemRecords
    },
    methods: {
        onBack() { goBackOrTab(PAGE.POINTS) },
        redeem(item) {
            uni.showModal({
                title: '确认兑换',
                content: `使用 ${item.cost} 积分兑换「${item.name}」？`,
                success: (res) => {
                    if (!res.confirm) return
                    const store = loadMemberStore()
                    const result = redeemPointsReward(store, item.id)
                    uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
                    if (result.ok) {
                        persistMemberStore(store)
                        const data = getPointsPageData(store)
                        this.balance = data.balance
                        this.rewards = data.rewards
                        this.redeemRecords = data.redeemRecords
                    }
                }
            })
        }
    }
}
</script>

<style>
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
@import '@/common/style/memberInfo/pages/module-pages-common.css';
</style>
