<template>
    <wd-popup v-model="showPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
        <view class="relative pb-78rpx">
            <view class="absolute top-18rpx right-30rpx" @click="showPopup = false">
                <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
            </view>
            <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">续订包间</view>

            <view class="booking-time mx-60rpx">
                <view class="text-32rpx leading-44rpx text-[#01000D] mb-28rpx">续订时间</view>
                <view class="grid grid-cols-4 gap-20rpx">
                    <view 
                        @click="RenewTime.handleSelectTime(item)"
                        v-for="(item, index) in timeList" :key="index"
                        class="w-148rpx h-60rpx text-center leading-60rpx bg-[#F7F7F7] rounded-8rpx text-28rpx text-[#606266]"
                        :class="currentTimeValue == item.value ? '!bg-[#4C9F44] text-white' : ''">
                            {{ item.label }}
                    </view>
                </view>
            </view>

            <view class="mx-auto mt-130rpx w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="RenewTime.handleConfirmSelectedTime">
                确定续订
            </view>
        </view>
    </wd-popup>
</template>

<script lang="ts" setup name="RenewTime">
    import {toast} from '@/utils/toast'

    const OSS = inject('OSS')

    /**
     * BookingTime 预约时间
     * @description 茶室预约时间选择组件
     */

    const props = defineProps({
        modelValue: {
            type: Boolean,
            default: false
        },
    })

    // 初始化时间
    onMounted(() => {
    })

    // 日期相关
    const currentTimeValue = ref<number>(0)
    const timeList = ref<Array<{ label: string, value: number }>>([
        {label: '1小时', value: 1},
        {label: '2小时', value: 2},
        {label: '3小时', value: 3},
        {label: '4小时', value: 4},
        {label: '5小时', value: 5},
        {label: '6小时', value: 6},
    ])

    const RenewTime = {
        /**
         * 选择时间
         */
        handleSelectTime: (item: { label: string, value: number }) => {
            currentTimeValue.value = item.value
        },

        /**
         * 确认选择时间
         */
        handleConfirmSelectedTime: () => {
            if (currentTimeValue.value == 0) {
                toast.info('请选择续订时间')
                return
            }
            const selectedItem = timeList.value.find(item => item.value == currentTimeValue.value)
            emit('selectedTime', selectedItem)
            showPopup.value = false
        }
    }

    const showPopup = computed({
        get: () => props.modelValue,
        set: (val: boolean) => emit('update:modelValue', val)
    })

    const emit = defineEmits(['update:modelValue', 'selectedTime'])
</script>

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

<style lang="scss" scoped>
    .booking-time {
        :deep() {
            .wd-tabs__line {
                background-color: #4C9F44 !important;
            }
        }
    }
</style>
