<template>
	<view class="all-container  pd-main  font15">
		<view class="mart20 backcorfff" v-if="orderDetail">
			<!-- <view class="dis-flex flex-wrap" >
				<view class="width100 dis-flex bor-botm1">
					<view class=" fotct fontwig6 backcor6 titleWidth minheight40">用餐桌名</view>
					<view class="flex-1 fotct ">{{orderDetail.order.tableName}}</view>
				</view>
				<view class="width100 dis-flex bor-botm1">
					<view class=" fotct fontwig6 backcor6 titleWidth minheight40">用餐人数</view>
					<view class="flex-1 fotct ">{{orderDetail.order.peopleNum}}</view>
				</view>
			</view> -->
			<view class="mart20 backcorfff">
				<view class="dis-flex height40 bor-botm1 backcor6">
					<view class="flex-1 fotct fontwig6 " ></view>
					<view class="flex-1 fotct fontwig6">名称</view>
					<view class="flex-1 fotct fontwig6">单价</view>
					<view class="flex-1 fotct fontwig6">数量</view>
					<view class="flex-1 fotct fontwig6">操作</view>
				</view>
				
				<view class="dis-flex bor-botm1 paddtop5 paddbotm5 fon15" v-for="(item,index) in orderDetail.product" @click="cilckToShowDetail(item)" :key="index">
					<view class="flex-1 fotct">
						<image :src="imgUrl+item.productImg"   mode="aspectFit" class="width100 height60 verc"></image>
					</view>
					<view class="flex-1 fotct text1">{{item.productName}}</view>
					<view class="flex-1 fotct">{{item.productPrice}}</view>
					<view class="flex-1 fotct ">{{item.productNum}}</view>
					
					<view class="flex-1 fotct fcor41c " @click.stop="clickToEdit(item)"><text class="icon bianji font15 fcor41c"></text>编辑</view>
				</view>
			</view>
			<view class="width100 fotrt">共计:¥<text class="font20 fontwig6">{{orderDetail.order.orderAmount}}</text></view>
			
		</view>
		
		<!-- 添加菜品按钮 -->
		<!-- <view class="btn-fix">
			<button class="btn" @click="addProduct">添加菜品</button>
		</view> -->
		
		
		<!-- 编辑订单 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog  mode="input" title="输入菜品数量" :before-close="true" :value="productNum"
				placeholder="请输入菜品数量" @confirm="dialogInputConfirm" @close="close"></uni-popup-dialog>
		</uni-popup>
		
		
		<uni-popup ref="popupDetail" type="bottom" background-color="#ffffff">
			<view style="height: 80vh;overflow-y: auto;" class="backcorfff  border-10r-lr pd-main font16">
				<view class="pop-contain pd-main">
					
					<view class="dis-flex height40 bor-botm1">
						<view class="flex-1 fotct fontwig6 " ></view>
						<view class="flex-1 fotct fontwig6">名称</view>
						<view class="flex-1 fotct fontwig6">价格</view>
						<view class="flex-1 fotct fontwig6">分类</view>
						<!-- <view class="flex-1 fotct fontwig6">售卖数量</view> -->
						<view class="flex-1 fotct fontwig6">操作</view>
					</view>
					
					<view class="dis-flex bor-botm1 paddtop5 paddbotm5 fon15" v-for="(item,index) in productList" @click="cilckToShowDetail(item)" :key="index">
						<view class="flex-1 fotct">
							<image :src="imgUrl+item.img" @click.stop="previewImage(imgUrl+item.img)"  mode="aspectFit" class="width100 height60 verc"></image>
						</view>
						<view class="flex-1 fotct text1">{{item.name}}</view>
						<view class="flex-1 fotct">{{item.price}}</view>
						<view class="flex-1 fotct text1">{{item.productCategoryName}}</view>
						<!-- <view class="flex-1 fotct">{{item.saleCount}}</view> -->
						<view class="flex-1 fotct fcor41c " @click.stop="clickToEdit(item)"><text class="icon bianji font15 fcor41c"></text>编辑</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {getStoreProductByList,queryCurrentOrder,operateOrderProduct
	} from '@/Utils/groupBuying.js';
	const app = getApp();
	export default {
		data(){
			return{
				imgUrl: app.globalData.imgUrl, //图片访问地址
				storeId:'',//门店id
				serialNumber:'',//桌台编号
				productList:[],//产品列表
				orderDetail:null,
				productNum:'',//菜品数量
				productId:'',
			}
		},
		
		onLoad(options) {
			this.storeId = options.storeId;
			this.serialNumber = options.serialNumber;
			this.getStoreProductByList();
			this.queryCurrentOrder();
		},
		methods:{
			
			/* 添加菜品 */
			addProduct(){
				this.$refs.popupDetail.open('bottom')
				
				
			},
			
			/* 编辑订单 */
			clickToEdit(item){
				this.productNum = item.productNum;
				this.productId = item.productId;
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(e) {
				let reg = /^[0-9]+$/;
				if (!reg.test(e)) {
					uni.showToast({
						title: '请输入正确的数字哦!',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.productNum = e;
				
				let params={
					"orderNo": this.orderDetail.order.orderNo,
					"productArray": [{
						"productId": this.productId,
						"number": this.productNum
					}]
				}
				
				this.operateOrderProduct(params);
			},
			operateOrderProduct(params){
				uni.showLoading({
					title: '加载中'
				})
				operateOrderProduct(params).then(res=>{
					uni.hideLoading();
					this.$refs.inputDialog.close();
					if (res.return_code == '000000') {
						this.productNum = '';
						this.productId ='';
						this.queryCurrentOrder();
						uni.showToast({
							title: res.return_data,
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(() => {
					this.$refs.inputDialog.close();
				})
			},
			close() {
				this.productNum = '';
				this.productId ='';
				this.$refs.inputDialog.close();
			},
			
			// 查询桌台当前订单
			queryCurrentOrder(){
				let params={
					serialNumber:this.serialNumber
				}
				uni.showLoading({
					title:"加载中",
					 mask:true,
				})
				queryCurrentOrder(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {
					  this.orderDetail = res.return_data;
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
				})
				
			},
			
			/* 获取菜单列表 */
			getStoreProductByList(){
				let params={
					storeId:this.storeId,
				}
				uni.showLoading({
					title:"加载中",
					 mask:true,
				})
				getStoreProductByList(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {
					  this.productList = res.return_data;
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.flex-wrap{
	flex-wrap: wrap;
}
.titleWidth{
	width: 120px;
	text-align: center;
}
.minheight40{
	padding: 15px 0;
}

/* 底部按钮 */
.btn-fix{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.btn{
		height: 50px;
		line-height: 50px;
		width: 100%;
		color: white;
		background-color: #089bf5;
		border-radius: 6px;
	}
}
</style>