<template>
	<view class="content">
		<view class="" style="width: 100%; height: 386rpx; background-color: antiquewhite;">
			<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
				<swiper-item v-for="(item, index) in imgList" :key="index">
					<image :src="item" mode="widthFix" class="slide-img"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="" style="display: flex; align-items: right; width: 100%; margin-top: 10rpx;">
			<view class="row center" style="margin-left: auto; margin-right: 20rpx;">
				<image src="/static/refresh.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
				<text style="margin-left: 20rpx;">刷新</text>
			</view>
		</view>

		<view class="" style="width: 95%; padding: 0 auto 0; margin-top: 10rpx; overflow: auto;flex: 1">

			<view class="grid-container">
				<view class="grid-item" v-for="(item, index) in 8" :key="index" @click="openPop()">
					<view class="item-content column">

						<view class="center"
							style="width: 100%; height: 400rpx; background-color: #D4D4D4; border-radius: 10rpx 10rpx 0 0; position: relative;">

							<text
								style="position: absolute; left: 15rpx; top: 15rpx; font-size: 16rpx; color: black;">组局中</text>

							<image src="/static/9.png" style="width: 100rpx; height: 100rpx; position: absolute;"
								mode=""></image>

							<view class=""
								style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; top: 50rpx; border-radius: 50%;">
								<image src=""
									style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
								</image>
							</view>

							<view class=""
								style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; left: 30rpx; border-radius: 50%;">
								<image src=""
									style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
								</image>
							</view>

							<view class=""
								style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; right: 30rpx; border-radius: 50%;">
								<image src=""
									style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
								</image>
							</view>

							<view class="center"
								style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; bottom: 50rpx; border-radius: 50%;">
								<!-- <image src="" style="width: 100%; height: 100%; border-radius: 50%;"></image> -->
								<text style="color: black;">+</text>
							</view>


						</view>

						<text
							style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">休闲局，随便来</text>
						<text style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">20：00 ~
							04：30 共8小时30分钟</text>
						<text
							style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">304包厢-大包，4人</text>
						<text
							style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">不可吸烟、性别不限、信誉≧4.0</text>


					</view>
				</view>
			</view>

		</view>


		<uni-popup ref="cardInfo" type="center">

			<view class="column center"
				style="width: 680rpx; background-color: white; border-radius: 10rpx; padding: 20rpx;">

				<text style="">预约信息</text>

				<view class="column"
					style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;">
					<view class="row" style="margin-top: 20rpx; align-items: center; margin-left: 20rpx;">
						<text style="font-size: 22rpx;">发起者</text>
						<image src=""
							style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx;"
							mode=""></image>
						<text style="font-size: 20rpx; margin-left: 15rpx;">苏家辉</text>
					</view>
					<view class="row" style="margin-top: 30rpx; align-items: center; margin-left: 20rpx;">
						<text style="font-size: 22rpx;">参与者</text>

						<view class="row" v-for="(item,index) in 3" style="align-items: center;">

							<view class="" style="position: relative; width: 50rpx; height: 50rpx; display: flex;">
								<image src="" @click="openUserPop()"
									style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx; position: absolute;"
									mode=""></image>

								<view class="center"
									style="width: 50rpx; height: 20rpx; background-color: #FFB7B7; position: absolute; left: 40%; top: -10rpx;">
									<text style="font-size: 10rpx;">黑名单</text>
								</view>
							</view>

							<text
								style="font-size: 20rpx; margin-left: 30rpx; width: 100rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">树下的胖子</text>
						</view>

					</view>

				</view>


				<view class="column"
					style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;font-size: 22rpx;">

					<view class="row" style="justify-content: space-between; margin: 20rpx;">
						<text>开始时间</text>
						<text>2025/08/27 15：30</text>
					</view>
					<view class="row" style="justify-content: space-between; margin: 0 20rpx; 0">
						<text>结束时间</text>
						<text>2025/08/27 17：30</text>
					</view>

					<text style="margin: 30rpx 20rpx; 0">合计：2小时</text>

				</view>

				<view class="column"
					style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
					<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">房间号：304号-大包，30元/小时</text>
					<text style="margin: 10rpx 20rpx;">人数：3人</text>
					<text style="margin: 10rpx 20rpx;">玩法类型：扑克</text>
					<text style="margin: 10rpx 20rpx;">具体规则：斗地主</text>
					<text style="margin: 10rpx 20rpx 20rpx;">补充信息：无</text>
				</view>

				<view class="column"
					style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
					<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">是否禁烟：禁烟</text>
					<text style="margin: 10rpx 20rpx;">性别：不限</text>
					<text style="margin: 10rpx 20rpx 20rpx;">信誉：≧4.0</text>
				</view>

				<view class="column"
					style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
					<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">鸽子费：0元</text>
					<text
						style="margin: 10rpx 20rpx 20rpx; color: #9F9F9F;">组局成功后若有牌友未赴约，其鸽子费平均分给其他牌友。组局成功或失败后鸽子费将全额返还。</text>
				</view>

				<view class="row" style="width: 100%; margin-top: 30rpx;">
					<view class="center" @click="clasePop()"
						style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
						<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
					</view>
					<view class="center"
						style="height: 80rpx; flex: 3; background-color: #1989FA; border-radius: 10rpx; margin-left: 20rpx;">
						<text style="font-size: 24rpx; font-weight: 600; color: white;">参与组局</text>
					</view>
				</view>
			</view>
		</uni-popup>



		<uni-popup ref="userInfo" type="center">

			<view class="column" style="width: 500rpx; background-color: white; padding: 20rpx;">

				<image @click="closeUserPop()" src="/static/ic_close.png"
					style="width: 20rpx; height: 20rpx; margin-left: auto;" mode="">
				</image>

				<view class="row" style="align-items: center;">

					<image src="" style="width: 80rpx; height: 80rpx; background-color: aquamarine; border-radius: 50%;"
						mode="">
					</image>

					<view class="column" style="font-size: 24rpx; margin-left: 20rpx;">

						<text>树下的胖子</text>
						<text style="margin-top: 10rpx;">男，30岁，已参与20次，信誉5.0</text>

					</view>
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx;">
					<text style="font-size: 24rpx;">Ta的评分 </text>
					<text style="font-size: 40rpx; color: #ED3535; margin-left: 10rpx;">4.6</text>
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx;">
					<text style="font-size: 24rpx;">牌品</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx;">
					<text style="font-size: 24rpx;">牌技</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
				</view>

				<text style="font-size: 24rpx; margin-top: 20rpx;">鸽子数 0次</text>


			</view>

		</uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				imgList: [1, 2, 3, 4, 5],
				dataList: [1, 2, 3, 4, 5, 6, 7, 8],
				rateValue: 3.5
			}
		},
		onLoad() {

		},
		methods: {

			openPop() {
				this.$refs.cardInfo.open();
			},

			clasePop() {
				this.$refs.cardInfo.close();
			},

			openUserPop() {
				this.$refs.userInfo.open();
			},
			closeUserPop() {
				this.$refs.userInfo.close();
			},

			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			}


		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img-swiper {
		width: 100%;
		height: 386rpx;
	}

	.slide-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		background-color: aqua;
	}

	/* 网格容器 - 4列布局 */
	.grid-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 4列，每列宽度相等 */
		gap: 20rpx;
		/* 网格间距（行列间距相同） */
	}

	/* 网格项内容 */
	.item-content {
		height: 630rpx;
		background-color: #E6E6E6;
		color: white;
		border-radius: 10rpx;
		font-size: 32rpx;
	}
</style>