<template>
	<view class="page-box" style="padding: 20rpx;">
		<view v-if="info">
			<view  style="padding: 30rpx;background: #FFF;text-align: center;display: flex;align-items: center;justify-content: space-around;">
				<view
				@click="toDiancan"
				style="width: 50%;display: flex;align-items: center;justify-content: center;">
					<u-icon name="file-text-fill" color="#f29100" size="50rpx"></u-icon>
					继续点餐
				</view>
				<view style="height: 30rpx;width: 3rpx;background: #eee;"></view>
				<view style="width: 50%;">
					桌号：{{ info.table.number }}
				</view>
			</view>
			
			<view style="margin-top: 30rpx;background: #FFF;">
				<view style="text-align: center;font-weight: bold;padding: 30rpx;">
					已点菜单
				</view>
				<view v-for="item in info.list" style="padding: 20rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view style="color: #999;font-size: 24rpx;">{{ item.order_no }}</view>
						<view style="font-size: 24rpx;color: #E6A23C;">
							{{ item.create_time }}
						</view>
					</view>
					<view v-for="goodsItem in item.details" style="display: flex;margin-top: 20rpx;">
						<view>
							<image style="width: 100rpx;height: 100rpx;border-radius: 10rpx;" mode="aspectFill" :src="goodsItem.goods_pic"></image>
						</view>
						<view style="flex: 1;font-size: 24rpx;padding-left: 14rpx;">
							<view>
								{{ goodsItem.goods_name }}
							</view>
							<view style="font-size: 22rpx;color: #999;margin: 10rpx;">
								<div class="goods_sky">
									<span v-for="(sku, _index) of goodsItem.goods_sku_json" :key="_index">
										{{ sku.group_name }}：{{ sku.name }}</span>
								</div>
								<div class="tags" style="display: flex;flex-wrap: wrap;" v-if="goodsItem.small_goods_json">
									<div class="tag" v-for="items of  goodsItem.small_goods_json" :key="items.name">
										{{ items.name }}：
										<text v-for="item1 of items.group_item" :key="item1.name" style="padding: 6rpx;">
											<text style="color: #0080ff;">{{ item1.name }}</text>
											<text v-if="item1.price > 0" style="color: red;">
												- {{ item1.price }}元
											</text>
										</text>
									</div>
								</div>
							</view>
						</view>
						<view style="width: 120rpx;text-align: right;">
							<view style="color: #999;font-size: 24rpx;">
								x{{ goodsItem.num }}
							</view>
							<view style="color: red;margin-top: 10rpx;">
								￥{{ goodsItem.price }}
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 0 20rpx 40rpx;text-align: right;">
					合计：<text style="color: red;font-weight: bold;">￥{{ (info.list.reduce((sum, item) => sum + (item.pay_price - 0), 0)).toFixed(2) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				mch_id: 0,
				store_id: 0,
				n_id: 0,
				
				info: null
			}
		},
		computed: {
			
		},
		async onLoad(query) {
			this.mch_id = query.mch_id
			this.store_id = query.store_id
			this.n_id = query.n_id
			this.getOrderInfo(query)
		},
		onShow() {},
		onHide() {},
		methods: {
			async getOrderInfo(query) {
				uni.showLoading({
					title: '加载中'
				})
				let res = await this.$api.common.getFootOrder({
					store_id: query.store_id,
					mch_id: query.mch_id,
					n_id: query.n_id
				})
				uni.hideLoading()
				if (res.code > 0) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				} else {
					this.info = res.data
				}
			},
			toDiancan() {
				uni.reLaunch({
					url: '/pages/takeaway/index?store_id=' + this.store_id + '&mch_id=' + this.mch_id + '&n_id=' + this.n_id + '&is_cont=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>