<template>
	<view class="content">
		<view class="r-card-list">
			<view class="r-title">选择报名项目</view>
			<view class="r-list-box">
				<view class="r-events" v-for="(item, index) in eventList" :key="index" @click="toggleSelect(index)"
					:class="{'selected-item': item.selected}">
					<view class="events-type">
						<view class="r-check">
							<zzx-icon :name="item.selected ? 'selected' : 'unchecked'" size="14"></zzx-icon>
						</view>
						<view>{{ item.name }}</view>
					</view>
					<view class="events-price">￥{{ item.price }}/人</view>
				</view>
			</view>
		</view>
		<view class="r-card-user">
			<view class="r-user">
				<view class="user-title">用户信息</view>
				<view class="invite">
					<zzx-icon name="wechat" size="16"></zzx-icon>
					<view style="margin-bottom: 8rpx;">邀请微信好友</view>
					<zzx-icon name="ashRight" size="12"></zzx-icon>
				</view>
			</view>
			<view class="select-user">
				选择用户
			</view>
		</view>
		<view class="r-insurance">
			<view class="insurance-title">
				<view class="title">参赛意外险</view>
				<view class="r-check">
					<view style="margin-bottom: 8rpx;">查看详情</view>
					<zzx-icon name="ashRight" size="12"></zzx-icon>
				</view>
			</view>
			<view class="r-insurance-detail" @click="select_insurance=!select_insurance">
				<view class="detail-text">
					￥3/人×1份（意外事故10万，社保内医疗1万）
				</view>
				<view class="detail-icon">
					<zzx-icon :name="select_insurance?'selected' : 'unchecked'" size="14"></zzx-icon>
				</view>
			</view>
		</view>
	</view>
	<view class="r-submit-pay">
		<view class="r-price">
			<view class="price"><text>￥</text>5</view>
			<view class="r-check-detail">
				<view class="">查看明细</view>
				<zzx-icon name="up" size="12"></zzx-icon>
			</view>
		</view>
		<view class="r-submit-btn" @click="to_play">
			<button hover-class="hvoer-style">立即支付</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	interface EventItem {
		id : number;
		name : string;
		price : number;
		selected : boolean;
	}
	const eventList = ref<EventItem[]>([
		{ id: 1, name: '篮球赛16场', price: 10, selected: false },
		{ id: 2, name: '羽毛球单打', price: 5, selected: false },
		{ id: 3, name: '乒乓球团体赛', price: 8, selected: false },
		{ id: 4, name: '游泳比赛', price: 15, selected: false },
		{ id: 5, name: '田径100米', price: 3, selected: false }
	]);
	const is_select = ref(false);
	const select_insurance=ref(false);
	// 切换选中状态
	const toggleSelect = (index : number) => {
		eventList.value[index].selected = !eventList.value[index].selected;
	};
	const to_play=()=>{
		uni.navigateTo({
			url:'/pages/index/eventsOrder/index'
		})
	}
</script>

<style lang="less" scoped>
	.r-card-list {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

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

		.r-list-box {
			.r-events {
				margin-top: 20rpx;
				padding: 20rpx;
				background: #F5F5F5;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #222222;

				.events-type {
					display: flex;
					align-items: center;
					gap: 20rpx;

					.r-check {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}

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

		.r-user {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.user-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}
			.invite{
				display: flex;
				align-items: center;
				gap: 8rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}
		.select-user{
			margin-top: 22rpx;
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}
	}
	.r-insurance{
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		.insurance-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}
			.r-check{
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}
		.r-insurance-detail{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.detail-text{
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}
	}
	.r-submit-pay{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 32rpx;
		position: fixed;
		bottom: 0;
		width: 94%;
		padding: 20rpx;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.09);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		.r-price{
			display: flex;
			align-items: center;
			gap: 20rpx;
			.price{
				font-weight: 800;
				font-size: 48rpx;
				color: #FB5B5B;
				&>text{
					font-size: 26rpx;
				}
			}
			.r-check-detail{
				font-size: 24rpx;
				color: #AAAAAA;
				display: flex;
				gap: 10rpx;
			}
		}
		.r-submit-btn{
			&>button{
				width: 226rpx;
				height: 100rpx;
				background: #C8FF0C;
				border-radius: 60rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				line-height: 100rpx;
			}
			&>button::after{
				border: none;
			}
			.hvoer-style{
				color: #7f7f7f;
			}
		}
	}
</style>