<template>
    <view class="coupon__center">
        <z-paging
            auto-show-back-to-top
            ref="paging"
            v-model="couponList"
            @query="queryList"
            :fixed="false"
            height="100%"
        >
            <block v-for="item in couponList" :key="item.id">
                <coupon-card :item="item">
                    <template #manual>
                        <text class="btn__link" @click="handleManualCoupon(item)">立即领取</text>
                    </template>
                    <template #count>
                        <text class="count" v-if="item.alreadyGetCouponCount > 0">
                            已领取{{ item.alreadyGetCouponCount }}张
                        </text>
                    </template>
                </coupon-card>
            </block>
        </z-paging>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useZPaging } from '@/hooks/useCoupon'
import { apiCouponCenterList, apiCouponManualGet } from '@/api/coupon'
import cache from '@/utils/cache'
import { storeToRefs } from 'pinia'
import { DIST_ID } from '@/enums/cacheEnums'
const couponList = ref<any>([])

const config = {
    initParams: {
        distributorId: cache.get(DIST_ID) ?? '' //扫码传
    },
    requestApi: apiCouponCenterList
}
const { queryList, paging } = useZPaging(config.initParams, config.requestApi)

/**立即领取
 * 1、领取张数只有1张：提示+刷新列表
 * 2、领取张数有多张：提示 + 文本（xx）+ 刷新列表
 * 3、领取后刷新列表
 */
const handleManualCoupon = async (row: any) => {
    const { id } = row
    try {
        await apiCouponManualGet({ id })
        uni.$u.toast(`优惠券已放到卡包中`)
        paging.value.reload()
    } catch (error) {}
}
</script>

<style lang="scss" scoped>
.coupon__center {
    height: 100vh;

    .btn__link {
        background-color: $white;
        color: $blue1;
        padding: 8rpx 16rpx;
        font-size: 20rpx;
        border-radius: 999px;
        margin-top: 16rpx;
    }
}
</style>
