<template>
	<uni-popup ref="selectPopup" :safe-area="false" type="bottom">
		<view class="header-text">开场前60分钟随时退</view>
		<view class="select-popup">
			<view class="pop-title">选择场次</view>
			<view class="pop-date-list">
				<scroll-view scroll-x="true" class="scroll-view_H">
					<view class="scroll-view-item" v-for="(item,index) in 7" @click="sel_tab(index)">
						<view class="today-time">今天(06-09)</view>
						<view class="num">5场可订</view>
						<view class="line" v-if="sel_index===index"></view>
					</view>
				</scroll-view>
			</view>
			<view class="gym-list">
				<view class="time-list">
					<view style="height: 26rpx;"></view>
					<view class="item-time" v-for="(item,index) in time_list" :key="index">{{item}}</view>
				</view>
				<view class="table-list">
					<scroll-view scroll-x="true" class="table-scroll">
						<view class="father-list" v-for="item in 7">
							<view class="father-title">羽毛球1</view>
							<view class="children-list" v-for="item in 13">
								<view class="item-card">￥35</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="select-list">
				<view class="select-title">已选场次</view>
				<scroll-view scroll-x="true" class="select-scroll">
					<view class="item-list" v-for="item in 7">
						<view class="list-box">
							<view class="list-text">
								<view class="">16:00-17:00</view>
								<view class="">羽毛球1</view>
							</view>
							<zzx-icon name="cancel" size="12"></zzx-icon>
						</view>
					</view>
				</scroll-view>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="footer-submit">
				<view class="f-price">
					<view class="">总价</view>
					<view class="">￥50.59</view>
				</view>
				<view class="f-btn" @click="submit_order">
					<button>提交订单</button>
				</view>
			</view>
		</view>
	</uni-popup>
	<view>
		<uni-popup ref="orderPopup" :safe-area="false" type="bottom">
			<view class="header-text">开场前60分钟随时退</view>
			<view class="order-popup">
				<view class="p-header-card">
					<view class="p-school-info">
						<zzx-icon name="pay-icon1" size="16"></zzx-icon>
						<view class="name">观山湖区第十二小学</view>
					</view>
					<view class="p-title">羽毛球场地预定</view>
					<view class="p-preset">
						<view class="preset-info" v-for="item in 3">06-11(周三)11:00-12:00|羽毛球1</view>
					</view>
				</view>
				<view class="p-price-card">
					<view class="p-price">
						<view class="text">商品总价(共3场)</view>
						<view class="price"><text class="mini-text">￥</text>50.59</view>
					</view>
					<view class="p-subtotal">
						<text>小计</text>
						<view class="total-price"><text class="mini-text">￥</text>50.59</view>
					</view>
				</view>
				<view class="p-phone-card">
					<view class="p-phone">
						<view class="text">手机号码</view>
						<view class="phone">159****2066</view>
					</view>
					<view class="tips">请通话畅通，商家需要联系您确认到店时间</view>
				</view>
				<view class="p-rules-card">
					<view class="p-title">退改规则</view>
					<view class="p-text">每场开场前<text>60分钟</text>可随时退改，之后不可退款。如您有疑问，可联系场馆。</view>
				</view>
				<view class="p-rules-card">
					<view class="p-title">温馨提示</view>
					<view class="p-text">场地仅限个人使用，培训、比赛或者其他商业活动可能需要额外收费，如有需求请提前联系商家咨询收费标准。</view>
				</view>
				<view class="p-remark">
					<view class="title">备注</view>
					<input type="text" />
				</view>
				<view style="height: 200rpx;"></view>
				<view class="footer-pay">
					<button hover-class="hover-style">
						<view class="btn-price"><text class="mini-text">￥</text>50.59</view>
						<view class="btn-text">立即支付</view>
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	const selectPopup = ref();
	const orderPopup = ref()
	const sel_index = ref(0);
	const time_list = ref(['09：00', '10：00', '11：00', '12：00', '13：00', '14：00', '15：00', '16：00', '17：00', '18：00', '19：00', '20：00', '21：00', '22：00'])
	const open = () => {
		selectPopup.value.open()
	}
	defineExpose({
		open
	})

	const sel_tab = (i) => {
		sel_index.value = i
	}

	const submit_order = () => {
		selectPopup.value.close()
		orderPopup.value.open()
		// uni.navigateTo({
		// 	url:'/pages/index/gymPay/index'
		// })
	}
</script>

<style lang="less" scoped>
	.header-text {
		margin: auto;
		background: linear-gradient(90deg, #C8FF0C 0%, rgba(100, 128, 6, 0) 100%);
		border-radius: 60rpx;
		width: 286rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.select-popup {
		background: #F6F6F6;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		max-height: 1200rpx;
		overflow: auto;

		.pop-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			padding: 20rpx;
		}

		.pop-date-list {
			border-bottom: 1rpx solid #F0F0F0;
			background: #FFFFFF;
			padding: 20rpx;
			border-radius: 24rpx;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;

				.scroll-view-item {
					display: inline-block;
					text-align: center;
					margin-right: 30rpx;

					.today-time {
						font-weight: bold;
						font-size: 28rpx;
						color: #222222;
					}

					.num {
						margin-top: 8rpx;
						font-size: 24rpx;
						color: #AAAAAA;
					}

					.line {
						margin: auto;
						width: 50rpx;
						height: 8rpx;
						background: #C8FF0C;
						transition: width 2s ease;
					}
				}
			}
		}

		.gym-list {
			display: flex;
			background: #FFFFFF;
			padding: 20rpx;

			.time-list {
				width: 100rpx;

				.item-time {
					margin-bottom: 20rpx;
					height: 54rpx;
					font-size: 24rpx;
					color: #222222;
					line-height: 54rpx;
				}
			}

			.table-list {
				width: 610rpx;

				.table-scroll {
					white-space: nowrap;
					width: 100%;

					.father-list {
						display: inline-block;
						margin-right: 20rpx;

						.father-title {
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							font-weight: bold;
							font-size: 24rpx;
							color: #222222;
						}

						.children-list {
							margin-bottom: 20rpx;

							.item-card {
								width: 124rpx;
								height: 54rpx;
								background: #F6F6F6;
								border-radius: 8rpx;
								font-weight: bold;
								font-size: 24rpx;
								color: #222222;
								text-align: center;
								line-height: 54rpx;
							}
						}
					}
				}

			}
		}

		.select-list {
			padding: 20rpx;

			.select-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.select-scroll {
				white-space: nowrap;
				width: 100%;
				margin-top: 20rpx;

				.item-list {
					display: inline-block;
					padding: 20rpx;
					width: 180rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-right: 20rpx;

					.list-box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.list-text {
							font-weight: bold;
							font-size: 24rpx;
							color: #222222;

							&>view:last-child {
								margin-top: 8rpx;
							}
						}
					}
				}
			}
		}

		.footer-submit {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 710rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			bottom: 0;
			padding: 0 20rpx;

			.f-price {
				display: flex;
				align-items: center;
				gap: 16rpx;

				&>view:first-child {
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				&>view:last-child {
					font-weight: 800;
					font-size: 48rpx;
					color: #FB5B5B;
				}
			}

			.f-btn {
				&>button {
					width: 226rpx;
					height: 100rpx;
					background: #C8FF0C;
					border-radius: 60rpx;
					line-height: 100rpx;
					text-align: center;
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}

				&>button::after {
					border: none;
				}
			}
		}
	}

	.order-popup {
		background: #F6F6F6;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		max-height: 1200rpx;
		overflow: auto;

		.p-header-card {
			background: #fff;
			padding: 20rpx;
			margin-top: 20rpx;

			.p-school-info {
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.p-title {
				margin-top: 20rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.p-preset {
				font-size: 24rpx;
				color: #AAAAAA;

				.preset-info {
					margin-top: 20rpx;
				}
			}
		}

		.p-price-card {
			background: #fff;
			padding: 20rpx;
			margin-top: 20rpx;

			.p-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 114rpx;
				border-bottom: 1rpx solid #F0F0F0;

				.text {
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				.price {
					font-weight: 800;
					font-size: 48rpx;
					color: #222222;
				}
			}

			.p-subtotal {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 16rpx;
				margin-top: 20rpx;

				&>text:nth-child(1) {
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				.total-price {
					font-weight: 800;
					font-size: 48rpx;
					color: #FB5B5B;
				}
			}
		}

		.p-phone-card {
			background: #fff;
			padding: 20rpx;
			margin-top: 20rpx;

			.p-phone {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.tips {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.p-rules-card {
			background: #fff;
			padding: 20rpx;
			margin-top: 20rpx;

			.p-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.p-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #AAAAAA;

				&>text {
					color: #222222;
				}
			}
		}

		.p-remark {
			display: flex;
			align-items: center;
			gap: 10rpx;
			background: #fff;
			padding: 20rpx;

			.title {
				width: 60rpx;
				font-size: 24rpx;
				color: #222222;
			}

			&>input {
				width: 690rpx;
				font-size: 24rpx;
				color: #757575;
			}
		}

		.footer-pay {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 710rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			bottom: 0;
			padding: 0 20rpx;
			z-index: 9999;
			&>button{
				width: 686rpx;
				height: 100rpx;
				background: #C8FF0C;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10rpx;
				&>button::after {
					border: none;
				}
				.btn-price{
					font-weight: 800;
					font-size: 48rpx;
					color: #222222;
				}
				.btn-text{
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
			}
			.hover-style{
				color: #999999;
			}
		}
	}
</style>