<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="我的优惠券" @back="goBack" />
            <view class="mi-mod-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    class="bt-tab"
                    :class="{ 'bt-tab--active': activeTab === tab.key }"
                    hover-class="mi-tap-tab--hover"
                    :hover-stay-time="150"
                    @tap="activeTab = tab.key"
                >
                    <text class="bt-tab__text">{{ tab.label }}({{ countByTab[tab.key] }})</text>
                </view>
            </view>
            <view class="bt-page__action-bar bt-page__action-bar--end">
                <text
                    class="bt-page__action-link bt-page__action-link--primary"
                    hover-class="mi-tap--hover"
                    :hover-stay-time="150"
                    @tap="goCenter"
                >
                    领券中心
                </text>
            </view>
            <view class="bt-page__body">
                <view
                    v-for="item in displayedCoupons"
                    :key="item.id"
                    class="mi-mod-coupon"
                    :class="'mi-mod-coupon--' + item.status"
                    hover-class="mi-tap-card--hover"
                    :hover-stay-time="150"
                    @tap="onCouponTap(item)"
                >
                    <view class="mi-mod-coupon__left">
                        <text class="mi-mod-coupon__amount">¥{{ item.amount }}</text>
                        <text class="mi-mod-coupon__min">满{{ item.minSpend }}可用</text>
                    </view>
                    <view class="mi-mod-coupon__right">
                        <text class="mi-mod-coupon__title">{{ item.title }}</text>
                        <text class="mi-mod-coupon__desc">{{ item.desc }}</text>
                        <text class="mi-mod-coupon__expire">
                            {{ item.status === 'used' ? `已于 ${item.usedAt} 使用` : `有效期至 ${item.expire}` }}
                        </text>
                        <view v-if="item.status === 'available'" class="mi-mod-coupon__use" @tap.stop="useNow(item)">
                            <text>立即使用</text>
                        </view>
                        <view v-if="item.status === 'expired'" class="mi-mod-coupon__del" @tap.stop="removeExpired(item)">
                            <text>删除</text>
                        </view>
                    </view>
                </view>
                <view v-if="!displayedCoupons.length" class="bt-empty">
                    <text class="bt-empty__text">暂无{{ activeTabLabel }}优惠券</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { moduleMock, getCouponsByStatus, useCoupon, deleteExpiredCoupon } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'

export default {
    components: { MemberInfoSubNav },
    mixins: [subPageMixin],
    data() {
        return {
            tabs: moduleMock.couponTabs,
            activeTab: 'available',
            coupons: []
        }
    },
    computed: {
        displayedCoupons() {
            return this.coupons.filter((c) => c.status === this.activeTab)
        },
        countByTab() {
            return {
                available: this.coupons.filter((c) => c.status === 'available').length,
                used: this.coupons.filter((c) => c.status === 'used').length,
                expired: this.coupons.filter((c) => c.status === 'expired').length
            }
        },
        activeTabLabel() {
            return this.tabs.find((t) => t.key === this.activeTab)?.label || ''
        }
    },
    onShow() {
        this.refreshList()
    },
    methods: {
        refreshList() {
            const store = loadMemberStore()
            this.coupons = [
                ...getCouponsByStatus(store, 'available'),
                ...getCouponsByStatus(store, 'used'),
                ...getCouponsByStatus(store, 'expired')
            ]
        },
        onCouponTap(item) {
            navigateToPage(`${PAGE.COUPON_DETAIL}?id=${item.id}`)
        },
        useNow(item) {
            uni.showModal({
                title: '使用优惠券',
                content: `确认使用「${item.title}」？`,
                success: (res) => {
                    if (!res.confirm) return
                    const store = loadMemberStore()
                    useCoupon(store, item.id)
                    persistMemberStore(store)
                    this.refreshList()
                    navigateToPage(PAGE.COURSE_LIST)
                }
            })
        },
        removeExpired(item) {
            const store = loadMemberStore()
            deleteExpiredCoupon(store, item.id)
            persistMemberStore(store)
            this.refreshList()
        },
        goCenter() {
            navigateToPage(PAGE.COUPON_CENTER)
        }
    }
}
</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';

.mi-mod-coupon__use {
    margin-top: 8px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
}

.mi-mod-coupon__use text {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.mi-mod-coupon__del {
    margin-top: 8px;
}

.mi-mod-coupon__del text {
    font-size: 11px;
    color: var(--text-light, #8A99B4);
}
</style>
