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

		<text style="margin-top: 100rpx; text-align: center;">发起预约</text>


		<view class=""
			style="width: 90%; background-color: #F2F3F5; border-radius: 10rpx; margin: 30rpx auto 0; display: flex; justify-content: center;">
			<view class="column" style="width: 95%; margin-bottom: 20rpx;">

				<text style="font-size: 26rpx; margin-bottom: 10rpx; margin-top: 20rpx;">开始时间</text>
				<uni-datetime-picker style="width: 50px;" type="datetime" v-model="startTimeStr" @change="changeLog" />

				<text style="font-size: 26rpx; margin-bottom: 10rpx; margin-top: 30rpx;">结束时间</text>
				<uni-datetime-picker style="margin-top: 10rpx;" type="datetime" v-model="endTimeStr"
					@change="changeLog2" />
				<text v-if="hours!=''" style="font-size: 26rpx; margin-top: 20rpx;">合计：{{hours}}小时{{minutes}}分钟</text>

			</view>
		</view>



		<view class="column" style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #F2F3F5;">
			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">组局名称</text>

			<view class=""
				style="width: 90%; background-color: white; margin-left: 20rpx; margin-top: 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;">
				<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx;" />
			</view>

			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">房间</text>

			<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
				<uni-data-select v-model="roomValue" :localdata="range" @change="change"></uni-data-select>
			</view>

			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">人数</text>

			<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
				<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
			</view>

			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">玩法类型</text>

			<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
				<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
			</view>

			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">具体规则</text>

			<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
				<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
			</view>

			<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">其他补充</text>
			<view class=""
				style="width: 90%; background-color: white; margin-left: 20rpx; margin-top: 20rpx; margin-bottom: 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx;">
				<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx;" />
			</view>

		</view>

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

			<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
				<view class="" style="width: 120rpx; font-size: 26rpx;  align-items: center;">
					是否禁烟
				</view>

				<radio-group class="" style="margin-left: 50rpx;">
					<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>

			<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
				<view class="" style="width: 120rpx; font-size: 26rpx; align-items: center;">
					性别
				</view>
				<radio-group class="" style="margin-left: 50rpx;">
					<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>
					<label class="" style="font-size: 24rpx;">
						<radio value="r3" color="#007aff" style="transform:scale(0.7);" />女
					</label>
				</radio-group>
			</view>

			<view class="row" style="margin-top: 20rpx; margin-left: 20rpx; margin-bottom: 20rpx;">
				<view class="" style="width: 120rpx; font-size: 26rpx; align-items: center;">
					信誉
				</view>

				<view class="counter-container">
					<!-- 减号按钮 -->
					<view class="" @click="decrement" :disabled="currentValue <= 0">
						<uni-icons type="minus" size="24" color="#666" />
					</view>

					<!-- 数值显示 -->
					<view class="counter-value">
						{{ currentValue.toFixed(1) }}
					</view>

					<!-- 加号按钮 -->
					<view class="" @click="increment" :disabled="currentValue >= 5">
						<uni-icons type="plus" size="24" color="#666" />
					</view>
				</view>

			</view>



		</view>

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

			<view class="row" style="margin-top: 20rpx; margin-left: 20rpx;">
				<view class="" style=" font-size: 26rpx; align-items: center;">
					鸽子费（保证金）
				</view>
				<radio-group class="" style="margin-left: 50rpx;">
					<label class="" style="font-size: 24rpx;">
						<radio value="r1" color="#007aff" style="transform:scale(0.7);" :checked="true" />0元
					</label>
					<label class="" style="font-size: 24rpx;">
						<radio value="r2" color="#007aff" style="transform:scale(0.7);" />5元
					</label>
					<label class="" style="font-size: 24rpx;">
						<radio value="r3" color="#007aff" style="transform:scale(0.7);" />10元
					</label>
				</radio-group>
			</view>

			<text
				style="font-size: 24rpx; margin-left: 20rpx; margin-bottom: 20rpx;">除发起者外，其他参与人需缴纳鸽子费。若有参与者在预约后没有赴约，其鸽子费由在场的所有人平分。组局成功或失败后鸽子费将全额返还。</text>
		</view>

		<view class="center" style="width: 90%; border-radius: 10rpx; margin: 20rpx auto 0; background-color: #1989FA;">
			<text style="margin: 20rpx; color: white;">发起预约</text>
		</view>

		<view class="center" style="width: 90%; margin: 20rpx auto 20rpx;">
			<text style="color: #979797; font-size: 24rpx;">组局成功后，发起者可通过店员领取线下红包</text>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				startTimeStr: "",
				endTimeStr: "",
				hours: "",
				minutes: "",
				roomValue: "",
				peopleValue: "",
				range: [{
					"value": 0,
					"text": "808号-大包，30元/小时",
				}, {
					"value": 1,
					"text": "807号-大包，30元/小时",
				}, {
					"value": 2,
					"text": "806号-大包，30元/小时",
				}, {
					"value": 3,
					"text": "805号-大包，30元/小时",
				}, ],

				peopleRange: [{
					"value": 0,
					"text": "1人",
				}, {
					"value": 1,
					"text": "2人",
				}, {
					"value": 2,
					"text": "3人",
				}, {
					"value": 3,
					"text": "4人",
				}, ],
				currentValue: 0,
				// 增加0.5
				increment() {
					if (this.currentValue < 5) {
						this.currentValue += 0.5;
						// 确保不会超过最大值5
						if (this.currentValue > 5) {
							this.currentValue = 5;
						}
					}
				},

				// 减少0.5
				decrement() {
					if (this.currentValue > 0) {
						this.currentValue -= 0.5;
						// 确保不会小于0
						if (this.currentValue < 0) {
							this.currentValue = 0;
						}
					}
				}
			}
		},
		methods: {
			changeLog(e) {
				console.log('change事件:', e);
				this.setTime();
			},
			changeLog2(e) {
				console.log('change事件2:', e);
				this.setTime();
			},


			setTime() {

				if (this.startTimeStr == "" || this.endTimeStr == "") {
					return;
				}

				// 转换为Date对象
				const startTime = new Date(this.startTimeStr.replace(/-/g, '/'));
				const endTime = new Date(this.endTimeStr.replace(/-/g, '/'));

				// 计算毫秒差
				const timeDiff = endTime - startTime;

				// 转换为总分钟数
				const totalMinutes = Math.floor(timeDiff / 1000 / 60);

				// 计算小时和分钟
				this.hours = Math.floor(totalMinutes / 60);
				this.minutes = totalMinutes % 60;

				console.log(`两个时间相差 ${this.hours} 小时 ${this.minutes} 分钟`);
			}

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
	}

	.counter-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 50rpx;
	}

	.counter-btn {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		padding: 0;
		line-height: 1;
	}

	.minus-btn {
		background-color: #f5f5f5;
		border: 1px solid #eee;
	}


	.counter-value {
		width: 120rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}
</style>