<template>
	<view class="content">
		<!-- 出餐地址 -->
		<div class="box_1 flex-col">
			<div class="box_2 flex-row justify-between">
				<div class="tag_1 flex-col" :class="`theme-Union-Class-${BrandInfor['brand_id']}-2`">
					<span class="text_2" :class="`themeColor-${BrandInfor['brand_id']}`">取餐地址</span>
				</div>
				<span class="text_3">{{InforData['restaurant_name']}}</span>
			</div>
			<span class="text_4">{{InforData['restaurant_address']}}</span>
		</div>
		<!-- 出餐状态 -->
		<view class="order-status">
			<template v-if="InforData['status'] == OrderStatus0">
				<view class="order-status-text">
					未支付
				</view>
				<view class="order-status-hint">
					若您已支付可跳转订单列表查看出餐进度
				</view>
			</template>
			<template v-if="InforData['status'] == OrderStatus3">
				<view class="order-status-text">
					出餐失败
				</view>
				<view class="order-status-hint">
					订单金额会在1个工作日内退回 如有疑问，请联系客服处理
				</view>
			</template>
			<template v-if="InforData['status'] == OrderStatus1">
				<view class="order-status-text">
					正在出取餐码
				</view>
				<view class="order-status-hint">
					您也可点击查看订单，等待取餐码
				</view>
				<view class="order-status-waiting-time">
					请凭取餐码到店取餐
				</view>
				<view class="order-status-waiting-time">
					预计等待时间为1-3分钟,五分钟不出取餐码，请立即联系客服
				</view>

				<view class="order-status-waiting-time">
					有时订单可能包含多个取餐码，请留意我的订单
				</view>
			</template>
			<template v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4">
				<view class="order-status-text" :class="`themeColor-${BrandInfor['brand_id']}`">
					请至柜台凭取餐码取餐
				</view>

				<view class="order-status-codetext">
					您的取餐码为
				</view>
				<!-- 您的取餐码为 -->
				<view class="order-status-codelist">
					<view v-for="(item,index) in InforData['codes']" :key="index" class="code">
						{{item}}
					</view>
				</view>

			</template>
		</view>
		<view class="order-btn">
			<view class="order-btn-item btn1" @tap="NavPage()">
				继续点餐
			</view>
			<!-- 未出餐状态点击查看订单跳转订单列表 -->
			<view class="order-btn-item btn2" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`"
				@tap='OrdetrListPage' v-if="InforData['status'] == OrderStatus0">
				查看订单
			</view>
			<!-- 出餐状态下查看订单跳转订单详情 -->
			<navigator v-else
				:url="`/pages/restaurant/order/order-details/order-details?order=${InforData['order_sn']}`"
				hover-class="navigator-hover">
				<view class="order-btn-item btn2" :class="`theme-Union-Class-${BrandInfor['brand_id']}-1`">
					查看订单
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		GetorderInfoAPI
	} from '@/request/restaurant/index.js';
	import mixin from '@/static/js/mixin/mixin.js'
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 定时获取
	let tiem = null;
	// import {
	// 	mapMutations
	// } from 'vuex'
	export default {
		mixins: [mixin, restaurantmixins],
		data() {
			return {
				// 是否返回上一页
				paypage: false,
				InforData: {},
				order_sn: 0,
			};
		},
		onLoad(paramet) {
			this['order_sn'] = paramet['order'];
			if(paramet?.order){
				this['order_sn'] = paramet['order'];
			}else{
				this['order_sn'] = paramet['order_sn'];
			}
			if (paramet?.page) {
				this['paypage'] = paramet['page'];
			};
			console.log('onLoad', this['order_sn'],getApp()['globalData']['parameters'])
		},
		onShow() {
			this.GetorderInfo();
		},
		methods: {
			// ...mapMutations({
			// 	SETNAVINDEX: 'shopping/SETNAVINDEX'
			// }),
			GetorderInfo() {
				console.log('onShow', this['order_sn'])
				clearInterval(tiem);
				tiem = null;
				GetorderInfoAPI({
					order_sn: this['order_sn']
				}).then(data => {
					// data['status'] = 2;
					this['InforData'] = data['data'];
					console.log('要对比的状态', this['OrderStatus1']);
					console.log('当前订单状态', data['data']['status']);
					if (data['data']['status'] == this['OrderStatus0'] || data['data']['status'] == this['OrderStatus1']) {
						this.GetStatus(false);
					} else {
						this.GetStatus(true);
						console.log(tiem, '状态变更停止倒计时');
					}
				})
			},

			/**
			 * @查看订单
			 * */
			OrdetrListPage() {
				this.SETNAVINDEX(1);
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/restaurant/home/home'
					});
				}, 500)
			},
			/**
			 * @回退
			 * */
			NavPage() {
				// 点击继续点餐,设置导航索引
				this.SETNAVINDEX(0);
				setTimeout(()=>{
					uni.redirectTo({
						url: '/pages/restaurant/home/home'
					});
				},200)
			},

			/**
			 * @定时获取订单状态
			 * */
			GetStatus(clear) {
				clearInterval(tiem);
				tiem = null;
				console.log('进入倒计时方法')
				if (!clear) {
					tiem = setInterval(() => {
						console.log('进入倒计时')
						this.GetorderInfo();
					}, 500)
				}

			}
		},
		onUnload() {
			// 页面卸载之后将定时器取消
			this.GetStatus(true);
			console.log(tiem, '离开页面停止倒计时');
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		background-color: #F6F6F6;
	}

	// 顶部地址
	.box_1 {
		background-color: white;
		width: 100%;
		height: 130rpx;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.box_2 {
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		font-size: $FONTSIZE28;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.tag_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border: 1px solid rgba(198, 56, 54, 1);
		display: flex;
		flex-direction: column;
		padding: 10rpx 6rpx;
	}

	.text_2 {
		color: rgba(198, 56, 54, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
	}

	.text_3 {
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		font-family: PingFang-SC-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
		padding-left: 15rpx;
	}

	.text_4 {
		width: 320rpx;
		height: 23rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.order-status {
		width: 100%;
		height: 512rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;

		&-codetext {
			text-align: center;
			color: #333333;
			font-size: $FONTSIZE24;
			margin-bottom: 10rpx;
		}

		&-codelist {
			font-size: 50rpx;
			color: #C63836;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			font-weight: 700;

			.code {
				line-height: 80rpx;
				text-align: center;
				width: 223rpx;
			}
		}

		&-text {
			color: $THEMECOLOR2;
			font-size: $FONTSIZE34;
			margin-bottom: 24rpx;
			font-weight: 700;
		}

		&-hint {
			text-align: center;
			font-size: $FONTSIZE28;
			color: #999999;
			margin-bottom: 72rpx;
		}

		&-waiting-time {
			text-align: center;
			color: #333333;
			font-size: $FONTSIZE24;
			margin-bottom: 10rpx;
		}
	}

	.order-btn {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 86rpx;

		&-item {
			width: 340rpx;
			height: 100rpx;
			border: 1rpx solid;
			font-size: $FONTSIZE28;
			text-align: center;
			line-height: 100rpx;
		}

		.btn1 {
			border-color: #333333;
			color: #333333;
		}

		.btn2 {
			background-color: $THEMECOLOR2;
			color: #ffffff;
		}
	}
</style>
