<template>
    <view style="padding-bottom: 280rpx">
        <navbar title="预定" bg="#F6F7F9"></navbar>

        <view class="banner">
            <banner :itemData="bannerData"></banner>
        </view>

        <view class="html">
            <view class="cg-name">这里是场馆的名称场馆的名称</view>
            <view class="line"></view>
            <view class="" v-html="content"></view>
        </view>

        <view class="yy-btn">
            <view class="btn" @tap="timePopup = true">立即预约</view>
        </view>

        <Popup :show="timePopup" :width='750' :padding="0" type="bottom" 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="" @tap="timePopup = false"></image>
                
                <view class="d-c-c pt42">
                    <text class="f34 fb">选择时间</text>
                </view>

                <view class="notice">示例：07:00代表07:01-07:59</view>

                <view class="mx-30 mt-28">
                    <view class="d-f a-i-c">
                        <view class="time-item" :class="index == currentTime ? 'active' : ''" v-for="(item, index) in time" :key="index" @tap="handleFilterTime(index)">
                            {{ item.time }}
                        </view>
                    </view>
                </view>

                <view class="mt-30">
                    <view class="date-grid">
                        <view @click="!item.disabled && handleSelectTime(item.time)" class="date-item" v-for="(item, index) in date" :key="index"
                        :style="item.disabled ? 'background-color: #F7F7F7; color: #C9C9C9;' : selectedTime.includes(item.time) ? 'background-color: #E6EFFF;color: #365A9A;' : 'background-color:#F7F7F7; color: #303133;'"
                        >
                            {{ item.time }}
                        </view>
                    </view>
                </view>

                <view class="price">
                    <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>
            </view>
        </Popup>

        <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="" @tap="handleShowTime"></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="price 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;" @tap="handleShowTime">
                                <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 banner from '@/components/diy/banner/banner.vue';
    import priceFormat from '@/components/price-format/price-format.vue';
    import Popup from '@/components/uni-popup.vue';

    export default {
        components: {
            navbar,
            banner,
            priceFormat,
		    Popup
        },
        data() {
            return {
                bannerData: [],
                value: 4,
                currentTab: 1,
                tab: [
                    {type: 1, name: '今天'},
                    {type: 2, name: '明天'},
                    {type: 3, name: '后天'},
                ],
                content: '<p>欢迎来到秀湖网球中心！我们提供优质的网球场地和设施，适合各类网球爱好者。无论您是初学者还是专业选手，我们都能满足您的需求。我们的场地配备了先进的照明系统和舒适的休息区，让您在愉快的环境中享受网球运动。立即预定，开启您的网球之旅吧！</p>',
                timePopup: false,
                time: [
                    {type: 1, time: '3/16周日'},
                    {type: 2, time: '3/17周一'},
                    {type: 3, time: '3/18周二'},
                ],
                currentTime: 0,
                date: [
                    {type: 1, time: '06:00', disabled: false},
                    {type: 2, time: '07:00', disabled: false},
                    {type: 3, time: '08:00', disabled: false},
                    {type: 4, time: '09:00', disabled: false},
                    {type: 5, time: '10:00', disabled: true},   
                    {type: 6, time: '11:00', disabled: false},
                    {type: 7, time: '12:00', disabled: false},
                    {type: 8, time: '13:00', disabled: true},
                    {type: 9, time: '14:00', disabled: false},
                    {type: 10, time: '15:00', disabled: true},
                    {type: 11, time: '16:00', disabled: true},
                    {type: 12, time: '17:00', disabled: false},
                    {type: 13, time: '18:00', disabled: false},
                    {type: 14, time: '19:00', disabled: false},
                    {type: 15, time: '20:00', disabled: false},
                    {type: 16, time: '21:00', disabled: false},
                    {type: 17, time: '22:00', disabled: false},

                ],
                selectedTime: [],
                countSelectedTime: 0,
                billPopup: false,
            };
        },

        onLoad(args) {
		    this.getData();
        }, 

        methods: {
            getData() {
                let self = this;
                uni.showLoading({
                    title: '加载中'
                });
                self._get(
                    'index/index',
                    {
                        url: self.url
                    },
                    function(res) {
                        self.bannerData = res.data.items[0];
                        console.log("🚀 ~  self.bannerData:",  self.bannerData)
                    }
                );
            },

            // 切换tab
            handleChangeTab(e) {
                this.currentTab = e.type;
            },

            // 处理导航
            handleLocation() {
                uni.openLocation({
                    latitude: 30.74621,
                    longitude: 120.76055,
                    name: '秀湖网球中心',
                    address: '嘉兴市秀洲区秀园路秀湖公园（西南角）',
                    scale: 18
                });
            },

            // 处理拨打电话
            handleCall() {
                uni.makePhoneCall({
                    phoneNumber: '0573-82069999'
                });
            },

            // 选择时间
            handleFilterTime(index) {
                this.currentTime = index;
            },

            // 计算时长
            handleSelectTime(time) {
                const idx = this.selectedTime.indexOf(time)
                if (idx > -1) {
                    this.selectedTime.splice(idx, 1) // 取消选中
                } else {
                    this.selectedTime.push(time) // 选中
                }

                // 计算时长
                this.countSelectedTime = this.selectedTime.length * 1
            },

            // 显示费用明细
            handleShowBill() {
                this.billPopup = true;
                this.timePopup = false;
            },

            // 显示选择时间
            handleShowTime() {
                this.billPopup = false;
                this.timePopup = true;
            },

            toConfirm() {
                uni.navigateTo({
                    url: '/bundle/reserve/confirm'
                });
            }
        }
    };
</script>

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

	.top_head {
		line-height: 30px;
		z-index: 1;
		padding-left: 26rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.head_top {
		width: 100%;
		height: var(--status-bar-height);
	}

    .banner {
        .diy-banner-box {
            margin-bottom: 0 !important;
        }
    }

    .html {
        margin: 0 30rpx;
        background-color: #fff;
        padding: 26rpx 30rpx;
        border-radius: 16rpx;

        .cg-name {
            font-weight: bold;
            font-size: 36rpx;
            color: #303133;
            line-height: 50rpx;
        }

        .line {
            border: 2rpx solid #F6F7F9;
            margin-top: 20rpx;
            margin-bottom: 28rpx;
        }
    }

    .yy-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        padding: 52rpx 60rpx 78rpx;

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

    .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);
        }

        .price {
            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>
