<template>
	<view class="page">
		<u-navbar title="发起拼桌" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<view class="titname">
			{{type == 1 ? '现场拼桌' : '预约拼桌'}} · 发起流程
		</view>
		<view class="liucheng">
			确认信息发起拼桌 <image src="https://api.ccttiot.com/smartmeter/img/static/ujeQgqQFvkb9HmxKjtQM" mode=""></image>
			完成拼桌发布 <image src="https://api.ccttiot.com/smartmeter/img/static/ujeQgqQFvkb9HmxKjtQM" mode=""></image>
			可到我的记录查看
		</view>
		<view class="renshu">
			<view class="lt">
				拼桌名称
			</view>
			<view class="rt">
				<input style="width: 300rpx;background-color: #1C1C1E;color: #fff;text-align: right;padding-right: 20rpx;" type="text" v-model="zhuoname" placeholder="请输入拼桌名称" />
			</view>
		</view>
		<view class="time">
			<view class="lt">
				选择时间
			</view>
			<view class="rt" @click="show = true">
				{{timexz}}
				<image src="https://api.ccttiot.com/smartmeter/img/static/ujFT5G1uPwxsayObwgRg" mode=""></image>
			</view>
		</view>
		<view class="zhuohao">
			<view class="lt">
				我的桌号
			</view>
			<view class="rt">
				<view class="sm" @click="btnsaoma">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ue2AHNyX7ShjsxlDgIIv" mode=""></image>
					扫码获取
				</view>
				<text>|</text>
				<view class="xz" @click="addmenflag = true">
					{{kazuoid}}
					<image src="https://api.ccttiot.com/smartmeter/img/static/ujFT5G1uPwxsayObwgRg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="renshu">
			<view class="lt">
				期望拼桌人数
			</view>
			<view class="rt">
				<view class="jian" @click="btnjian">
					-
				</view>
				<input type="text" :disabled="true" v-model="renshunum" />
				<view class="add" @click="btnadd">
					+
				</view>
			</view>
		</view>
		<view class="xingbie">
			<view class="lt">
				期望性别
			</view>
			<view class="rt">
				<view :class="xbindex == 3 ? 'actives' : ''" @click="btnnum(3)">
					男女不限
				</view>
				<view :class="xbindex == 2 ? 'actives' : ''" @click="btnnum(2)">
					偏好女性
				</view>
				<view :class="xbindex == 1 ? 'actives' : ''" @click="btnnum(1)">
					偏好男性
				</view>
			</view>
		</view>
		<view class="zhuti">
			<text></text> 拼桌主题
		</view>
		<view class="container">
			<view class="prompt">
				写一个吸引人的拼桌主题吧，主题越真诚成功率越高，本次拼桌对玩什么已有期待，也可以作为主题哦~
			</view>
			<textarea class="textarea" placeholder="请输入拼桌主题" v-model="themeText" maxlength="20"></textarea>
			<view class="char-count">
				{{ themeText.length }}/20
			</view>
		</view>
		<view class="sm">
			拼桌发起后有人加入，大家将通过拼桌内群进行联系
		</view>

		<view class="anniu" @click="btnpinzhuo">
			发起拼桌
		</view>
		<u-picker v-model="show" :params="params" mode="time" @confirm="confirm"></u-picker>

		<!-- 投放位置选择弹窗 -->
		<view class="seat-selector" :class="{ 'show': addmenflag }" v-show="addmenflag">
			<view class="selector-header">
				<view class="title">选择卡座位置</view>
				<view class="floor-tabs">
					<view v-for="floor in floors" :key="floor.id"
						:class="['floor-tab', currentFloor === floor.id ? 'active' : '']"
						@click="selectFloor(floor.id)">
						{{floor.name}}
					</view>
				</view>
			</view>
			<view class="selector-content">
				<view class="area-list">
					<view v-for="area in areas" :key="area.id"
						:class="['area-item', currentArea === area.id ? 'active' : '']" @click="selectArea(area.id)">
						{{area.name}}
					</view>
				</view>
				<view class="seat-grid">
					<view v-for="seat in seats" :key="seat.id"
						:class="['seat-item', currentSeat === seat.id ? 'active' : '']" @click="selectSeat(seat)">
						{{seat.name}}
					</view>
				</view>
			</view>
			<view class="selector-footer">
				<view class="btn cancel" @click="addmenflag = false">取消</view>
				<view class="btn confirm" @click="confirmSeatSelection">确认</view>
			</view>
		</view>
		<view class="mask" v-if="addmenflag"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#010000",
				},
				xbindex: 3,
				renshunum: 1,
				themeText: '',
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				timexz: '请选择',
				kazuoid: '请选择',
				addmenflag: false,
				currentFloor: '',
				currentArea: '',
				currentSeat: '',
				selectedPosition: '',
				floors: [],
				areas: [],
				seats: [],
				
				fenquid:'',
				zuoweiid:'',
				type:'',
				zhuoname:''
			}
		},
		onLoad(option) {
			this.type = option.type
			this.getlouceng()
		},
		methods: {
			// 点击发起拼桌
			btnpinzhuo(){
				let data = {
					storeId:this.$store.state.storeId,
					boothId:this.currentSeat,
					name:this.zhuoname,
					prefer:this.xbindex, 
					type:this.type, //1是现场 2是预约 this.type
					topic:this.themeText,
					limitNum:this.renshunum,
					bookTime:this.timexz
				}
				this.$u.post('/app/team/createTeam',data).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '创建成功',
							icon: 'success',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:2000
						})
					}
				})
			},
			// 查询楼层列表
			getlouceng() {
				this.$u.get(`/bst/part/list?storeId=${this.$store.state.storeId}&pageNum=1&pageSize=99&isFloor=true`)
					.then(res => {
						if (res.code === 200) {
							this.floors = []
							res.data.forEach(item => {
								if (item.parentId == null) {
									this.floors.push({
										id: item.partId,
										name: item.partName
									})
								}
							})
							if (this.floors.length > 0) {
								this.fenquid = this.floors[0].id
								this.currentFloor = this.floors[0].id
								this.getfenqu()
							}
						}
					})
			},
			// 查询分区
			getfenqu() {
				if (this.floors.length > 0) {
					this.$u.get(`/bst/part/list?parentId=${this.fenquid}&pageNum=1&pageSize=99`).then(res => {
						if (res.code === 200) {
							this.areas = []
							res.data.forEach(item => {
								this.areas.push({
									id: item.partId,
									name: item.partName
								})
							})
							if (this.areas.length > 0) {
								this.zuoweiid = this.areas[0].id
								this.currentArea = this.areas[0].id
								this.getkazuo()
							}
						}
					})
				}
			},
			// 查询卡座
			getkazuo() {
				if (this.areas.length > 0) {
					this.$u.get(`/bst/booth/list?partId=${this.zuoweiid}&pageNum=1&pageSize=99`).then(res => {
						if (res.code === 200) {
							this.seats = []
							res.rows.forEach(item => {
								this.seats.push({
									id: item.boothId,
									name: item.boothName
								})
							})
						}
					})
				}
			},
            // 切换楼层
			selectFloor(floorId) {
				this.currentFloor = floorId
				this.fenquid = floorId
				this.getfenqu()
			},
			//切换分区
			selectArea(areaId) {
				this.currentArea = areaId
				this.zuoweiid = areaId
				this.getkazuo()
			},
			// 切换卡座
			selectSeat(seat) {
				this.currentSeat = seat.id
				console.log(seat,this.currentSeat);
			},
			confirmSeatSelection() {
				const floor = this.floors.find(f => f.id === this.currentFloor)
				const area = this.areas.find(a => a.id === this.currentArea)
				const seat = this.seats.find(s => s.id === this.currentSeat)
				if (floor && area && seat) {
					this.selectedPosition = `${floor.name}-${area.name}-${seat.name}`
					this.kazuoid = `${seat.name}`
					this.addmenflag = false
				} else {
					uni.showToast({
						title: '请选择完整的位置信息',
						icon: 'none'
					})
				}
			},
			// 点击选择时间
			confirm(e) {
				this.timexz = e.year + '-' + e.month + '-' + e.day + '  ' + e.hour + ':' + e.minute
			},
			// 选择期望性别
			btnnum(num) {
				this.xbindex = num
			},
			// 点击添加人数
			btnadd() {
				this.renshunum++
			},
			// 点击减少人数
			btnjian() {
				if (this.renshunum == 1) {
					uni.showToast({
						title: '期望人数最少为1人',
						icon: 'none',
						duration: 2000
					})
				} else {
					this.renshunum--
				}
			},
			// 扫码获取桌号
			btnsaoma() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						const getQueryParam = (url, paramName) => {
							const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							const results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						const sceneValue = res.result
						const decodedValue = decodeURIComponent(sceneValue)
						this.kazuoid = getQueryParam(decodedValue, 'k')
						console.log(this.kazuoid, res);
						if (!this.kazuoid) {
							uni.showModal({
								title: '提示',
								content: '无效的二维码',
								confirmText: '知道了',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {}
								}
							})
							return
						}
					},
					fail: err => {
						uni.showToast({
							title: '扫描失败，请重试',
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #010000;
		padding: 0 38rpx;
		box-sizing: border-box;
	}

	.actives {
		color: #FF8998 !important;
	}

	.seat-selector {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 58vh;
		background-color: #0B0B0B;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 999;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		transform: translateY(100%);
		transition: transform 0.3s ease-out;

		&.show {
			transform: translateY(0);
		}

		.selector-header {
			padding: 40rpx 30rpx;

			.title {
				font-size: 32rpx;
				color: #fff;
				margin-bottom: 30rpx;
			}

			.floor-tabs {
				display: flex;
				gap: 20rpx;

				.floor-tab {
					padding: 10rpx 40rpx;
					background: #1A1A1A;
					color: #fff;
					border-radius: 10rpx;
					font-size: 28rpx;

					&.active {
						background: #FF8998;
					}
				}
			}
		}

		.selector-content {
			display: flex;
			height: calc(100% - 300rpx);

			.area-list {
				width: 200rpx;
				background: #1A1A1A;
				// padding: 20rpx 0;

				.area-item {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;

					&.active {
						background: #FF8998;
					}
				}
			}

			.seat-grid {
				flex: 1;
				padding: 20rpx;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;
				overflow-y: auto;

				.seat-item {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #1A1A1A;
					color: #fff;
					border-radius: 10rpx;
					font-size: 28rpx;

					&.active {
						background: #FF8998;
					}
				}
			}
		}

		.selector-footer {
			position: absolute;
			bottom: 44rpx;
			left: 0;
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background: #0B0B0B;

			.btn {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 28rpx;

				&.cancel {
					background: #1A1A1A;
					color: #fff;
				}

				&.confirm {
					background: #FF8998;
					color: #fff;
				}
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 998;
		opacity: 0;
		transition: opacity 0.3s ease-out;

		&.show {
			opacity: 1;
		}
	}

	.time {
		width: 674rpx;
		height: 100rpx;
		background: #1C1C1E;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.lt {
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.rt {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #FFFFFF;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.anniu {
		width: 674rpx;
		height: 100rpx;
		background: #FF8998;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #010000;
		text-align: center;
		line-height: 100rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
	}

	.sm {
		font-weight: 400;
		font-size: 24rpx;
		color: #7390B0;
	}

	.prompt {
		background-color: #333;
		padding: 15px;
		border-radius: 5px;
		margin-bottom: 15px;
		font-size: 24rpx;
		color: #808080;
		margin-top: 22rpx;
	}

	.textarea {
		width: 100%;
		height: 200rpx;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
		color: #fff;
	}

	.char-count {
		text-align: right;
		color: #ccc;
	}

	.zhuti {
		display: flex;
		align-items: center;

		text {
			width: 6rpx;
			height: 30rpx;
			background: #FF8998;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
			margin-right: 18rpx;
		}

		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 22rpx;
	}

	.titname {
		margin-top: 48rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.xingbie {
		width: 674rpx;
		height: 100rpx;
		background: #1C1C1E;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.lt {
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.rt {
			display: flex;
			align-items: center;

			view {
				width: 136rpx;
				height: 42rpx;
				background: #010000;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				text-align: center;
				line-height: 42rpx;
				border-radius: 20rpx;
				margin-left: 18rpx;
			}
		}
	}

	.renshu {
		width: 674rpx;
		height: 100rpx;
		background: #1C1C1E;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin-top: 22rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;
		box-sizing: border-box;

		.lt {
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.rt {
			display: flex;
			align-items: center;

			input {
				width: 102rpx;
				height: 36rpx;
				background: #555B61;
				text-align: center;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: 0 14rpx;
			}

			.jian {
				width: 36rpx;
				height: 36rpx;
				background: #7390B0;
				text-align: center;
				line-height: 36rpx;
				color: #000;
				border-radius: 50%;
			}

			.add {
				width: 36rpx;
				height: 36rpx;
				background: #7390B0;
				text-align: center;
				line-height: 36rpx;
				color: #000;
				border-radius: 50%;
			}
		}
	}

	.zhuohao {
		width: 674rpx;
		height: 100rpx;
		background: #1C1C1E;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;
		box-sizing: border-box;
		margin-top: 22rpx;

		.lt {
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.rt {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #7390B0;

			.sm {
				display: flex;
				align-items: center;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}

			text {
				margin-left: 20rpx;
				margin-right: 20rpx;
			}

			.xz {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.liucheng {
		display: flex;
		align-items: center;
		margin-top: 22rpx;
		font-size: 24rpx;
		color: #7390B0;

		image {
			width: 50rpx;
			height: 10rpx;
			margin-left: 8rpx;
			margin-right: 8rpx;
		}
	}
</style>