<template>
	<view class="b-restaurant-order-status">
		<!-- 订单状态 -->
		<!-- 瑞幸订单状态 -->
		<template v-if="InforData['brand_id'] == 13">
			<view class="rx-Order-status style" v-if="InforData['status'] != 2 && InforData['status'] != 4">
				<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus0"
					:src="qnyurl('Unpaid.png','rx')" mode=""></image>
				<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus1"
					:src="qnyurl('NotServed.png','rx')" mode=""></image>
				<image class="rx-Order-status-Img" v-if="InforData['status'] == OrderStatus5"
					:src="qnyurl('cancel.png','rx')" mode=""></image>
				<!-- 订单状态 -->
				<view class="rx-Order-status-Title">
					{{InforData['status'] | OrderState}}
				</view>
				<!-- 未支付 -->
				<template v-if="InforData['status'] == OrderStatus0">
					<view class="rx-Order-status-time">
						剩余付款时间 {{wait_for}}
					</view>
					<view class="rx-Order-status-pay" :style="BtnStyle" @tap="payments">
						立即支付
					</view>
					<view class="rx-Order-status-wait">
						若您已支付请耐心等待商家结算
					</view>
				</template>
				<!-- 待出餐 -->
				<template v-if="InforData['status'] == OrderStatus1">
					<view class="rx-Order-status-wait">
						下单成功，取餐码生成中，请稍后查看
					</view>
				</template>
			</view>
			<!-- 已经出餐 -->
			<view class="rx-Order-status-take style" v-else>
				<view class="rx-Order-status-take-code">
					<text class="text1">取餐码</text>
					<text class="text2">{{InforData['codes'].join('')}}</text>
				</view>
				<view class="rx-Order-status-take-codeimg">
					<img class="img" :src="InforData['qrcode']" alt="">
				</view>
			</view>
		</template>


		<template v-if="InforData['brand_id'] == 10">
			<view class="xbk-Order-status style" v-if="InforData['status'] != 2 && InforData['status'] != 4">
				<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus0"
					:src="qnyurl('Unpaid.png','xbk')" mode=""></image>
				<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus1"
					:src="qnyurl('Unpaid.png','xbk')" mode=""></image>
				<image class="xbk-Order-status-Img" v-if="InforData['status'] == OrderStatus5"
					:src="qnyurl('cancel.png','xbk')" mode=""></image>
				<!-- 订单状态 -->
				<view class="xbk-Order-status-Title">
					{{InforData['status'] | OrderState}}
				</view>
				<!-- 未支付 -->
				<template v-if="InforData['status'] == OrderStatus0">
					<view class="xbk-Order-status-time">
						剩余付款时间 {{wait_for}}
					</view>
					<view class="xbk-Order-status-pay" @tap="payments">
						立即支付
					</view>
					<view class="xbk-Order-status-wait">
						若您已支付请耐心等待商家结算
					</view>
				</template>
				<!-- 待出餐 -->
				<template v-if="InforData['status'] == OrderStatus1">
					<view class="xbk-Order-status-wait">
						排队下单中，请耐心等待
					</view>
					<view class="xbk-Order-status-Tips">
						本页面可关闭，将短信通知取单号，或稍后查询我的订单
					</view>
				</template>
			</view>
			<!-- 已经出餐 -->
			<view class="xbk-Order-status-take style" v-else>
				<view class="codes" v-for="(item,index) in InforData['codes']">
					<view class="codes-img">
						<image class="img" :src="qnyurl('Password.png','xbk')" mode=""></image>
					</view>
					<view class="codes-Password">
						口令{{index+1}}：{{item}}
					</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	export default {
		mixins: [mixin,restaurantmixins],
		name: "b-restaurant-order-status",
		props: {
			InforData: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			BtnStyle() {
				let style = {};
				switch (this['InforData']['brand_id']) {
					case 1:
						style['color'] = uni.$u.addUnit('#C63836');
						style['border'] = uni.$u.addUnit('1px solid #DC7473');
						break;
					case 10:
						style['color'] = uni.$u.addUnit('#ffffff');
						style['background-color'] = uni.$u.addUnit('#00AF66');
						// style['border'] = uni.$u.addUnit('1px solid #00AF66');
						break;
					case 13:
						style['color'] = uni.$u.addUnit('#ffffff');
						style['border'] = uni.$u.addUnit('1px solid #4A6FE7');
						break;
				};
				return style;
			}
		},
		mounted() {
			if (this['InforData']['status'] == this['OrderStatus0']) {
				this.tiem(this['InforData']['status'], this['InforData']['createtime'])
			};
		},
		data() {
			return {};
		},
		methods: {
			payments() {
				this.$emit('payments', {
					order_sn: this['InforData']['order_sn'],
					restaurant_id: this['InforData']['restaurant_id']
				});

			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.b-restaurant-order-status {
		width: 100%;
		height: 100%;

		.style {
			border-radius: 20rpx;
			background-color: #ffffff;
		}

		// 瑞幸待出餐/未支付/已取消状态
		.rx-Order-status {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 35rpx 0;

			&-Img {
				width: 108rpx;
				height: 108rpx;
			}

			&-Title {
				font-size: 36rpx;
				margin-bottom: 20rpx;

			}

			&-time {
				color: #666666;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}

			&-pay {
				width: 220rpx;
				height: 60rpx;
				color: #ffffff;
				font-size: 28rpx;
				background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
				border-radius: 30rpx;
				text-align: center;
				line-height: 60rpx;
			}

			&-wait {
				background: #F7F8FA;
				border-radius: 28rpx;
				padding: 15rpx 30rpx;
				color: #666666;
				font-size: 26rpx;
			}

			// 星巴克
			&-Tips {
				color: #999999;
				font-size: 24rpx;
			}
		}

		// 瑞幸订单完成状态
		.rx-Order-status-take {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 15rpx 0;

			&-code {
				display: flex;
				align-items: center;

				.text1 {
					color: #000000;
					font-size: 26rpx;
					margin-right: 15rpx;
				}

				.text2 {
					color: #4B6FE7;
					font-size: 52rpx;
				}
			}


			&-codeimg {
				width: 234rpx;
				height: 235rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.b-restaurant-order-status {
		width: 100%;
		height: 100%;
	
		.style {
			border-radius: 20rpx;
			background-color: #ffffff;
		}
	
		
	
	}
</style>
