<template>
	<view class="container">
		<!-- 日期导航 -->
		<view class="date-nav">
			<scroll-view scroll-x class="date-scroll">
				<view class="date-item" :class="currentDate === '07-07' ? 'active' : ''" data-date="07-07">今天 07-07 周六
				</view>
				<view class="date-item" :class="currentDate === '07-07' ? 'active' : ''" data-date="07-07">
					<text class="highlight">07-07</text> 周一
				</view>
				<view class="date-item" data-date="07-08">07-08 周二</view>
				<view class="date-item" data-date="07-09">07-09 周三</view>
				<view class="date-item" data-date="07-10">07-10 周四</view>
				<view class="date-item" data-date="07-11">07-11 周五</view>
			</scroll-view>
		</view>


		<!-- 选择时段 -->
		<text class="label">选择时段</text>
		<view class="time-tabs">
			<view class="time-tab" :class="timeTab === 'morning' ? '' : 'inactive'">
				<image src="/static/ic_meet_02.png" class="time-img1" />上午
			</view>
			<view class="time-tab" :class="timeTab === 'afternoon' ? 'active' : ''">
				<image src="/static/ic_meet_03.png" class="time-img2" />下午
			</view>
		</view>


		<!-- 会议人数 -->
		<text class="label">会议人数</text>
		<input type="number" v-model="formData.peopleNum" placeholder="请输入会议人数" class="meet-num" />


		<!-- 选择会议室 -->
		<text class="label">选择会议室</text>
		<picker :value="meetingRoomIndex" :range="meetingRooms">
			<view class="picker-content">
				<text>{{formData.meetingRoom || '请选择会议室'}}</text>
				<text v-if="formData.meetingRoom" class="room-info">{{meetingRooms[meetingRoomIndex]}}</text>
			</view>
		</picker>


		<!-- 会议主题 -->
		<text class="label">会议主题</text>
		<input type="text" v-model="formData.theme" placeholder="请输入会议名称" class="meet-input" />


		<!-- 会议时间 -->

		<text class="label">会议时间</text>
		<view class="meet-select" @click="chooseCarNumber">
			<text>{{ meetingTime || '请选择会议时间' }}</text>
			<image class="meet-arrow" src="/static/ic_right_arrow_g.png" />
		</view>
		


		<!-- 是否需要签到 -->
		<view class="sgin-in-row">
			<view class="label">是否需要签到</view>
			<view class="radio-label" @click="formData.checkIn = true">
				<view :class="['radio-custom', {checked: formData.checkIn === true}]" />
				<text>是</text>
			</view>
			<view class="radio-label" @click="formData.checkIn = false">
				<view :class="['radio-custom', {checked: formData.checkIn === false}]" />
				<text>否</text>
			</view>
		</view>

		<text class="label">增值服务</text>
		<view class="meet-select" @click="chooseCarNumber">
			<text>会议物品</text>
			<image class="meet-arrow" src="/static/ic_right_arrow_g.png" />
		</view>

		<view class="service-list">
			<view v-for="(data,index) in itemList">
				<view class="label">{{data.type}}</view>
				<view class="service-item" v-for="(item, index) in data.data" :key="index">
					<view class="service-info">
						<text>{{item.name}}</text>
						<text class="price">¥{{item.price}}/{{item.unit}}</text>
					</view>
					<view class="quantity-selector">
						<view class="minus" @tap="decreaseQuantity(index, 'tea')">-</view>
						<input type="number" v-model="item.quantity" disabled class="quantity-input" />
						<view class="plus" @tap="increaseQuantity(index, 'tea')">+</view>
					</view>
				</view>
				<view class="list-line" v-if="index<itemList.length-1"></view>
			</view>
		</view>
		<!-- 备注 -->
		<view class="remark-section">
			<textarea v-model="formData.remark" placeholder="若您还有其他需求，请在这里进行备注~"></textarea>
		</view>


		<!-- 底部按钮 -->
		<view class="footer">
			<view class="total-price">
				<text>¥</text>
				<text>{{totalPrice}}</text>
			</view>
			<button class="submit-btn" @tap="submitForm">发起会议并支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: '07-07',
				timeTab: 'afternoon',
				formData: {
					peopleNum: '',
					meetingRoom: '',
					theme: '',
					checkIn: false,
					remark: ''
				},
				meetingRoomIndex: 1, // 默认选中第二个会议室（3栋2号）
				meetingRooms: [
					'3栋1号会议室 (3078) 可容纳20人 带电视',
					'3栋2号会议室 (5124) 可容纳50人 带投影仪',
					'1栋3号会议室 (1247) 可容纳100人'
				],
				meetingTime: '2025-07-07 14:00-18:00',
				itemList: [{
					type: '茶水',
					data: [{
							id: 1,
							name: '清茶',
							price: 5,
							unit: '杯',
							quantity: 5
						},
						{
							id: 2,
							name: '碧螺春',
							price: 8,
							unit: '杯',
							quantity: 5
						},
						{
							id: 3,
							name: '红茶',
							price: 10,
							unit: '杯',
							quantity: 5
						}
					]
				}, {
					type: '会议物品',
					data: [{
							id: 4,
							name: '清茶',
							price: 5,
							unit: '杯',
							quantity: 5
						},
						{
							id: 5,
							name: '碧螺春',
							price: 8,
							unit: '杯',
							quantity: 5
						},
						{
							id: 6,
							name: '红茶',
							price: 10,
							unit: '杯',
							quantity: 5
						}
					]
				}],

				// 其他物品列表...
				totalPrice: 256
			};
		},
		methods: {


			increaseQuantity(index, category) {
				if (category === 'tea') {
					this.teaList[index].quantity++;
					this.calculateTotalPrice();
				}
				// 其他类别数量增加逻辑...
			},
			decreaseQuantity(index, category) {
				if (this.teaList[index].quantity > 1) {
					this.teaList[index].quantity--;
					this.calculateTotalPrice();
				}
				// 其他类别数量减少逻辑...
			},
			calculateTotalPrice() {
				let total = 0;
				// 计算茶水总价
				this.teaList.forEach(item => {
					total += item.price * item.quantity;
				});
				// 计算其他类别总价...
				this.totalPrice = total;
			},
			submitForm() {
				// 表单验证
				if (!this.formData.peopleNum || !this.formData.meetingRoom) {
					uni.showToast({
						title: '请完善必填信息',
						icon: 'none'
					});
					return;
				}
				// 提交表单逻辑（实际开发需对接API）
				uni.showLoading({
					title: '提交中...'
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '预约成功',
						success: () => {
							// 跳转支付页面或完成预约
						}
					});
				}, 1000);
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding-bottom: 120rpx;
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	/* 日期导航 */
	.date-nav {
		padding: 20rpx 30rpx;
		background: #fff;
		margin-bottom: 20rpx;

		.date-scroll {
			white-space: nowrap;
		}

		.date-item {
			display: inline-block;
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #333;

			&.active {
				color: #4a90e2;
				background: #e8f4ff;
			}

			.highlight {
				color: #4a90e2;
				margin-right: 5rpx;
			}
		}
	}

	.label {
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
	}

	.time-tabs {
		flex: 1;
		flex-direction: row;
		display: flex;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.time-img1 {
			width: 41rpx;
			height: 29rpx;
			margin-right: 15rpx;
		}

		.time-img2 {
			width: 33rpx;
			height: 34rpx;
			margin-right: 17rpx;
		}

		.time-tab {
			width: 152rpx;
			height: 60rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			margin-right: 40rpx;

			&.active {
				background: #2E93FF;
				color: #fff;
			}

			&.inactive {
				background: #EBF5FF;
				color: #808080;
			}
		}
	}

	.meet-num {
		background: #F7F7F7;
		width: 297rpx;
		height: 73rpx;
		font-size: 24rpx;
		align-items: center;
		padding-left: 18rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.meet-input {
		background: #F7F7F7;
		width: 86vw;
		height: 73rpx;
		font-size: 24rpx;
		align-items: center;
		padding-left: 18rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.meet-select {
		width: 86vw;
		height: 73rpx;
		background: #F7F7F7;
		font-size: 24rpx;
		color: #808080;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.meet-arrow {
		width: 11rpx;
		height: 21rpx;
	}

	.meet-text {
		background: #F7F7F7;
		width: 86vw;
		height: 73rpx;
		font-size: 24rpx;
		align-items: center;
		padding-left: 18rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
	}

	.sgin-in-row {
		display: flex;
		align-items: center;
		gap: 24rpx;
		margin-bottom: 30rpx;
	}

	.radio-label {
		font-size: 24rpx;
		color: #0B0B0B;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		cursor: pointer;
	}

	.radio-custom {
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		border: 1rpx solid #007CFF;
		background: #fff;
		margin-right: 12rpx;
		box-sizing: border-box;
		transition: background 0.2s, border 0.2s;
	}

	.radio-custom.checked {
		background: #007CFF;
		border: 1rpx solid #007CFF;
	}

	.service-list {
		background: #F7F7F7;
		padding: 34rpx 20rpx 20rpx 34rpx;

		.service-item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.service-info {
				font-size: 28rpx;
				color: #333;

				.price {
					color: #4a90e2;
					margin-left: 10rpx;
				}
			}

			.quantity-selector {
				display: flex;
				align-items: center;

				.minus,
				.plus {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: 1rpx solid #eee;
					font-size: 36rpx;
					color: #333;
					background: #f5f5f5;
				}

				.quantity-input {
					width: 80rpx;
					height: 60rpx;
					text-align: center;
					margin: 0 10rpx;
					border-top: 1rpx solid #eee;
					border-bottom: 1rpx solid #eee;
				}
			}
		}
	}

	.list-line{
		width: 80vw;
		margin: 26rpx auto 20rpx auto;
		background: #fff;
		height: 1rpx;
	}
	/* 底部按钮 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

		.total-price {
			font-size: 32rpx;
			color: #ff6b00;
			font-weight: bold;

			text:first-child {
				font-size: 28rpx;
			}
		}

		.submit-btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			margin-left: 30rpx;
			background: #4a90e2;
			color: #fff;
			font-size: 32rpx;
			border-radius: 40rpx;
		}
	}
</style>