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

		<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
			<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
			<text style="font-size: 30rpx;">预约记录</text>
			<view style="width: 40rpx;"></view>
		</view>

		<view class="row" style="width: 90%; margin: 30rpx auto 0; font-size: 26rpx;">
			<text :style="currentIndex == 0?'color:#FA0D0D':'color:#000000'" @click="click1()">我发起的</text>

			<text style="margin-left: 50rpx;" :style="currentIndex == 1?'color:#FA0D0D':'color:#000000'"
				@click="click2()">我参与的</text>
		</view>


		<view class="" style="width: 100%;  overflow-y: auto; margin-top: 30rpx;">

			<view class="column" style="width: 90%; margin: 0 auto 0; font-size: 24rpx;">

				<view class="" v-for="(item,index) in 4"
					style="width: 100%; border-radius: 10rpx; background-color: #F2F3F5; margin-bottom: 40rpx;">

					<view class="column" style="width: 95%; margin: 20rpx auto 20rpx;">


						<view class="row" style="justify-content: space-between;">
							<text>通宵，来高手</text>
							<text>已结束</text>
						</view>

						<view class="row" style="align-items: center; margin-top: 20rpx;">
							<image src="/static/time.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
							<text style="margin-left: 20rpx;">2025/08/27 20:00 ~ 2025/08/28 04：30 \n共8小时30分钟</text>
						</view>

						<view class="row" style="align-items: center; margin-top: 20rpx;">
							<image src="/static/location.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
							<text style="margin-left: 20rpx;">305包厢-大包，4人</text>
						</view>

						<view class="row" style="align-items: center; margin-top: 20rpx;">
							<image src="/static/requirement.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
							<text style="margin-left: 20rpx;">可吸烟、男、信誉≧4.0</text>
						</view>


						<view class="row" style="align-items: center; margin-top: 40rpx;">

							<image src="" v-for="(item,index) in 4"
								style="width: 40rpx; height: 40rpx; background-color: aquamarine; border-radius: 50%; margin-right: 20rpx;"
								mode=""></image>

							<view class="center" @click="openEvaluatePop()"
								style="width: 120rpx; height: 30px; background-color: #1989FA; border-radius: 10rpx; margin-left: auto;">
								<text style="font-size: 24rpx; color: white;">牌友评价</text>
							</view>
						</view>



					</view>

				</view>

			</view>

		</view>
	</view>


	<uni-popup ref="evaluatePop" type="center">
		<view class="" style="width: 650rpx; background-color: white; border-radius: 10rpx;">

			<view class="column" style="width: 90%; margin: 0 auto 0;">

				<text style="font-size: 26rpx; margin-top: 30rpx; text-align: center;">牌友评价</text>

				<text style="font-size: 24rpx; margin-top: 20rpx;">
					请对每位牌友进行评价
				</text>

				<view class="row" @click="openUserPop()"
					style="width: 100%; background-color: #F2F3F5; border-radius: 10rpx; padding-top: 20rpx; padding-bottom: 20rpx; margin-top: 20rpx;">
					<image src=""
						style="width: 40rpx; height: 40rpx; background-color: aqua; border-radius: 50rpx; margin-left: 20rpx;"
						mode=""></image>
					<text style="font-size: 24rpx; margin-left: 20rpx;">树下的胖子</text>

					<image src="/static/down.png"
						style="width: 40rpx; height: 40rpx; margin-left: auto; margin-right: 20rpx;" mode=""></image>

				</view>


				<view class="column"
					style="width: 100%; background-color: #F2F3F5; border-radius: 10rpx; padding-top: 20rpx; padding-bottom: 20rpx; margin-top: 20rpx;">

					<view class="row" style="margin-left: 20rpx; align-items: center;">
						<view class="" style="width: 120rpx; font-size: 26rpx; align-items: center;">
							是否赴约
						</view>
						<radio-group class="" style="margin-left: 50rpx;" @change="keepAppointmentChange">
							<label class="" style="font-size: 24rpx;">
								<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />赴约
							</label>
							<label class="" style="font-size: 24rpx;">
								<radio value="r2" color="#007aff" style="transform:scale(0.7);" />未赴约
							</label>
						</radio-group>
					</view>

					<text
						style="font-size: 24rpx; margin-left: 20rpx; margin-top: 10rpx;">当组局内其他人都选择“未赴约”，视该牌友放鸽子，组局内其他牌友平分其鸽子费</text>

					<text style="font-size: 24rpx; margin-left: 20rpx; margin-top: 30rpx;">当前评分 4.6分</text>


					<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="readonly" v-model="rateValue1" />
					</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="readonly" v-model="rateValue2" />
					</view>


				</view>



				<view class="row" style="margin-top: 50rpx; height: 80rpx; color: white; font-size: 28rpx;">
					<view class="center" style="flex: 1; background-color: #1989FA; border-radius: 10rpx;">
						拉入黑名单
					</view>
					<view class="center"
						style="flex: 1; background-color: #1989FA; margin-left: 20rpx; border-radius: 10rpx;">
						提交
					</view>
				</view>

				<text
					style="font-size: 24rpx; text-align: center; margin-top: 20rpx; margin-bottom: 20rpx;">加入黑名单后，双方将看不到对方发起的组局</text>

			</view>

		</view>

	</uni-popup>

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

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

			<view class="row" v-for="(item,index) in 3"
				style="width: 100%; background-color: #F2F3F5; border-radius: 10rpx; padding-top: 20rpx; padding-bottom: 20rpx; margin-top: 20rpx;">
				<image src=""
					style="width: 40rpx; height: 40rpx; background-color: aqua; border-radius: 50rpx; margin-left: 20rpx;"
					mode=""></image>

				<text style="font-size: 24rpx; margin-left: 20rpx;">树下的胖子</text>

			</view>

		</view>

	</uni-popup>


</template>

<script>
	export default {
		data() {
			return {

				currentIndex: 0,
				rateValue1: 0,
				rateValue2: 0,
				keepAppointment: '',
				readonly: false,

			}
		},
		methods: {

			goBack() {
				// 返回上一页
				uni.navigateBack({
					delta: 1
				});
			},

			click1() {
				this.currentIndex = 0;
			},
			click2() {
				this.currentIndex = 1;
			},

			openEvaluatePop() {
				this.$refs.evaluatePop.open();
			},

			openUserPop() {
				this.$refs.userPop.open();
			},


			keepAppointmentChange(e) {
				this.keepAppointment = e.detail.value;

				if (this.keepAppointment == "r1") {
					this.readonly = false;
				} else {
					this.readonly = true;
					this.rateValue1 = 0;
					this.rateValue2 = 0;
				}

			}


		}
	}
</script>

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