<template>
	<view class="content column">

		<view class="row" style="margin-top: 150rpx; align-items: center; margin-left: 40rpx;">
			<image src="" style="width: 80rpx; height: 80rpx; background-color: aquamarine; border-radius: 50%;"
				mode=""></image>

			<!-- <text style="margin-left: 50rpx; font-size: 24rpx;">点击登录</text> -->

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

				<view class="row" @click="toEditInfo()" style="align-items: center;">
					<text>树下的胖子</text>
					<image src="/static/edit_info.png" style="width: 30rpx; height: 30rpx; margin-left: 10rpx;" mode="">
					</image>
				</view>
				<text style="margin-top: 10rpx;">UID：123456</text>

			</view>

		</view>


		<view class="column" @click="openPop()"
			style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">

			<!-- <view class="row" style="align-items: center; margin: 20rpx;">
				<image src="/static/no_content.png" style="width: 150rpx; height: 150rpx;" mode=""></image>
				<text style="margin-left: 40rpx;">当前没有预约</text>
			</view> -->

			<text style="font-size: 24rpx; margin-left: 20rpx; margin-top: 25rpx;">2025/08/13 20：00 ~ 2025/08/13 22：00
				共2小时</text>
			<text style="font-size: 24rpx; margin-left: 20rpx; margin-top: 10rpx;">803包厢-大包</text>

			<view class="row"
				style="font-size: 24rpx; margin-left: 20rpx; margin-top: 20rpx; align-items: center; margin-bottom: 20rpx;">
				<text>已预约人员</text>
				<image src="" v-for="(item,index) in 3"
					style="width: 30rpx; height: 30rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 10rpx;"
					mode=""></image>

				<text style="font-size: 24rpx; margin-left: auto; margin-right: 20rpx;">查看详情</text>

			</view>

		</view>


		<view class="column" style="width: 90%; border-radius: 10rpx; background-color: #F2F3F5; margin: 40rpx auto 0;">


			<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;">
				<text style="font-size: 24rpx;">我的评分</text>
				<text style="font-size: 34rpx; color: #ED3535; margin-left: 10rpx;">4.6</text>
				<text style="font-size: 24rpx; margin-left: 180rpx;">我的信誉</text>
				<text style="font-size: 34rpx; color: #ED3535; margin-left: 10rpx;">5.0</text>
			</view>

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

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

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

		</view>

		<view class="row" style="width: 90%; margin: 40rpx auto 0;">

			<view class="column" @click="toAppointment()" style="align-items: center;">
				<image src="/static/appoin_record.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
				<text style="font-size: 24rpx; margin-top: 20rpx;">预约记录</text>
			</view>

			<view class="column" style="align-items: center; margin-left: 40rpx;">
				<image src="/static/problem.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
				<text style="font-size: 24rpx; margin-top: 20rpx;">常见问题</text>
			</view>

			<view class="column" style="align-items: center; margin-left: 40rpx;">
				<image src="/static/customer_s.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
				<text style="font-size: 24rpx; margin-top: 20rpx;">联系我们</text>
			</view>

			<view class="column" @click="toBlacklist()" style="align-items: center; margin-left: 40rpx;">
				<image src="/static/blacklist.png" style="width: 50rpx; height: 50rpx;" mode=""></image>
				<text style="font-size: 24rpx; margin-top: 20rpx;">黑名单</text>
			</view>

		</view>

	</view>


	<uni-popup ref="infoPop" 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>
		</view>
	</uni-popup>


</template>

<script>
	export default {
		data() {
			return {
				rateValue: 4.5
			}
		},
		methods: {

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

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

			toAppointment() {
				uni.navigateTo({
					url: '/pages/me/appointment-record-page'
				});
			},

			toEditInfo() {
				uni.navigateTo({
					url: '/pages/me/edit-info'
				});
			},

			toBlacklist() {
				uni.navigateTo({
					url: '/pages/me/blacklist-page'
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
	}
</style>