<template>
    <view class="">
        <navbar title="确认订单"></navbar>

        <!-- 预约信息 -->
        <view class="bg-white box pr">
            <view class="current"></view>
            <view class="title">预约信息</view>
            <view class="desc">预约场地：这里是场地的名称</view>
            <view class="desc">预约时间：2025-03-18  09:00-12:00</view>
            <view class="desc">预约时长：3小时</view>
        </view>

        <!-- 其他须知 -->
        <view class="bg-white box pr mt20">
            <view class="current"></view>
            <view class="title">
                其他须知
            </view>
            <view class="desc2">
                <view class="dot"></view>
                <view class="">17点前预约100元/小时</view>
            </view>
            <view class="desc2">
                <view class="dot"></view>
                <view class="">17点后需要加收灯光费，120元/小时</view>
            </view>
        </view>

        <!-- 退订规则 -->
        <view class="bg-white box pr mt20">
            <view class="current"></view>
            <view class="title">
                退订规则
            </view>
            <view class="desc">
               ①开场前≥24小时退订，可全款退款
            </view>
            <view class="desc">
               ②4小时＜开场前＜24小时退订，收取50%手续费
            </view>
            <view class="desc">
               ③开场前≤4小时退订，不予退款
            </view>
        </view>

        <!-- 立即预定 -->
        <view class="price" v-if="showPrice">
            <view class="line"></view>
            <view class="d-b-c price-block">
                <view class="d-f d-c j-c-b">
                    <view class="">
                        合计： <price-format color="#FF5951" :subscript-size="26" :first-size="40" :second-size="40" price="100"></price-format>
                    </view>
                    <view class="d-f j-c-c a-i-c" style="margin-top: 10rpx;" @tap="handleShowBill">
                        <view class="price-detail">费用明细</view>
                        <image style="width: 14rpx;height: 8rpx;margin-left: 10rpx;" src="@/static/icon/down.png" mode=""></image>
                    </view>
                </view>
                <view class="price-btn" @tap="toConfirm">立即预定<text class="" v-if="countSelectedTime > 0">（{{countSelectedTime}}小时）</text></view>
            </view>
        </view>

        <!-- 费用明细弹窗 -->
        <Popup :show="billPopup" :width='750' :padding="0" type="bottom" backgroundColor="#FBFBFB" radius="32rpx 32rpx 0 0">
            <view class="ww100 box-s-b pop-improt typeof pr time-popup">
                <image style="width: 64rpx;height: 64rpx;position: absolute; top: 26rpx;right: 30rpx;" src="@/static/icon/close2.png" mode="" @click="closeBillPopup"></image>
                
                <view class="d-c-c pt42">
                    <text class="f34 fb">费用明细</text>
                </view>

                <view class="bg-white bill-info">
                    <view class="">
                        <view class="title1 d-b-c">
                            <view>场地费</view>
                            <view>
                                <price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
                            </view>
                        </view>
                        <view class="title2 d-b-c">
                            <view>场地费（￥100元/小时）</view>
                            <view>x3</view>
                        </view>
                    </view>

                    <view style="margin-top: 52rpx;">
                        <view class="title1 d-b-c">
                            <view>灯光费</view>
                            <view>
                                <price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
                            </view>
                        </view>
                        <view class="title2 d-b-c">
                            <view>灯光费（￥50元/小时）</view>
                            <view>x3</view>
                        </view>
                    </view>

                    <view class="line"></view>

                    <view class="title3 d-b-c">
                        <view>实付金额</view>
                        <view>
                            <price-format color="#303133" :subscript-size="30" :first-size="30" :second-size="30" price="100"></price-format>
                        </view>
                    </view>
                </view>

                <view class="price2 bg-white"  style="margin: 0; padding: 56rpx 22rpx 42rpx;">
                    <view class="d-b-c price-block" style="margin: 0;">
                        <view class="d-f d-c j-c-b">
                            <view class="">
                                合计： <price-format color="#FF5951" :subscript-size="26" :first-size="40" :second-size="40" price="100"></price-format>
                            </view>
                            <view class="d-f j-c-c a-i-c" style="margin-top: 10rpx;" @click="closeBillPopup">
                                <view class="price-detail">费用明细</view>
                                <image style="width: 14rpx;height: 8rpx;margin-left: 10rpx;" src="@/static/icon/up.png" mode=""></image>
                            </view>
                        </view>
                        <view class="price-btn">立即预定<text class="" v-if="countSelectedTime > 0">（{{countSelectedTime}}小时）</text></view>
                    </view>
                </view>
            </view>
        </Popup>
    </view>
</template>

<script>
    import navbar from '@/components/navbar.vue';
    import Popup from '@/components/uni-popup.vue';

    export default {
        components: {
            navbar,
		    Popup
        },

        data() {
            return {
                billPopup: false,
                showPrice: true
            };
        },
        
        methods: {
            // 显示费用明细
            handleShowBill() {
                this.showPrice = false;
                this.billPopup = true;
            },

            closeBillPopup() {
                this.billPopup = false;
                this.showPrice = true;
            },
        }
    };
</script>

<style lang="scss">
    .box {
        border-radius: 16rpx;
        padding: 32rpx 30rpx;
        margin: 0 30rpx;
    }

    .title {
        font-size: 32rpx;
        color: #303133;
        line-height: 44rpx;
        margin-bottom: 28rpx;
    }

    .desc {
        font-weight: 500;
        font-size: 26rpx;
        color: #303133;
        line-height: 48rpx;
        margin-bottom: 16rpx;
    }

    .desc:last-child {
        margin-bottom: 0;
    }

    .current {
        position: absolute;
        left: 0;
        top: 38rpx;
        width: 8rpx;
        height: 32rpx;
        background-color: #365A9A;
        border-radius: 4rpx;
    }

    .dot {
        width: 8rpx;
        height: 8rpx;
        background: #6A6363;
        margin-right: 12rpx;
    }

    .mt20 {
        margin-top: 20rpx;
    }

    .desc2 {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
    }

    .desc2:last-child {
        margin-bottom: 0;
    }

    .price {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;

        .line {
            height: 2rpx;
            background: #E5E5E5;
            width: 100%;
        }

        .price-block {
            margin: 42rpx 22rpx;
        }

        .price-detail {
            color: #365A9A;
            font-size: 24rpx;
            line-height: 34rpx;
        }

        .price-btn {
            width: 368rpx;
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            background: #365A9A;
            border-radius: 8rpx;
            font-size: 32rpx;
            color: #FFF;
        }
    }

    .time-popup {
        position: relative;

        .title {
            font-size: 36rpx;
            color: #121212;
            line-height: 50rpx;
        }

        .pt42 {
            padding-top: 42rpx;
        }

        .notice {
            margin-top: 30rpx;
            width: 100%;
            height: 56rpx;
            background: #FFFBE5;
            padding: 10rpx 30rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #E2950F;
            line-height: 48rpx;
            text-align: left;
        }

        .time-item {
            margin-right: 32rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #303133;
            line-height: 44rpx;
            height: 62rpx;
        }
        
        .time-item-line {
            width: 60rpx;
            height: 10px;
            background-color: #365A9A;
            border-radius: 6rpx;
        }

        .active {
            color: #365A9A;
            font-size: 32rpx;
            line-height: 44rpx;
        }

        .active:after {
            content: '';
            display: block;
            width: 60rpx;
            height: 10rpx;
            background-color: #365A9A;
            border-radius: 6rpx;
            margin: 8rpx auto 0 auto;
        }

        /* 日期网格：一行四个，间距 20rpx */
        .date-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
            padding: 0 30rpx; /* 保持与上方时间切换区域一致的左右内边距 */
        }

        .date-item {
            background-color: #F7F7F7;
            border-radius: 10rpx;
            height: 72rpx; /* 可按需调整高度 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30rpx;
            color: #303133;
            box-sizing: border-box;
        }

        /* 可选：选中样式 */
        .date-item.active {
            border-color: #365A9A;
            color: #365A9A;
            box-shadow: 0 4rpx 10rpx rgba(54,90,154,0.08);
        }

        .price2 {
            margin-top: 100rpx;

            .line {
                height: 2rpx;
                background: #E5E5E5;
                width: 100%;
            }

            .price-block {
                margin: 42rpx 22rpx;
            }

            .price-detail {
                color: #365A9A;
                font-size: 24rpx;
                line-height: 34rpx;
            }

            .price-btn {
                width: 368rpx;
                height: 90rpx;
                line-height: 90rpx;
                text-align: center;
                background: #365A9A;
                border-radius: 8rpx;
                font-size: 32rpx;
                color: #FFF;
            }
        }
    }
    .bill-info {
        border-radius: 16rpx;
        margin: 32rpx 30rpx 22rpx;
        padding: 48rpx 30rpx 30rpx;

        .title1 {
            font-size: 30rpx;
            color: #303133;
            line-height: 42rpx;
        }

        .title2 {
            margin-top: 12rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #909399;
            line-height: 34rpx;
        }

        .line {
            border: 2rpx solid #F6F7F9;
            margin: 34rpx 0 30rpx;
        }

        .title3 {
            font-size: 30rpx;
            color: #303133;
            line-height: 42rpx;
        }
    }
</style>