<template>
	<view class="container">
		<block v-if="!dataform.queueInfo">
			<image class="top_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_bg.png"
				mode="aspectFill"></image>
			<view class="content">
				<image class="top_img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_img.png"
					mode="aspectFill"></image>
				<view class="head">
					<image class="avatar" :src="dataform.shopInfo.logo" mode="aspectFill"></image>
					<view class="head_text">
						<text class="shopName">{{shopInfo.shopName}}</text>
						<text class="tip">{{dataform.shopInfo.status == 1 ? '营业中' : '休息中'}}</text>
					</view>
				</view>
				<view class="center">
					<view class="center_head">
						<text>餐桌类型</text>
						<text>等待桌数</text>
						<text>预计等待</text>
					</view>
					<view class="center_list" v-for="(item,index) in tableList" :key="index">
						<view class="w center_list_item">
							<text>{{item.name||''}}</text>
							<text>{{item.note||''}}</text>
						</view>
						<view class="w center_list_item">
							<text>{{item.waitingCount}}</text>
							<text>桌</text>
						</view>
						<view class="w time">约{{item.waitTime}}分钟</view>
					</view>

				</view>
			</view>
			<view class="addBtn" @click="dataform.show = true" v-if="dataform.shopInfo.status == 1">
				立即排队
			</view>
		</block>

		<block v-else>
			<view class="result"
				style="background: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_su_bg.png') no-repeat center 26rpx / 96%;">
				<view class="head">
					<u-icon name="checkmark-circle-fill" color="#fff" size="40"></u-icon>
					<view class="title">排队成功</view>
				</view>
				<view class="center">
					<view class="center_top">
						<view class="shopName">{{dataform.shopInfo.shopName}}</view>
						<view class="tip">当前门店</view>
					</view>
					<view class="sort">{{dataform.queueInfo.callNum}}</view>
					<view class="note">{{dataform.queueInfo.tableName}}{{dataform.queueInfo.tableNote||''}}</view>
				</view>
				<view class="footer">
					<view class="footer_item">
						<view class="footer_item_top"><text>{{dataform.queueInfo.waitingCount}}</text><text>桌</text>
						</view>
						<view class="footer_item_bom">前方等待桌数</view>
					</view>
					<view class="footer_item">
						<view class="footer_item_top"><text>≥{{dataform.queueInfo.waitTime||''}}</text><text>分钟</text>
						</view>
						<view class="footer_item_bom">预计等待时长</view>
					</view>
				</view>
				<view class="result_btn">
					<view class="subscribe" @click="subscribe">
						订阅通知
					</view>
					<view class="cancelBtn" @click="cancelTakeNumber">
						取消排队
					</view>
				</view>


			</view>
		</block>

		<!-- 立即排队 -->
		<up-popup :show="dataform.show" mode="center" @close="close" round="18" :safeAreaInsetBottom="false">
			<view class="add_content">
				<view class="head">
					<view></view>
					<view class="title">取号</view>
					<u-icon name="close-circle-fill" color="#666" size="30" @click="close"></u-icon>
				</view>
				<view class="center">
					<view>
						<view class="title">选择桌型</view>
						<view class="tablelist">

							<view class="tablelist_item" :class="{'active': item.id == dataform.callTableId }"
								v-for="(item,index) in tableList" :key="index" @click="tableCut(item)">
								<view>{{item.name||''}}</view>
								<view>{{item.note||''}}</view>
							</view>

						</view>
					</view>
					<view>
						<view class="title">手机号码</view>
						<u--input type="number" placeholder="填写号码" border="surround"
							v-model="dataform.phone"></u--input>
					</view>
				</view>
				<view class="footer">
					<view @click="close">取消</view>
					<view @click="getTakeNumber">确认取号</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';

	//接口引入
	import {
		APIcallTabletakeNumber,
		APIusercallTable,
		APIqueuecallTable,
		APIqueuedetail,
		APIcallTablesubMsg
	} from "@/common/api/subscribeto.js";

	// 获取全局属性
	const {
		proxy
	} = getCurrentInstance();

	const queueUpList = ref([])

	const tableList = ref([])

	const dataform = reactive({
		show: false,
		phone: "",
		callTableId: "",
		shopInfo: {
			logo: '',
			shopName: ''
		},
		queueInfo: null,
		shopId: "",
		queueId: "",
	})

	// 解码
	const getQueryString = (url, name) => {
		var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
		var r = url.substr(1).match(reg)
		if (r != null) {
			return r[2]
		}
		return null;
	}

	// 获取排号状态
	const getQueueUpState = async () => {
		let params = {
			shopId: dataform.shopId,
		}
		if (dataform.queueId) {
			params.queueId = dataform.queueId;
		}
		let res = await APIusercallTable(params)

		if (res) {
			dataform.shopInfo = res.data.shopInfo;
			dataform.queueInfo = res.data.queueInfo;
			dataform.queueId = dataform.queueInfo.id;
		}
	}

	// 获取排号数据
	const getQueueUpList = async () => {
		let res = await APIqueuecallTable({
			shopId: dataform.shopId,
		})
		if (res) {
			queueUpList.value = res.data;
		}
	}

	// 叫号队列详情
	const getQueueUpTablList = async () => {
		let res = await APIqueuedetail({
			shopId: dataform.shopId,
			openId: uni.cache.get('userInfo').wechatOpenId,
		})
		if (res.queueInfo) {
			tableList.value = res.data;
			
		} else {
			getQueueUpState()
		}
	}

	// 订阅通知
	const subscribe = async () => {
		let res = await APIcallTablesubMsg({
			openId: uni.cache.get('userInfo').wechatOpenId,
			shopId: dataform.shopId,
			queueId: dataform.queueId,
		})
		if (res) {
			uni.showToast({
				title: '订阅成功',
				icon: 'none'
			});
			uni.requestSubscribeMessage({
				tmplIds: ["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw",
					"yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM",
					"3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"
				],
				complete() {

				},
			})
		}
	}

	// 取号
	const getTakeNumber = async () => {
		if (dataform.phone == "" || dataform.phone == null) {
			uni.showToast({
				title: '请填写手机号',
				icon: 'none'
			});
			return;
		}
		let res = await this.api.getTakeNumber({
			openId: uni.cache.get('miniAppOpenId'),
			shopId: dataform.shopId,
			phone: dataform.phone,
			callTableId: dataform.callTableId,
		})
		if (res.code == 0) {
			dataform.phone = "";
			dataform.queueId = res.data.id;
			getQueueUpState();
			dataform.show = false;
			uni.requestSubscribeMessage({
				tmplIds: ["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw",
					"yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM",
					"3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"
				],
				complete() {

				},
			})
		}

	}

	// 取消排队
	const cancelTakeNumber = async () => {
		let res = await this.api.cancelTakeNumber({
			queueId: dataform.queueInfo.id,
			shopId: dataform.shopId,
		})
		if (res) {
			getQueueUpTablList();
			getQueueUpState();
		}
	}

	// 切换桌型
	const tableCut = (item) => {
		dataform.callTableId = item.id;
	}

	// 弹窗关闭监听
	const close = async () => {
		this.phone = "";
		if (tableList.value.length > 0) {
			dataform.callTableId = tableList.value[0].id;
		}
		dataform.show = false;
	}

	onMounted(async () => {
		await proxy.$onLaunched;
		// 获取当前页面栈
		const pages = getCurrentPages();
		// 获取当前页面实例
		const currentPage = pages[pages.length - 1];
		// 获取页面参数
		const options = currentPage.options;

		// #ifdef MP-WEIXIN
		if (options.q) {
			dataform.shopId = getQueryString(decodeURIComponent(options.q), 'shopId')
			dataform.queueId = getQueryString(decodeURIComponent(options.q), 'queueId')
		}
		// #endif
		console.log(dataform.shopId, 11)
		// #ifdef MP-ALIPAY
		if (getApp().globalData.shopId) {
			dataform.shopId = getApp().globalData.shopId
		}
		if (getApp().globalData.queueId) {
			dataform.queueId = getApp().globalData.queueId
		}
		// #endif
		await nextTick()
		getQueueUpTablList();
	})
</script>

<style scoped lang="scss">
	page {
		// background: #f6f6f6;
	}

	.top_bg {
		width: 100%;
		height: 320rpx;
		position: absolute;
		z-index: 1;
		top: 0;
	}

	.content {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		padding: 48rpx 32rpx;

		.top_img {
			width: 282rpx;
			height: 222rpx;
			position: absolute;
			top: 20rpx;
			right: 26rpx;
		}

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

			.avatar {
				width: 96rpx;
				height: 96rpx;
				margin-right: 16rpx;
				border-radius: 50%;
			}

			.head_text {
				display: flex;
				flex-direction: column;

				.shopName {
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-bottom: 10rpx;
				}

				.tip {
					background: #F6FAFF;
					border-radius: 4rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #318AFE;
					padding: 4rpx 10rpx;
					align-self: flex-start;
				}
			}
		}

		.center {
			background-color: #fff;
			border-radius: 18rpx;
			display: flex;
			flex-direction: column;
			margin-top: 48rpx;

			.center_head {
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FAFAFA;
				border-radius: 18rpx 18rpx 0rpx 0rpx;

				text {
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.center_list {
				display: flex;
				align-items: center;
				padding: 32rpx 0;

				.w {
					width: 33.333%;
					text-align: center;
				}

				.center_list_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					text {}

					text:nth-child(1) {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 12rpx;
					}

					text:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.time {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.addBtn {
		width: 530rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #000000;
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 16rpx auto 64rpx auto;
	}


	.add_content {
		width: 594rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;

			.title {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.center {
			display: flex;
			flex-direction: column;
			padding: 32rpx;

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 24rpx;
			}

			.tablelist {
				display: flex;
				flex-wrap: wrap;

				.tablelist_item {
					min-width: 200rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #E5E5E5;
					margin-right: 32rpx;
					margin-bottom: 32rpx;

					view:nth-child(1) {
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						padding: 24rpx 0 16rpx 0;
						border-bottom: 1rpx dashed #E5E5E5;
					}

					view:nth-child(2) {
						text-align: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						padding: 16rpx 0 24rpx 0;
					}
				}

				.active {
					border: 2rpx solid #FFB562;
				}
			}

		}

		.footer {
			display: flex;

			view {
				width: 50%;
				height: 94rpx;
				line-height: 94rpx;
				text-align: center;
				border-top: 1rpx solid #E5E5E5;
				font-weight: bold;
				font-size: 32rpx;
				color: #333;
			}

			view:nth-child(1) {
				color: #999999;
				border-right: 1rpx solid #E5E5E5;
			}
		}
	}

	.result {
		padding: 32rpx 20rpx 32rpx 20rpx;
		display: flex;
		flex-direction: column;

		.result_bg {
			padding: 0 12rpx;
		}

		.head {
			height: 192rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 44rpx;
				color: #333333;
				margin-left: 16rpx;
			}
		}

		.center {
			display: flex;
			flex-direction: column;
			align-items: center;

			.center_top {
				display: flex;
				align-items: center;
				margin-top: 74rpx;

				.shopName {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					margin-right: 16rpx;
				}

				.tip {
					padding: 4rpx 10rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 18rpx;
					color: #333333;
					background-color: #E1E1E1;
					border-radius: 4rpx
				}
			}

			.sort {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 80rpx;
				color: #333333;
				margin-top: 104rpx;
			}

			.note {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #999999;
				margin-top: 44rpx;
				margin-bottom: 84rpx;
			}
		}

		.footer {
			border-top: 1rpx dashed #E5E5E5;
			padding-top: 70rpx;
			display: flex;
			margin-bottom: 64rpx;

			.footer_item {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.footer_item_top {
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: center;

					text:nth-child(1) {
						font-weight: bold;
						font-size: 64rpx;
						color: #FFB562;
					}

					text:nth-child(2) {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						margin-bottom: 12rpx;
					}
				}

				.footer_item_bom {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 16rpx;
				}
			}

			.footer_item:nth-child(1) .footer_item_top {
				border-right: 1rpx solid #E5E5E5;
			}
		}

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

			view {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 56rpx;
				border: 2rpx solid #333333;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.subscribe {
				width: 336rpx;
				margin: 64rpx auto;
			}

			.cancelBtn {
				width: 336rpx;



				margin: 64rpx auto;
			}
		}

	}
</style>