<template>
	<view class="content">
		<!-- 等待取餐 -->
		<view class="content-code-Infor"
			v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4">
			<view class="content-code-Infor-title" :class="`themeColor-${BrandInfor['brand_id']}`">
				请至柜台凭取餐码取餐
			</view>
			<view class="content-code-Infor-text">
				您的取餐码为
			</view>
			<view class="content-code-Infor-codelist">
				<view v-for="(item,index) in InforData['codes']" class="code" :key="index">
					{{item}}
				</view>
				<!-- <view v-for="(item,index) in 6" class="code" :key="index">
					13221
				</view> -->
				
			</view>
			<view class="content-code-Infor-number">
				<view class="number" v-if="BrandInfor['brand_id'] == 1" :style="{'--color':'#C63836'}">取餐手机尾号</view>
				<view class="number" v-if="BrandInfor['brand_id'] == 5" :style="{'--color':'#FFBC0D'}">取餐手机尾号</view>
				<view>{{InforData['phone_number']}}</view>
			</view>
		</view>
		<!-- 正在出餐 -->
		<view class="content-conduct" v-if="InforData['status'] == OrderStatus1">
			<view class="content-conduct-img">
				<image class="img" :src="qnyurl('wait.png')" mode=""></image>
				<view style="color: #C63836;line-height: 80rpx;">正在出取餐码</view>
				<view>请您注意查收取餐码短信</view>
			</view>
			<view class="content-conduct-wait-text">
				<view style="height: 40rpx;line-height: 40rpx;">
					预计等待时间为2~5分钟
				</view>
				<view style="height: 40rpx;line-height: 40rpx;">
					请凭取餐码到店取餐
				</view>
				<view style="height: 40rpx;line-height: 40rpx;">
					订单可能包含多个取餐码，请留意数量
				</view>
			</view>
		</view>
		<!-- 订单关闭 -->
		<view class="close">
			<view class="close-img">
				<template v-if="InforData['status'] == OrderStatus5">
					<image class="img" :src="qnyurl('close.png')" mode=""></image>
					<view style="color: #C63836;line-height: 80rpx;">订单已关闭</view>
				</template>

				<template v-if="InforData['status'] == OrderStatus3">
					<view style="color: #C63836;line-height: 80rpx;">已退款</view>
					<view class="close-text">订单退款将在1-3个工作日给您原路退回</view>
					<view class="close-text"> 给您带来的不便敬请谅解</view>
				</template>
			</view>
		</view>
		<view class="orders"
			v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1">
			<view class="title">
				餐品详情
			</view>
			<view class="orders-list">
				<template v-for="(item,index) in InforData['goods']">
					<view class="orders-list-item" :key="index">
						<view class="orders-list-item-name">
							{{item['product_name']}}
						</view>
						<view class="orders-list-item-pay">
							￥{{RetainDecimalPoint(item['pay_price'])}}
						</view>
						<view class="orders-list-item-num">
							x{{item['amount']}}
						</view>
					</view>
				</template>
			</view>
			<view class="orders-list-num">
				共{{length}}件
			</view>
		</view>
		<view class="Infor"
			v-if="InforData['status'] == OrderStatus2 || InforData['status'] == OrderStatus4 || InforData['status'] == OrderStatus1">
			<view class="title">
				餐品详情
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					取餐门店
				</view>
				<view class="Infor-item-value">
					{{InforData['restaurant_name']}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					取餐地址
				</view>
				<view class="Infor-item-value">
					{{InforData['restaurant_address']}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					下单时间
				</view>
				<view class="Infor-item-value">
					{{InforData['create_time']}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					订单号
				</view>
				<view class="Infor-item-value">
					{{InforData['order_no']}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					就餐方式
				</view>
				<view class="Infor-item-value">
					{{InforData['eat_type'] == 'EAT_IN'?'堂食':'外带'}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					联系方式
				</view>
				<view class="Infor-item-value">
					{{InforData['phone_number']}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					原价
				</view>
				<view class="Infor-item-value">
					￥{{RetainDecimalPoint(InforData['pay_price'] +  InforData['deduction_amount_total'])}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					补贴卡抵扣
				</view>
				<view class="Infor-item-value">
					￥{{RetainDecimalPoint(InforData['deduction_amount_total'])}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					实际付款
				</view>
				<view class="Infor-item-value">
					￥{{RetainDecimalPoint(InforData['pay_price'])}}
				</view>
			</view>
			<view class="Infor-item">
				<view class="Infor-item-label">
					预估佣金
				</view>
				<view class="Infor-item-value">
					￥{{InforData['self_commission']}}
				</view>
			</view>
		</view>
		<view class="Tips">
			<view class="title">
				友情提示
			</view>
			<view class="Tips-text">
				<view class="">
					1.如遇门店售罄，订单会自动为您取消并原路退款，给您带来不便敬请谅解。
				</view>
				<view class="">
					2.如订单取消，退款将会在1个工作日内退回至您的账户；
				</view>
			</view>
		</view>
		<view class="btn" @tap="location">
			联系客服
		</view>

	</view>
</template>

<script>
	let tiem = null;
	// 混入
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 接口请求
	import {
		GetorderInfoAPI,
	} from '@/request/restaurant/index.js';
	// 客服链接
	import {
		KFCSERVICE
	} from '@/static/js/serviceurl.js'
	export default {
		mixins: [mixin,restaurantmixins],
		data() {
			return {
				InforData: {},
				order_sn: 0
			}
		},
		onLoad(parameter) {
			this['order_sn'] = parameter['order'];
			this.GetorderInfo()
		},
		computed: {
			length() {
				try{
					return this['InforData']['goods'].map(item => {
						return item['amount'];
					}).reduce((total, currentValue) => {
						return total + currentValue
					})
				}catch(e){
					//TODO handle the exception
				}
			}
		},
		methods: {
			GetorderInfo() {
				GetorderInfoAPI({
					order_sn: this['order_sn']
				}).then(data => {
					// data['codes'] = JSON.parse(data['codes'])
					this['InforData'] = data['data'];
					console.log('要对比的状态',this['OrderStatus1'])
					console.log('当前订单状态',data['data']['status'])
					if (data['data']['status'] == this['OrderStatus0'] || data['data']['status'] == this['OrderStatus1']) {
						// tiem不等于null说明已经执行过一次了
						this.GetStatus(false);
					} else {
						this.GetStatus(true);
						console.log(tiem,'状态变更停止倒计时');
					}
				})
			},

			/**
			 * @跳转客服
			 * */
			service() {
				uni.openCustomerServiceChat({
					extInfo: {
						url: KFCSERVICE,
					},
					corpId: 'ww4f46b491a045158c',

					success(e) {
						console.log(e)
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			/**
			 * @定时获取订单状态
			 * */
			GetStatus(clear) {
				console.log('进入倒计时方法');
				clearInterval(tiem);
				tiem = null;
				if(!clear){
					tiem = setInterval(() => {
						console.log('进入倒计时')
						this.GetorderInfo();
					}, 10000)
				}
				
			}
		},
		onUnload() {
			// 页面卸载之后将定时器取消
			this.GetStatus(true);
			console.log(tiem,'离开页面停止倒计时');
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 32rpx 0;
	}
	.title {
		color: #333333;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.content-code-Infor {
		padding: 40rpx;

		&-title {
			color: #C63836;
			font-size: 34rpx;
			text-align: center;
			line-height: 70rpx;
		}

		&-text {
			color: #333333;
			font-size: 28rpx;
			text-align: center;
			text-align: center;
		}

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

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

		&-number {
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			position: relative;
			margin-top: 32rpx;

			.number {
				$b-color:var(--color);
				line-height: 70rpx;

				&::after {
					content: '';
					position: absolute;
					top: 30%;
					left: 0;
					// transform: translateY(-30%);
					width: 230rpx;
					height: 1rpx;
					background-color: $b-color;
				}

				&:before {
					content: '';
					position: absolute;
					top: 30%;
					right: 0;
					// transform: translateY(-30%);
					width: 230rpx;
					height: 1rpx;
					background-color: $b-color;
				}
			}
		}


	}

	.close {
		&-img {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 32rpx;

			.img {
				width: 89rpx;
				height: 89rpx;
				margin-bottom: 20rpx;
			}

			&-text {
				color: #666666;
				font-size: 24rpx;
			}
		}
	}

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

		&-img {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 32rpx;

			.img {
				width: 66rpx;
				height: 79rpx;
				margin-bottom: 20rpx;
			}
		}

		&-wait-text {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;
		}
	}


	.orders-list-num {
		width: 100%;
		line-height: 80rpx;
		text-align: right;
	}

	.orders {
		padding: 32rpx 32rpx 0 32rpx;

		&-list {
			overflow: hidden;
			transition: all 0.5s;
			border-top: 1rpx solid #cccccc;
			border-bottom: 1rpx solid #cccccc;

			&-item {
				line-height: 70rpx;
				display: flex;
				justify-content: space-between;
				font-size: $FONTSIZE28;

				&-pay {
					width: 200rpx;
					text-align: center;
				}

				&-name {
					flex: 1;
				}
			}
		}
	}

	.Infor {
		padding: 0 32rpx 32rpx 32rpx;

		&-item {
			height: 80rpx;
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-label {
				max-width: 300rpx;
				min-width: 300rpx;
				color: #666666;
			}
		}
	}

	.Tips {
		padding: 32rpx;

		&-text {
			font-size: 24rpx;
			color: #666666;
		}
	}

	.btn {
		margin: 60rpx auto;
		width: 310rpx;
		height: 80rpx;
		border: 1rpx solid #666666;
		border-radius: 6rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>
