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

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

        <view>
            <view class="mt-30rpx">
               <view v-if="couponType == 1">
                    <!-- 优惠券 -->
                    <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
                                    :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 v-if="couponType == 2">
                    <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">{{ groupCouponList.length }}张</text>
                        </view>
                        <view class="mt-28rpx radio">
                            <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
                                <group-coupon
                                    v-for="(item, index) in groupCouponList"
                                    :key="item.id"
                                    :coupon="item"
                                    canUse
                                    couponType="groupCoupon"
                                    :checked="item.id === checkedId"
                                    :onCheck="Coupons.handleCheck"
                                    :class="index !== groupCouponList.length - 1 ? 'mb-20rpx' : ''"
                                ></group-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">2张</text>
                        </view>
                        <view class="mt-28rpx radio">
                            <wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
                                <group-coupon
                                    v-for="(item, index) in unCouponList"
                                    :key="item.id"
                                    :coupon="item"
                                    :canUse="false"
                                    :checked="item.id === checkedId"
                                    :onCheck="Coupons.handleCheck"
                                    :class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
                                ></group-coupon>
                            </wd-radio-group>
                        </view>
                    </view> -->
                </view>
            </view>
        </view>

        <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex justify-between items-center" :style="{ height: '140rpx'}">
            <view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择{{ checkedId ? 1 : 0 }}张</view>
            <view class="mr-30rpx">
                <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="Coupons.handleConfirmCoupon">确定</wd-button>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import Coupon from '@/components/coupon/Coupon.vue'
    import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
    import { getCoupons } from '@/api/user'
    import { getTeaRoomGroupCouponList } from '@/api/tea-room'
    import type { IUserCouponListResult } from '@/api/types/user'
    import { router } from '@/utils/tools'
    import { CouponType } from '@/utils/coupon'

    const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券

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

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

    const groupCouponList = ref<Array<any>>([])
    const checkedId = ref<number>(0)

    const storeId = ref<number>(0) // 门店ID
    const teaRoomId = ref<number>(0) // 包间ID
    const couponId = ref<number>(0) // 选中的优惠券ID
    
    onLoad(async (args) => {
        teaRoomId.value = args.id
        storeId.value = args.storeId || 0
        couponType.value = args.type // 1:优惠券 2:团购券

        // 初始化优惠券数据
        if (args.id && args.numbers && args.type == 1) {
            // 获取到包间ID和预定了几个小时
            await Coupons.handleInitCoupon(args.price)
            checkedId.value = Number(args.couponId) || 0

        } else if (args.id && args.type == 2) {
            await Coupons.handleInitGroupCoupon(args.id, args.numbers)
            checkedId.value = Number(args.groupCouponId) || 0
            console.log("🚀 ~ checkedId.value :", checkedId.value )
        }
    })

    const Coupons = {
        /**
         * 初始化优惠券列表
         * @param id 包间ID
         * @param numbers 预定时长
         */
        handleInitCoupon: async (price: number) => {
            const res = await getCoupons({type_id: 2, price}) // 1茶艺师 2茶室 3 个人中心 4 茶艺师套餐
            // couponList.value = res
            useCoupon.value = res.count.yes_use
            unUseCoupon.value = res.count.no_use

            if (res.result.length > 0) {
                couponList.value.use = res.result.filter(item => item.is_use == 0)
                couponList.value.no_use = res.result.filter(item => item.is_use == 1)
            }
        },

        /**
         * 初始化团购券列表
         */
        handleInitGroupCoupon: async (id: number, numbers: number) => {
            const res = await getTeaRoomGroupCouponList({store_id: storeId.value, room_id: teaRoomId.value})
            groupCouponList.value = res.list
        },

        /**
         * 选择/取消选择优惠券
         * @param id 优惠券ID
         */
        handleCheck: (id: number) => {
            // 如果是优惠券的话则是可以取消选择
            if (couponType.value == 1 && checkedId.value === id) {
                checkedId.value = 0 // 再次点击已选中时取消选择
            } else {
                checkedId.value = id
            }
        },

        /**
         * 确认选择优惠券
         */
        handleConfirmCoupon: () => {
            let coupon = null

            if (checkedId.value > 0) {
                if (couponType.value == CouponType.Discount) {
                    coupon = couponList.value.use.find(item => item.id === checkedId.value)
                } else {
                    coupon = groupCouponList.value.find(item => item.id === checkedId.value)
                }
            }

            uni.$emit('chooseCoupon', { coupon })
            router.navigateBack()
        }
    }
</script>

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

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