<template>
    <z-paging
        auto-show-back-to-top
        ref="paging"
        v-model="dataList"
        @query="queryList"
        :fixed="false"
        height="100%"
    >
        <block v-for="item in dataList" :key="item.id">
            <coupon-card :item="item">
                <template #use="{ row }">
                    <view class="btn__link" v-if="condition">
                        <text @click.stop="handleNavigate(row)">立即使用</text>
                    </view>
                </template>
                <template v-slot:status>
                    <view class="btn__link" v-if="!condition">
                        <text>{{ parseText }}</text>
                    </view>
                </template>
                <template #count>
                    <text class="count" v-if="item.getNum > 1">
                        已领取{{ item.alreadyGetCouponCount }}张
                    </text>
                </template>
                <template #expiringSoon>
                    <div class="expiring-soon" v-if="showExpiringSoon(item!)">快失效</div>
                </template>
            </coupon-card>
        </block>
    </z-paging>
</template>

<script lang="ts" setup>
import { ref, inject, computed, unref, watch } from 'vue'
import { useZPaging } from '@/hooks/useCoupon'
import { COUPON_INJECTION_KEY } from '@/config/symbol'
import { apiMyCouponList } from '@/api/coupon'
import {
    CouponEnum,
    CouponStatusMap,
    NavigateMap,
    UseGoodsTypeEnum,
    CouponStatusEnum,
    showExpiringSoonDays
} from '@/enums/appEnums'
import { router } from '@/utils/util'

const parent = inject(COUPON_INJECTION_KEY)

const dataList = ref<any>([])

const tabStatus = computed(() => parent?.tabStatus.value) as any
const condition = computed(() => unref(tabStatus) === CouponEnum.NO_APPLY)
const parseText = computed(() => CouponStatusMap[unref(tabStatus)])
const showExpiringSoon = computed(() => {
    return (row: any) => {
        const { useTimeEnd, useStatus } = row
        const currentTime = new Date().getTime()
        const endTime = Date.parse(useTimeEnd)
        const daysDifference = Math.abs(endTime - currentTime) / (60 * 60 * 24 * 1000)
        return daysDifference <= showExpiringSoonDays && useStatus == CouponStatusEnum.AVALIABLE
    }
})

/**优惠券列表参数 */
const config = {
    initParams: {
        useStatus: unref(tabStatus)
    },
    requestApi: apiMyCouponList
}

const { paging, queryList, refresh } = useZPaging(config.initParams, config.requestApi!)

/**
 * 1、通用券：跳转到首页
 * 2、品类券：对应品类页面
 * 3、商品券：对应商品页面
 */
const handleNavigate = (row: any) => {
    const { useGoodsType } = row
    const url = NavigateMap[useGoodsType]
    router(joinUrl(url, row))
}

watch(
    () => unref(tabStatus),
    () => {
        const params = { useStatus: unref(tabStatus) }
        refresh({ ...params })
    }
)

function joinUrl(url: string, row: any) {
    const { useGoodsType, id } = row
    let params = ''
    params = useGoodsType === UseGoodsTypeEnum.ALL ? '' : `?id=${id}`
    return url + params
}
</script>

<style lang="scss" scoped>
.btn__link {
    background-color: $white;
    color: $blue1;
    padding: 6rpx 16rpx;
    font-size: 20rpx;
    border-radius: 999px;
    margin-top: 16rpx;
}

.status {
    position: absolute;
    top: 6rpx;
    right: -78rpx;
    padding: 10rpx 80rpx;
    background-color: $gray1;
    color: $white;
    transform: rotate(45deg);
    font-size: 24rpx;
}
.expiring-soon {
    position: absolute;
    background: #d83d3b;
    width: 162rpx;
    height: 32rpx;
    rotate: 26deg;
    top: -4px;
    right: -11px;
    font-size: 19rpx;
    line-height: 32rpx;
    padding-left: 53rpx;
}
</style>
