<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" v-if="ewmflag == false">
			<view class="success-card">
				<!-- 顶部装饰边框 -->
				<view class="top-border"></view>
				<!-- 成功标题 -->
				<view class="success-header">
					<view class="success-title">排队成功</view>
					<view class="success-subtitle">您的卡座由门店安排!</view>
					<view class="menu-dots" @click="btnsx">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uCoMmvJBs6ZxTEV70231" mode=""></image>
					</view>
				</view>
				<!-- 排队信息 -->
				<view class="queue-info">
					<view class="info-item">
						<text class="label">我的号码</text>
						<text class="value highlight">{{queueData.number}}</text>
					</view>
					<view class="info-item">
						<text class="label">号码状态</text>
						<text class="value highlight" v-if="queueData.status == 1">待叫号</text>
						<text class="value highlight" v-if="queueData.status == 2">叫号中</text>
						<text class="value highlight" v-if="queueData.status == 3">已核销</text>
						<text class="value highlight" v-if="queueData.status == 4">已过号</text>
						<text class="value highlight" v-if="queueData.status == 5">已失效</text>
					</view>
					<view class="info-item">
						<text class="label">还需等待</text>
						<text class="value">{{queueData.totalWaitCount == undefined ? '--' : queueData.totalWaitCount}}桌</text>
					</view>
					<view class="info-item">
						<text class="label">预估等待</text>
						<text class="value">{{queueData.totalWaitTime == undefined ? '--' : queueData.totalWaitTime}}分钟</text>
					</view>
					<view class="info-item">
						<text class="label">取号时间</text>
						<text class="value">{{queueData.createTime}}</text>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="bottom-buttons">
					<button class="btn btn-share" @click="cancelQueue">
						取消排队
					</button>
					<button class="btn btn-verify" @click="verifyQueue">
						核销排队
					</button>
				</view>
				<!-- <button class="notify-btn" @click="openNotify">开启消息通知</button> -->
			</view>
		</view>
		<view class="imgewm" v-if="ewmflag == true">
			<view class="" style="width: 100%;text-align: center;font-size: 30rpx;color: #fff;margin-bottom: 50rpx;">
				请出示核销码给商户核销
			</view>
			<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
			<!-- <view class="" style="width: 100%;text-align: center;margin-top: 20rpx;color: #fff;">
				核销码:{{hxma}}
			</view> -->
			<view class="btn"
				@click="ewmflag = false">
				关闭
			</view>
		</view>
		
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#000",
                },
				queueData: {},
				id:'',
				ewmflag:false,
				hxma:''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getQueueInfo()
			this.gethx()
		},
		methods: {
			// 开启消息通知（订阅消息授权）
			openNotify() {
				try {
					wx.requestSubscribeMessage({
						tmplIds: ['SIDHHiiYNogQWa8JUj-RYXsIccqHfPY9cJYm9vKGfic'],
						success: (res) => {
							console.log('subscribe success:', res)
							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' })
				}
			},
			// 获取核销码
			gethx(){
				this.$u.post(`/app/queueUser/generateCode/${this.id}`).then(res => {
					if (res.code == 200) {
						this.hxma = res.data.verificationCode
					}
				})
			},
			// 获取排队信息
			getQueueInfo(queueId) {
				this.$u.get(`/app/queueUser/getDetail?storeId=${this.$store.state.storeId}&id=${this.id}`).then(res => {
					if (res.code == 200) {
						this.queueData = res.data
					}
				})
			},
			// 点击刷新
			btnsx(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$u.get(`/app/queueUser/getDetail?storeId=${this.$store.state.storeId}&id=${this.id}`).then(res => {
					if (res.code == 200) {
						this.queueData = res.data
						uni.hideLoading()
						uni.showToast({
							title: '刷新成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			// 取消排号
			cancelQueue() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要取消排号吗？',
					success: (res) => {
						if (res.confirm) {
							that.$u.post(`/app/queueUser/cancelQueue/${this.id}`).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取消成功',
										icon: 'success'
									});
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}
							})
						}
					}
				});
			},
			
			// 分享给好友
			shareToFriends() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
			},
			
			// 核销排队
			verifyQueue() {
				let that = this						
				uni.showModal({
					title: '核销确认',
					content: '确定要核销当前排队吗？',
					success: (res) => {
						if (res.confirm) {
							that.ewmflag = true
							that.qrFun()
						}
					}
				});
			},
			qrFun: function() {
					this.ewmflag = true
				uQRCode.make({
					canvasId: 'qrcode',
					text: 'https://wx.ccttiot.com/b/v?h=' + this.hxma + '&id=' + this.id,
					size: 300,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #0c0c0c;
	}
	.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;
		margin-top: 50rpx;
	}
	.btn{
		width:300rpx;
		height: 94rpx;
		background: #FF8998;
		border-radius: 47rpx 47rpx 47rpx 47rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		margin: auto;
		line-height: 94rpx;
	}
	.imgewm {
		width: 700rpx;
		height:800rpx;
		margin: auto;
		margin-top: 104rpx;
		z-index: 2;
		background-color: #1C1C1E;
		padding-top: 50rpx;
		border-radius: 30rpx;
	}
	.container {
		padding: 20rpx;
		height: 91vh;
		background: #000;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: 
				linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
				linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
			background-size: 20px 20px;
			pointer-events: none;
		}
	}
	
	.success-card {
		background: #1a1a1a;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin: 20rpx;
		position: relative;
		min-height: 50vh;
		display: flex;
		flex-direction: column;
		
		.top-border {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 8rpx;
			background: #FF8998;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
	
	.success-header {
		position: relative;
		margin-bottom: 60rpx;
		
		.success-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 10rpx;
		}
		
		.success-subtitle {
			font-size: 28rpx;
			color: rgba(255,255,255,0.8);
		}
		
		.menu-dots {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			flex-direction: column;
			gap: 6rpx;
			image{
				width: 50rpx;
				height: 50rpx;
			}
			.dot {
				width: 8rpx;
				height: 8rpx;
				background: #FF8998;
				border-radius: 50%;
			}
		}
	}
	
	.queue-info {
		flex: 1;
		margin-bottom: 60rpx;
		
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid rgba(255,255,255,0.1);
			
			&:last-child {
				border-bottom: none;
			}
			
			.label {
				font-size: 28rpx;
				color: rgba(255,255,255,0.7);
			}
			
			.value {
				font-size: 32rpx;
				color: #fff;
				font-weight: 500;
				
				&.highlight {
					color: #FF8998;
					font-weight: bold;
				}
			}
		}
	}
	
	.cancel-link {
		text-align: center;
		color: rgba(255,255,255,0.8);
		font-size: 28rpx;
		text-decoration: underline;
		margin-bottom: 60rpx;
		padding: 20rpx 0;
	}
	
	.bottom-buttons {
		display: flex;
		gap: 30rpx;
		margin-top: auto;
		
		.btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			border: none;
			margin-top: 30rpx;
			&.btn-share {
				background: transparent;
				color: #fff;
				border: 2rpx solid #fff;
			}
			
			&.btn-verify {
				background: #FF8998;
				color: #fff;
			}
		}
	}
</style>