<template>
    <u-popup v-model="show" mode="bottom" border-radius="30" :closeable="true" @close="close">
        <view class="box">
            <view class="cheap">优惠</view>
            <view
                class="flex justify-center items-center text-[#A1A1A1] h-full"
                v-if="userCoupon?.length == 0 && waituselists?.length == 0"
            >
                暂无可用优惠券</view
            >
            <z-paging
                ref="paging"
                v-model="state"
                @query="upCallback"
                :fixed="false"
                height="100%"
                v-else
            >
                <view v-if="userCoupon?.length !== 0"
                    >已领取优惠券（共{{ userCoupon?.length }}张）</view
                >

                <!-- <view class="flex mt-[20rpx]" v-for="(item, index) in 3" :key="index"> -->
                <cheap-card v-for="item in userCoupon" :key="item.id" :item="item">
                    <template #btn>
                        <button class="use-btn" @click="toUse">去使用</button>
                    </template>
                </cheap-card>

                <view class="mt-[20rpx]" v-if="waituselists?.length !== 0"
                    >待领取优惠券（共{{ waituselists?.length }}张）</view
                >
                <cheap-card v-for="item in waituselists" :key="item.id" :item="item">
                    <template #btn>
                        <button class="take-btn" @click="toTake">立即领取</button>
                    </template>
                </cheap-card>
            </z-paging>
        </view>
    </u-popup>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
// import { apiUserCouponList } from '@/api/coupon'
const show = ref(false)
const state = ref({})
const upCallback = () => {
    console.log(111)
}
const props = defineProps({
    couponlists: {
        type: Array<any>
    },
    good_id: {
        type: Number
    }
})
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}
defineExpose({ open })
const waituselists = computed(() => {
    return props.couponlists?.filter((item) => {
        return item.btn == 1 || item.btn == 2
    })
})
const userCoupon = ref([])
// const getCouponLists = async () => {
//     const { lists } = await apiUserCouponList({ goods_id: props.good_id, status: 1 })
//     userCoupon.value = lists
// }
// getCouponLists()
const toUse = () => {
    uni.navigateTo({
        url: '/pages/index/index'
    })
    close()
}
const toTake = () => {
    uni.navigateTo({
        url: '/bundle/pages/receive_coupon/receive_coupon'
    })
    close()
}
</script>
<style lang="scss" scope>
.box {
    height: 70vh;
    padding: 30rpx;
    background-color: #f7f7f7;
    padding-top: 100rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .cheap {
        color: rgba(0, 0, 0, 1);
        font-weight: bold;
        position: fixed;
        left: 50%;
        transform: translate(-50%);
        top: 32rpx;
    }
    .use-btn {
        border-radius: 40rpx;
        background-color: rgba(255, 215, 0, 1);
        width: 130rpx;
        height: 56rpx;
        font-size: 22rpx;
        line-height: 56rpx;
        margin: 0;
    }
    .take-btn {
        border-radius: 40rpx;
        background-color: rgba(255, 0, 0, 1);
        color: rgba(255, 255, 255, 1);
        height: 56rpx;
        font-size: 22rpx;
        line-height: 56rpx;
        margin: 0;
    }
}
</style>
