<template>
	<view class="hm-p-b-100">
		<u-sticky offset-top="0">
			<view class="hm-p-20 hm-font-b hm-col-main hm-text-center hm-bg-f hm-border-t">
				{{table_name}}
			</view>
		</u-sticky>
		<view class="hm-p-lr-20">
			<!-- 商品列表 -->
			<view class="goods-list">
				<view v-for="(item, index) in goods_list" :key="index" class="goods-item">
					<image :src="item.goods_sku.image.path?item.goods_sku.image.url:item.image[0].url">
					</image>
					<view class="selectNumber">
						<view @click="down(item.goods_id,item.goods_sku_id)"
							:class="'default left  ' + (item.total_num>=1?'':' default-active')">-</view>
						<view class="num">{{item.total_num}}</view>
						<view @click="up(item.goods_id,item.goods_sku_id)"
							class="default right">+</view>
					</view>
					<view class="hm-line-1 hm-font-24">{{item.goods_name}}</view>
					<view class="hm-line-1 hm-font-24 hm-col-tips">{{item.goods_sku.goods_attr}}</view>
					<view class="hm-line-1 hm-font-24 hm-col-error">
						￥{{item.goods_price}}
						<text class="hm-m-l-10 hm-col-tips">× {{item.total_num}}</text>
					</view>
				</view>
				<view class="hm-p-t-20 hm-text-right hm-font-28 hm-col-tips">
					共{{order_total_num}}份商品，合计：<text class="hm-col-error">￥{{order_total_price}}</text>
				</view>
			</view>
			<!-- 口味选择 -->
			<view class="menu-title">
				<view class="hm-p-b-20">顾客备注</view>
				<view class="item">
					<u--input v-model="message" border="none" placeholder="选填：订单备注（50字以内）" maxlength="50"></u--input>
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="menu-title">
				<view class="hm-p-b-20">支付方式</view>
				<view class="item" @click="setPay(2)">
					<view class="hm-dis-block-inline hm-m-r-10">
						<u-icon name="rmb-circle-fill" color="#fa3534"></u-icon>
					</view>
					餐后付款
					<view class="hm-dis-block-inline hm-fr" v-if="pay_mode==2">
						<u-icon name="checkbox-mark" color="#fa3534" size="30"></u-icon>
					</view>
				</view>
				<view class="item" @click="setPay(3)">
					<view class="hm-dis-block-inline hm-m-r-10">
						<u-icon name="checkmark-circle-fill" color="#19be6b"></u-icon>
					</view>
					线下已付
					<view class="hm-dis-block-inline hm-fr" v-if="pay_mode==3">
						<u-icon name="checkbox-mark" color="#fa3534" size="30"></u-icon>
					</view>
				</view>
				<view v-if="userInfo" class="item" @click="setPay(1)">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="red-packet-fill" :color="Number(userInfo.money) < Number(order_pay_price)?'#bbb':'#FF9900'"></u-icon>
					</view>
					<text :class="Number(userInfo.money) < Number(order_pay_price)?'hm-col-tips':''">
						余额支付(<text :class="Number(userInfo.money) < Number(order_pay_price)?'hm-font-24 hm-font-b':'hm-col-error hm-font-b hm-font-24'">￥{{userInfo.money}}</text>)
					</text>
					<text v-if="Number(userInfo.money) < Number(order_pay_price)" class="hm-col-error hm-font-24 hm-font-b hm-m-l-50">余额不足</text>
					<view class="hm-fr hm-dis-block-inline" v-if="pay_mode==1">
						<u-icon name="checkbox-mark" color="#fa3534" size="30"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<!-- 提交订单 -->
		<view class="hm-footer-fixed hm-bg-f hm-border-t">
			<view class="hm-w-b100 hm-p-l-20">
				实付款：<text class="hm-col-error hm-font-b">￥{{order_pay_price}}</text>
				<view class="hm-dis-block-inline hm-fr hm-m-r-20 hm-m-t-10">
					<u-button @click="submitOrder" type="error" text="提交订单"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let App = getApp();
	export default {
		data() {
			return {
				applet:{},
				table_id:'',
				table_name:'',
				user_id:'',

				userInfo: '', //用户详情
				pay_mode: 2, //支付模式 0微信，1余额
				message: '', //用户留言

				goods_list: [], //购物车商品列表
				is_order:1,//1点单 0加单
				order_pay_price: "0.00", //实际支付金额
				order_total_num: 0, //商品总数
				order_total_price: "0.00", //商品实际金额
				has_error: false,
				error_msg: "", //错误信息

				disabled: false
			};
		},
		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.user_id = options.user_id || '';
			_this.table_id = options.table_id;
			_this.applet = App.getApplet();
			_this.getCartOrder(); // 获取当前订单信息
			if(_this.user_id){
				_this.getUserDetail(); //获取当前用户详情
			}
		},
		
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		methods: {
			
			/**
			 * 获取购物车订单列表
			 */
			getCartOrder: function() {
				let _this = this;
				// 获取订单信息回调方法
				let callback = function(result) {
					if (result.code !== 1) {
						App.showError(result.msg);
						return false;
					}
					// 显示错误信息
					if (result.data.has_error) {
						_this.has_error = true;
						_this.error_msg = result.data.error_msg;
						App.showError(_this.error_msg);
					}
					_this.setData(result.data);
				};
				// 购物车结算
				App._get('order/cart', {
					table_id:_this.table_id,
				}, function(result) {
					callback(result);
				});
			},
			/**
			 * 加法
			 */
			mathadd(arg1, arg2) {
				return (Number(arg1) + Number(arg2)).toFixed(2);
			},

			/**
			 * 乘法
			 */
			mathcheng(arg1, arg2) {
				return (Number(arg1) * Number(arg2)).toFixed(2);
			},


			/**
			 * 设置支付模式
			 */
			setPay(pay_mode) {
				let _this = this;
				if(Number(_this.userInfo.money) < Number(_this.order_pay_price)){
					App.showSuccess('余额不足');
					return false;
				}
				_this.pay_mode = pay_mode;
			},

			/**
			 * 递增 - 多规格
			 */
			up(goods_id,goods_sku_id) {
				let _this = this; // 后端同步更新
				App._post_form('cart/add', {
					goods_id: goods_id,
					goods_num: 1,
					goods_sku_id: goods_sku_id,
					table_id:_this.table_id
				}, () => {
					_this.getCartOrder();
				});
			},

			/**
			 * 递减指定的商品数量
			 */
			down(goods_id,goods_sku_id) {
				let _this = this; // 后端同步更新
				App._post_form('cart/sub', {
					goods_id: goods_id,
					goods_sku_id: goods_sku_id,
					table_id:_this.table_id
				}, () => {
					_this.getCartOrder();
				});
			},

			/**
			 * 订单提交
			 */
			submitOrder: function() {
				let _this = this;
				if (_this.disabled) {
					return false;
				}
				if (_this.has_error) {
					App.showError(_this.error_msg);
					return false;
				}
				//判断是否为空订单
				if (_this.order_total_num == 0) {
					App.showError('订单商品不可为空');
					return false;
				}
				// 订单创建成功后回调--微信支付
				let callback = function(result) {
					if (result.code === -10) {
						App.showError(result.msg, function() {
							App.goTo('order/index'); // 跳转到订单列表
						});
						return false;
					}
					App.showSuccess('下单成功', function() {
						App.goTo('order/index'); // 跳转到订单列表
					});
					return true;
				};
				// 按钮禁用, 防止二次提交
				_this.disabled = true; // 创建订单-购物车结算
				App._post_form('order/cart', {
					pay_mode: _this.pay_mode,
					table_id:_this.table_id,
					user_id: _this.user_id,
					message: _this.message
				}, function(result) {
					// success
					uni.removeStorageSync('table_id'); //清除餐桌号
					callback(result);
				}, function(result) {
					// fail
				}, function() {
					// complete
					// 解除按钮禁用
					_this.disabled = false;
				});
			},

			/**
			 * 获取当前用户信息
			 */
			getUserDetail:function() {
				let _this = this;
				App._get('user/getUserId', {
					user_id:_this.user_id
				}, result => {
					_this.userInfo = result.data.detail;
				});
			},
			
			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.goods-list{
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		.goods-item{
			border-bottom: 1rpx solid #f3f4f6;
			padding: 10rpx 0;
			height: 100rpx;
			image{
				height: 100rpx;
				width: 100rpx;
				border-radius: 10rpx;
				float: left;
				margin-right: 20rpx;
			}
			.selectNumber{
				float: right;
				display: inline-block;
				margin-top: 25rpx;
			}
		}
	}
	.menu-title{
		margin-top: 20rpx;
		padding: 20rpx 20rpx 0rpx 20rpx;
		color: #303133;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 10rpx;
		.item{
			border-top: 1rpx solid #f3f4f6;
			padding: 20rpx 0;
		}
	}
	
</style>
