<template>
    <view class="p-30rpx rounded-16rpx mb-20rpx bg-white" @click="onCheck(coupon.id)">
        <view class="flex justify-between items-start relative ">
            <view class="w-180rpx h-180rpx">
                <wd-img width="100%" height="100%" :src="coupon.tea_store_group.img"></wd-img>
            </view>
            <view class="flex-1 ml-32rpx line-1" :class="canUse ? '' : 'opacity-40'">
                <view class="text-32rpx text-[#303133] leading-44rpx line-1 w-350rpx">{{ coupon.tea_store_group.title }}</view>
                <view class="text-26rpx text-[#6A6363] leading-36rpx mt-30rpx flex">
                    <view class="line-1">{{ coupon.store_msg.name }}</view>
                    <view class="mx-14rpx">|</view>
                    <view>{{ coupon.tea_store_group.hour }}小时</view>
                </view>
                <!-- <view class="text-24rpx leading-34rpx text-[#909399] mt-16rpx">有效期：2025-01-01至2025-05-05</view> -->
            </view>
            <view>
                <wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup name="GroupCoupon">
    /**
	 * GroupCoupon 团购券组件
	 * @description 展示团购券信息
     */

	const OSS = inject('OSS')
    defineProps<{
        coupon: {
            id: number
            amount: number
            limit: number
            expire: string
            group_id: number
            tea_store_group: {
                img: string
                title: string
                hour: string
            }
            store_msg: {
                name: string
            }
        }
        canUse: boolean
        checked: boolean
        onCheck: (id: number) => void
    }>()
</script>


<script lang="ts">
export default {}
</script>

<style lang="scss" scoped>
</style>
