<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="container">
			<!-- 提示信息区域 -->
			<view class="tips-section">
				<view class="tip-item">
					<view class="tip-icon">!</view>
					<text class="tip-text">取号后请留意微信消息提醒</text>
				</view>
				<view class="tip-item">
					<view class="tip-icon">!</view>
					<text class="tip-text">听到叫号请尽快进场,过号10分钟后自动取消排队</text>
				</view>
			</view>

			<!-- 桌型选择区域 -->
			<view class="table-selection">
				<view class="section-title">请选择卡座类型</view>
				<view class="table-cards">
					<view 
					v-for="(item,index) in tableData" :key="index"
						class="table-card" 
						:class="{ 'selected': selectedTable === index }"
						@click="selectTable(item,index)">
						<view class="table-info">
							<view class="table-name">{{item.name}}</view>
							<view class="table-desc">可取号时间：{{item.startTime + '~' + item.endTime}}</view>
							<view class="table-desc" style="flex-wrap: wrap;width: 400rpx;">{{item.description == null ? '--' : item.description}}</view>
						</view>
						<view class="wait-info">
							<view class="wait-text">等待{{item.totalWaitCount}}桌,约{{item.totalWaitTime}}分钟</view>
						</view>
					</view>
				</view>
			</view>
            
			<!-- 取号按钮 -->
			<view class="action-section">
				<button class="get-number-btn" @click="getNumber">立即取号</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#010000",
                },
				selectedTable: '-1', // 默认选中大桌
				tableData: [],
				itemobj:{}
			}
		},
		onLoad() {
           
		},
		onShow() {
			this.getlist()
		},
		methods: {
			
			// 请求排队队伍列表
			getlist(){
				this.$u.get(`/app/queueTeam/list?storeId=${this.$store.state.storeId}`).then(res => {
					if (res.code == 200) {
						this.tableData = res.data
					}else if(res.code == 401){
						uni.showModal({
						  title: '提示',
						  content: '你还未登录，是否去登录？', 
						  success: function (res) {
						    if (res.confirm) {
						      console.log('用户点击确定')
							  uni.reLaunch({
							  	url:'/pages/login/login'
							  })
						    } else if (res.cancel) {
						      console.log('用户点击取消')
							  uni.switchTab({
							  	url:'/pages/index/index'
							  })
						    }
						  }
						})
					}
				})
			},
			
			selectTable(item,index) {
				this.selectedTable = index
				this.itemobj = item
			},
			getNumber() {
				if (this.selectedTable == '-1') {
					uni.showToast({
						title: '请选择桌型',
						icon: 'none',
						duration:3000
					})
					return
				}
				
				// 先请求通知权限，权限获取成功后再取号
				this.requestNotifyPermission()
			},
			
			// 请求通知权限
			requestNotifyPermission() {
				try {
					wx.requestSubscribeMessage({
						tmplIds: ['SIDHHiiYNogQWa8JUj-RYXsIccqHfPY9cJYm9vKGfic'],
						success: (res) => {
							console.log('subscribe success:', res)
							if (res['SIDHHiiYNogQWa8JUj-RYXsIccqHfPY9cJYm9vKGfic'] === 'accept') {
								uni.showToast({ title: '通知权限获取成功', icon: 'success' })
								// 权限获取成功后直接执行取号流程
								setTimeout(() => {
									this.proceedWithGetNumber()
								}, 1000)
							} else {
								uni.showToast({ title: '需要通知权限才能取号', icon: 'none' })
							}
						},
						fail: (err) => {
							console.log('subscribe fail:', err)
							uni.showToast({ title: '授权失败，无法取号', icon: 'none' })
						}
					})
				} catch (e) {
					console.log('subscribe error:', e)
					uni.showToast({ title: '当前环境不支持订阅消息，无法取号', icon: 'none' })
				}
			},
			
			// 执行取号流程
			proceedWithGetNumber() {
				let that = this
				uni.showModal({
					title: '确认取号',
					content: `您选择了${that.itemobj.name}，是否确认取号？`,
					success: (res) => {
						if (res.confirm) {
							let data = {
								storeId:that.$store.state.storeId,
								queueTeamId:that.itemobj.id
							}
							this.$u.post(`/app/queueUser/takeNumber`,data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取号成功',
										icon: 'success',
										duration:3000
									})
									setTimeout(()=>{
										uni.navigateTo({
											url:'/page_shanghu/paidui/hexiao?id=' + res.data
										})
									},1500)
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration:3000
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #010000;
	}

	.container {
		padding: 20rpx;
		// min-height: 100vh;
	}

	.tips-section {
		margin-bottom: 40rpx;
		
		.tip-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.tip-icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #FF8998;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				font-weight: bold;
				margin-right: 16rpx;
				flex-shrink: 0;
			}
			
			.tip-text {
				color: #fff;
				font-size: 28rpx;
				line-height: 1.5;
			}
		}
	}

	.table-selection {
		margin-bottom: 60rpx;
		
		.section-title {
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		
		.table-cards {
			.table-card {
				background: #2a2f3f;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				transition: all 0.3s ease;
				
				&.selected {
					background: #FF8998;
				}
				
				.table-info {
					.table-name {
						color: #fff;
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 8rpx;
					}
					
					.table-desc {
						color: rgba(255, 255, 255, 0.8);
						font-size: 26rpx;
					}
				}
				
				.wait-info {
					.wait-text {
						color: #fff;
						font-size: 26rpx;
					}
				}
			}
		}
	}

	.action-section {
		position: fixed;
		bottom: 40rpx;
		left: 20rpx;
		right: 20rpx;
		
		.notify-btn {
			width: 100%;
			height: 80rpx;
			background: transparent;
			color: #FF8998;
			border: 2rpx solid #FF8998;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
		}
		
		.get-number-btn {
			width: 100%;
			height: 88rpx;
			background: #FF8998;
			color: #fff;
			border: none;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			
			&:active {
				background: darken(#FF8998, 10%);
			}
		}
	}
</style>