<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="积分明细" @back="onBack" />
            <view class="mi-mod-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    class="bt-tab"
                    :class="{ 'bt-tab--active': filter === tab.key }"
                    @tap="filter = tab.key"
                >
                    <text class="bt-tab__text">{{ tab.label }}</text>
                </view>
            </view>
            <view class="bt-page__body">
                <view
                    v-for="item in list"
                    :key="item.id"
                    class="mi-mod-points-row"
                >
                    <view class="mi-mod-points-row__info">
                        <text class="mi-mod-points-row__title">{{ item.title }}</text>
                        <text class="mi-mod-points-row__time">{{ item.time }}</text>
                    </view>
                    <view class="mi-mod-points-row__right">
                        <text
                            class="mi-mod-points-row__amount"
                            :class="item.amount > 0 ? 'mi-mod-points-row__amount--earn' : 'mi-mod-points-row__amount--spend'"
                        >
                            {{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
                        </text>
                        <text class="mi-mod-points-row__balance">余额 {{ item.balance }}</text>
                    </view>
                </view>
                <view v-if="!list.length" class="bt-empty">
                    <text class="bt-empty__text">暂无明细</text>
                </view>
            </view>
        </view>
    </view>
</template>

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

export default {
    components: { MemberInfoSubNav },
    data() {
        return {
            filter: 'all',
            tabs: [
                { key: 'all', label: '全部' },
                { key: 'earn', label: '获取' },
                { key: 'spend', label: '消耗' }
            ],
            list: []
        }
    },
    watch: {
        filter() { this.loadList() }
    },
    onShow() { this.loadList() },
    methods: {
        onBack() { goBackOrTab(PAGE.POINTS) },
        loadList() {
            const store = loadMemberStore()
            this.list = filterPointsHistory(store, this.filter)
        }
    }
}
</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>
