<template>
    <u-popup v-model="show" mode="bottom" border-radius="30" :closeable="true" @close="close">
        <view class="coupons">
            <view class="coupons-header">
                <text class="mx-auto">{{ title }}</text>
                <u-icon name="close" color="#666666" @tap="show = false" />
            </view>

            <view class="coupons-main">
                <scroll-view :scroll-y="true" style="height: 800rpx; touch-action: none">
                    <slot name="couponDescOne"></slot>
                    <view
                        class="coupons-item"
                        v-for="item in [1, 2, 3, 2, 3, 2, 3, 2, 3]"
                        :key="item"
                    >
                        <coupon-card :item="item" :showBtn="false" />
                    </view>
                    <slot name="couponDescTwo"></slot>
                    <view v-for="item in [1, 2, 3, 2, 3, 2, 3, 2, 3]" :key="item">
                        <coupon-card :item="item" :showBtn="false" :status="0" />
                    </view>
                    <u-empty
                        v-if="![1, 2, 3].length"
                        text="暂无优惠券"
                        src="/static/images/empty/coupon_icon.png"
                        :icon-size="180"
                    />
                </scroll-view>
            </view>
        </view>
    </u-popup>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'

const show = ref(false)
const props = withDefaults(
    defineProps<{
        item: any
        title?: string
    }>(),
    {
        title: '优惠'
    }
)

const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}
const toUse = () => {
    uni.navigateTo({
        url: '/pages/index/index'
    })
    close()
}
const toTake = () => {
    uni.navigateTo({
        url: '/bundle/pages/receive_coupon/receive_coupon'
    })
    close()
}
defineExpose({ open })
</script>
<style lang="scss" scope>
.coupons {
    background-color: #f6f6f6;

    &-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        padding: 0 30rpx;
        font-weight: 500;
        font-size: 28rpx;
        background-color: #ffffff;
    }

    &-main {
        padding: 20rpx;

        .coupons-item {
            &:nth-child(n + 2) {
                margin-top: 20rpx;
            }
        }
    }
}
</style>
