<template>
	<view class="content">
		<view class="c-header">
			<view class="c-downtime">请在<text>14分59秒</text>内支付</view>
			<view class="c-operate-btn">
				<view class="cancel-btn">取消订单</view>
				<view class="instant-btn" @click="to_pay">立即支付￥119</view>
			</view>
		</view>
		<!-- 包场 -->
		<view class="c-scheduled-card">
			<view class="title">预定信息</view>
			<view class="schedule-address">
				<view class="text">场馆</view>
				<view class="name">体育馆综合训练馆(观山湖店)</view>
			</view>
			<view class="schedule-address">
				<view class="text">场次</view>
				<view class="">
					<view class="time" v-for="item in 3">06-11(周三)11:00-12:00|羽毛球1</view>
				</view>
			</view>
		</view>
		<!-- 固定场 -->
		<view class="c-venueinfo-card">
			<view class="venue-address">
				<view class="address">
					<zzx-icon name="venue-icon4" size="14"></zzx-icon>
					<view class="name">林旦综合运动馆</view>
					<view class="venue-tags">营业中</view>
				</view>
				<view class="check-all">
					<text>查看所有可用场馆</text>
					<zzx-icon name="ashRight" size="12"></zzx-icon>
				</view>
			</view>
			<view class="venue-shoping-info">
				<image class="venue-img" src="https://img.shetu66.com/2023/06/13/1686646672844195.jpg" mode=""></image>
				<view class="venue-info">
					<view class="info-name">
						<view class="textHidden">足球五人制闲时1小时</view>
						<view class="">x2</view>
					</view>
					<view class="venue-time">10：00-17：00</view>
					<view class="venue-time">随时退·过期退</view>
					<view class="venue-price-info">
						<view class="total-price">￥45.9</view>
						<view class="pay-price">
							<view class="text">需付款</view>
							<view class="price-box">
								<text class="mini-text">￥</text>
								<view class="price">
									24.9
								</view>
								<zzx-icon name="ashRight" size="12"></zzx-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="c-address-card">
			<view class="address">
				<zzx-icon name="location"></zzx-icon>
				<view class="">印象城购物中心6楼</view>
			</view>
			<view class="nav-info">
				<view class="nav">
					<zzx-icon name="navigation" size="14"></zzx-icon>
					<view class="nav-text">导航</view>
				</view>
				<view class="phone">
					<zzx-icon name="phone" size="14"></zzx-icon>
					<view class="">电话</view>
				</view>
			</view>
		</view>
		<!-- 包场 -->
		<view class="c-rules-card">
			<view class="title">退改规则</view>
			<view class="text">
				每场开场前<text>60分钟</text>可随时退改，之后不可退款。如您有疑问，
				可联系场馆。
			</view>
		</view>
		<!-- 包场 -->
		<view class="c-rules-card">
			<view class="title">温馨提示</view>
			<view class="text">
				场地仅限个人使用，培训、比赛或者其他商业活动可能需要
				额外收费，如有需求请提前联系商家咨询收费标准。
			</view>
		</view>
		<view class="c-orderinfo-card">
			<view class="title">订单信息</view>
			<view class="info">
				<view class="left">需付款</view>
				<view class="right">￥116</view>
			</view>
			<view class="info">
				<view class="left">手机号码</view>
				<view class="right">18981455960</view>
			</view>
			<view class="info">
				<view class="left">订单编号</view>
				<view class="right">
					<text style="margin-right: 16rpx;">46476465456464156486</text>
					<zzx-icon name="copy" size="14"></zzx-icon>
				</view>
			</view>
			<view class="info">
				<view class="left">下单时间</view>
				<view class="right">2023-7-25 14：25：45</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const to_pay = () => {
		uni.navigateTo({
			url: '/pages/index/toBeUsed/index'
		})
	}
</script>

<style lang="less" scoped>
	.c-header {
		margin-top: 20rpx;

		.c-downtime {
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;

			&>text {
				color: #FB5B5B;
			}
		}

		.c-operate-btn {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-top: 20rpx;

			.cancel-btn {
				width: 226rpx;
				height: 68rpx;
				background: #E6E6E6;
				border-radius: 60rpx;
				text-align: center;
				line-height: 68rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #AAAAAA;
			}

			.instant-btn {
				width: 440rpx;
				height: 68rpx;
				background: #C8FF0C;
				border-radius: 60rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
				text-align: center;
				line-height: 68rpx;
			}
		}
	}

	.c-scheduled-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

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

		.schedule-address {
			display: flex;
			gap: 20rpx;
			margin-top: 20rpx;

			.text {
				font-size: 24rpx;
				color: #AAAAAA;
			}

			.name {
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}

			.time {
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
				margin-bottom: 20rpx;
			}
		}
	}

	.c-venueinfo-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

		.venue-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F0F0F0;
			padding-bottom: 20rpx;

			.address {
				display: flex;
				align-items: center;
				gap: 4rpx;

				.name {
					font-weight: 800;
					font-size: 32rpx;
					color: #222222;
				}

				.venue-tags {
					width: 98rpx;
					height: 32rpx;
					background: rgba(77, 217, 81, 0.2);
					border-radius: 8rpx;
					font-size: 22rpx;
					color: #4DD951;
					text-align: center;
					line-height: 32rpx;
				}
			}

			.check-all {
				font-size: 24rpx;
				color: #AAAAAA;
				display: flex;
				align-items: center;
				gap: 8rpx;

				&>text {
					margin-bottom: 10rpx;
				}
			}
		}

		.venue-shoping-info {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.venue-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
			}

			.venue-info {
				.info-name {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					gap: 100rpx;

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

					&>view:last-child {
						font-size: 22rpx;
						color: #AAAAAA;
					}
				}

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

				.venue-price-info {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.total-price {
						font-size: 28rpx;
						color: #222222;
					}

					.pay-price {
						display: flex;
						align-items: center;
							gap: 10rpx;
						.text {
							font-size: 28rpx;
							color: #222222;
						}

						.price-box {
							display: flex;
							align-items: center;
							color: #FB5B5B;

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

				}
			}
		}

	}

	.c-address-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

		.address {
			display: flex;
			align-items: center;
			gap: 4rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #222222;
		}

		.nav-info {
			display: flex;
			align-items: center;
			text-align: center;
			gap: 32rpx;
			font-size: 22rpx;
			color: #222222;
		}
	}

	.c-rules-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

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

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

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

	.c-orderinfo-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

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

		.info {
			display: flex;
			align-items: center;
			gap: 24rpx;
			margin-top: 20rpx;

			.left {
				font-size: 28rpx;
				color: #AAAAAA;
			}

			.right {
				font-size: 28rpx;
				color: #222222;
			}
		}
	}
</style>