<route lang="jsonc" type="page">
{
    "needLogin": true,
    "layout": "default",
    "style": {
        "navigationStyle": "custom"
    }
}
</route>

<template>
    <view class="pb-180rpx">
        <view>
			<navbar title="优惠券" custom-class='!bg-[#F6F7F8]'></navbar>
		</view>

        <view>
            <view class="mt-30rpx">
                <!-- 优惠券 -->
                <view class="mx-30rpx">
                    <view class="mx30rpx">
                        <text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用优惠券</text>
                        <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.use.length }}张</text>
                    </view>
                    <view class="mt-28rpx radio">
                        <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
                            <coupon
                                v-for="(item, index) in couponList.use"
                                :key="item.id"
                                :coupon="item"
                                canUse
                                :showChecked="false"
                                :checked="item.id === checkedId"
                                :onCheck="Coupons.handleCheck"
                                couponType="coupon"
                                :class="index !== couponList.use.length - 1 ? 'mb-20rpx' : ''"
                            ></coupon>
                        </wd-radio-group>
                    </view>
                </view>
                <!-- <view class="mx-30rpx">
                    <view class="mx30rpx">
                        <text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用优惠券</text>
                        <text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
                    </view>
                    <view class="mt-28rpx radio">
                        <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
                            <coupon
                                v-for="(item, index) in couponList.no_use"
                                :key="item.id"
                                :coupon="item"
                                :canUse="false"
                                :showChecked="false"
                                couponType="coupon"
                                :checked="item.id === checkedId"
                                :onCheck="Coupons.handleCheck"
                                :class="index !== couponList.no_use.length - 1 ? 'mb-20rpx' : ''"
                            ></coupon>
                        </wd-radio-group>
                    </view>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import Coupon from '@/components/coupon/Coupon.vue'
    import { getMyAvailableCoupon } from '@/api/user'
    import type { IUserCouponListResult } from '@/api/types/user'


    const couponList = ref<IUserCouponListResult>({
        no_use: [],
        use: []
    })

    // 可用优惠券数量
    const useCoupon = ref<number>(0)
    // 不可用优惠券数量
    const unUseCoupon = ref<number>(0)

    const checkedId = ref<number>(0)

    onLoad(async (args) => {
        // 获取到包间ID和预定了几个小时
        await Coupons.handleInitCoupon()
    })

    const Coupons = {
        /**
         * 初始化优惠券列表
         * @param id 包间ID
         * @param numbers 预定时长
         */
        handleInitCoupon: async () => {
            const res = await getMyAvailableCoupon() // 1茶艺师 2茶室 3 个人中心
            console.log("🚀 ~ res:", res)
            useCoupon.value = res.count
            if (res.result.length > 0) {
                couponList.value.use = res.result
            }
        },

        handleCheck: () => {

        }
    }
</script>

<style lang="scss">
    page {
        background-color: $cz-page-background;
    }

    .radio {
        :deep() {
            .wd-radio-group {
                background-color: transparent !important;
            }
        }
    }
</style>
