<template>
    <view style="padding-bottom: 40rpx">
        <navbar title="预约网球场馆"></navbar>

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

        <!-- 信息介绍 -->
        <view class="info-block">
            <view class="info-title">秀湖网球中心</view>
            <view class="d-f">
                <uni-rate v-model="value"  active-color="#FF5951" :size="18"/>
                <text class="rate">4.0推荐</text>
            </view>
            <view class="time">营业时间：周一至周日 06:00-22:00</view>
            <view class="line"></view>
            <view class="d-b-c">
                <view class="d-f">
                    <image style="width: 36rpx;height: 36rpx;margin-top: 4rpx;" src="@/static/icon/location2.png" mode=""></image>
                    <view class="">
                        <view class="address-time">嘉兴市秀洲区秀园路秀湖公园（西南角）</view>
                        <view class="address-time">距您14km</view>
                    </view>
                </view>
                <view class="d-f">
                    <view class="d-f d-c a-i-c" style="margin-right: 20rpx;" @tap="handleLocation">
                        <image style="width: 64rpx;height: 64rpx;margin-top: 2rpx" src="@/static/icon/share.png" mode=""></image>
                        <view class="mark-text">导航</view>
                    </view>
                    <view class="d-f d-c a-i-c" @tap="handleCall">
                        <image style="width: 64rpx;height: 64rpx;margin-top: 2rpx" src="@/static/icon/mobile.png" mode=""></image>
                        <view class="mark-text">电话</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 分隔线 -->
        <view class="split-line"></view>

        <!-- 场馆信息 -->
        <view class="info-block">
            <view class="info-title">场馆信息</view>
            <view class="d-f">
                <view class="tab" v-for="(item, index) in tab" :key="index" 
                    :style="currentTab === item.type ? 'background-color: #F0F5FF; color: #365A9A;' : ''"
                    @tap="handleChangeTab(item)" >
                    {{ item.name }}
                </view>
            </view>

            <view class="">
                <view class="">
                    <view class="d-b-c">
                        <view class="">
                            <image style="width: 200rpx;height: 200rpx;border-radius: 10rpx; margin-right: 32rpx;" src="https://6548.cn/uploads/20241019/ca61afebae2b1066b74fb42b791d8b29.jpg" mode=""></image>
                        </view>
                        <view class="flex-1">
                            <view class="cg-name">这个是场馆的分场名称</view>
                            <view class="d-b-c">
                                <view class="">
                                    <price-format color="#FF5951" :subscript-size="26" :first-size="38" :second-size="26" price="100"></price-format>
                                </view>
                                <view class="reserve-btn">
                                    预定
                                </view>
                            </view>

                        </view>
                    </view>
                    <view class="d-f a-i-c" style="margin-top: 16rpx;">
                        <view class="time-block" v-for="(item, index) in 17" :key="index">
                            <view class="time-block-text font-400 text-20rpx leading-28rpx" :style="`${index === 1 || index === 11 ? 'color:#C9C9C9;' : ''}`">{{ item + 5 }}</view>
                            <view class="time-block-box h-12rpx rounded-6rpx mt-4rpx" :style="`${index === 1 || index === 11 ? 'background-color:#C9C9C9;' : ''}`"></view>
                        </view>
                    </view>
                    <view class="line"></view>
                </view>

                <view class="">
                    <view class="d-b-c">
                        <view class="">
                            <image style="width: 200rpx;height: 200rpx;border-radius: 10rpx; margin-right: 32rpx;" src="https://6548.cn/uploads/20241019/ca61afebae2b1066b74fb42b791d8b29.jpg" mode=""></image>
                        </view>
                        <view class="flex-1">
                            <view class="cg-name">这个是场馆的分场名称</view>
                            <view class="d-b-c">
                                <view class="">
                                    <price-format color="#FF5951" :subscript-size="26" :first-size="38" :second-size="26" price="100"></price-format>
                                </view>
                                <view class="reserve-btn">
                                    预定
                                </view>
                            </view>

                        </view>
                    </view>
                    <view class="d-f a-i-c" style="margin-top: 16rpx;">
                        <view class="time-block" v-for="(item, index) in 17" :key="index">
                            <view class="time-block-text font-400 text-20rpx leading-28rpx" :style="`${index === 1 || index === 11 ? 'color:#C9C9C9;' : ''}`">{{ item + 5 }}</view>
                            <view class="time-block-box h-12rpx rounded-6rpx mt-4rpx" :style="`${index === 1 || index === 11 ? 'background-color:#C9C9C9;' : ''}`"></view>
                        </view>
                    </view>
                    <view class="line"></view>
                </view>
            </view>
        </view>
    </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';
    export default {
        components: {
            navbar,
            banner,
            priceFormat
        },
        data() {
            return {
                bannerData: [],
                value: 4,
                currentTab: 1,
                tab: [
                    {type: 1, name: '今天'},
                    {type: 2, name: '明天'},
                    {type: 3, name: '后天'},
                ]
            };
        },

        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;
            },
        }
    };
</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

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

    .info-block {
        margin: 0 30rpx;

        .info-title {
            font-weight: bold;
            font-size: 34rpx;
            color: #303133;
            line-height: 48rpx;
            margin-bottom: 10rpx;
        }

        .rate {
            margin-left: 8rpx;
            font-weight: 400;
            font-size: 26rpx;
            color: #606266;
            line-height: 36rpx;
        }
        
        .time {
            font-size: 26rpx;
            color: #606266;
            line-height: 48rpx;
        }

        .line {
            height: 2rpx;
            background-color: #F6F7F9;
            margin: 24rpx 0;
        }

        .address-time {
            font-weight: 400;
            font-size: 26rpx;
            color: #606266;
            line-height: 36rpx;
        }

        .tab {
            width: 108rpx;
            height: 52rpx;
            text-align: center;
            line-height: 52rpx;
            background-color: #F7F7F7;
            font-size: 26rpx;
            color: #606266;
            border-radius: 8rpx;
            margin-top: 16rpx;
            margin-right: 10rpx;
            margin-bottom: 32rpx;
        }

        .cg-name {
            font-size: 28rpx;
            color: #303133;
            line-height: 40rpx;
            margin-bottom: 74rpx;
        }

        .reserve-btn {
            width: 104rpx;
            height: 52rpx;
            border-radius: 10rpx;
            border: 2rpx solid #365A9A;
            font-weight: 400;
            font-size: 26rpx;
            color: #365A9A;
            line-height: 52rpx;
            text-align: center;
        }

        .time-block {
            text-align: center;
            margin-right: 8rpx;

            .time-block-text {
                font-weight: 400;
                font-size: 20rpx;
                color: #365A9A;
                line-height: 28rpx;
                text-align: center;
            }

            .time-block-box {
                width: 30rpx;
                height: 12rpx;
                background: #365A9A;
                border-radius: 6rpx;
            }
        }
    }

    .split-line {
        height: 20rpx;
        background-color: #F6F7F9;
        margin-top: 12rpx;
        margin-bottom: 28rpx;
    }
</style>