<template>
	<view>
		<view class="hm-header-xian"></view>
		<!--顶部导航-->
		<u-sticky offsetTop="0" customNavHeight="0" bgColor="#ffffff">
			<u-tabs :list="tabs" lineColor="#FF9900" :itemStyle="{height:'88rpx',width:'100rpx'}" :current="current" @change="change" :scrollable="false">
			</u-tabs>
		</u-sticky>
		<!-- #ifdef H5 -->
		<view v-if="isLogin">
		<!-- #endif -->
		<view class="hm-wrap">
			<swiper class="swiper" :current="current" @animationfinish="animationfinish">
				<swiper-item class="item" v-for="(tabs_item,tabs_index) in tabs" :key="tabs_index">
					<scroll-view scroll-y class="hm-w-h" @scrolltolower="reachBottom">
						<view v-if="list[current].total" class="hm-p-lr-20">
							<!--订单列表-->
							<view class="order" v-for="(item, index) in list[current].data" :key="index">
								<view class="hm-p-b-20 hm-border-b">
									{{item.shop.shop_name}}
									<view class="hm-dis-block-inline hm-fr hm-col-error">
										<block v-if="item.order_status.value==10">
											<text v-if="item.pay_status.value==10">
												{{item.pay_status.text}}
											</text>
											<text v-if="item.pay_status.value>10 && item.shop_status.value==10">
												{{item.shop_status.text}}
											</text>
											<text v-if="item.shop_status.value > 10 && item.delivery_status.value==10">
												{{item.delivery_status.text}}
											</text>
											<text v-if="item.shop_status.value > 10 && item.delivery_status.value==20">
												{{item.delivery.delivery_status.text}}
											</text>
											<text
												v-if="item.delivery_status.value==30 && item.receipt_status.value==10">
												{{item.pay_status.value==30?'起菜完毕-待付款':item.receipt_status.text}}
											</text>
										</block>
										<block v-else-if="item.order_status.value==40">
											{{item.refund_status.text}}
										</block>
										<block v-else>
											{{item.order_status.text}}
										</block>
									</view>
								</view>
								<view class="hm-p-t-10 hm-col-tips hm-font-26">
									#{{item.order_mode.text}}#
									<text class="hm-m-l-10"
										v-if="item.order_mode.value==10 && item.table_id > 0">{{item.table.table_name}}</text>
									<text class="hm-m-l-10" v-else>{{item.row_no}}号</text>
									<text class="hm-fr hm-font-24">
										<text v-if="item.order_mode.value == 10">起菜时间：</text>
										<text v-if="item.order_mode.value == 20">送出时间：</text>
										<text v-if="item.order_mode.value == 30">取餐时间：</text>
										{{item.arrive_time.text}}
									</text>
								</view>
								<view class="hm-p-tb-20 hm-font-26" @click="goTo('order/detail?id=' + item.order_id)">
									<view v-for="(item2, index2) in item.goods" :key="index2">
										{{index2+1}}:
										<text class="hm-m-l-10">{{item2.goods_name}}</text>
										<text class="hm-col-tips hm-m-l-15" v-if="item2.goods_attr">{{item2.goods_attr}}</text>
										<view class="hm-dis-block-inline hm-fr hm-w-200">
											× {{item2.total_num}}
											<text class="hm-fr">￥{{item2.total_price}}</text>
										</view>
									</view>
									<view class="hm-p-t-20 hm-text-right">
										共{{item.goods.length}}种商品，实付<text class="hm-col-error">￥{{item.pay_price}}</text>
									</view>
								</view>
								<view class="hm-border-t hm-p-tb-20">
									合计：<text class="hm-col-error">￥{{item.pay_price}}</text>
									<view class="hm-dis-block-inline hm-fr">
										<block v-if="item.order_status.value == 10">
											<view v-if="item.shop_status.value == 10" class="hm-dis-block-inline">
												<u-button @click="cancelOrder(item.order_id)" size="small" text="取消订单">
												</u-button>
											</view>
											<view v-if="item.pay_status.value!=20" class="hm-m-l-20 hm-dis-block-inline">
												<u-button @click="payOrder(index)" size="small" type="warning" text="立即付款">
												</u-button>
											</view>
											<view
												v-if="item.pay_status.value==20 && item.receipt_status.value==10"
												class="hm-m-l-20 hm-dis-block-inline">
												<u-button @click="goTo('order/refund?id='+item.order_id)" size="small"
													type="error" text="我要退单"></u-button>
											</view>
											<view
												v-if="applet.other.is_calling == 1 && item.order_mode.value == 10 && item.table_id > 0 && item.pay_status.value > 10 && item.shop_status.value == 20"
												class="hm-m-l-20 hm-dis-block-inline">
												<u-button @click="spkBox(item.order_id)" size="small" type="success"
													text="呼叫服务"></u-button>
											</view>
											<view
												v-if="item.pay_status.value==20 && item.delivery_status.value==30 && item.receipt_status.value == 10"
												class="hm-m-l-20 hm-dis-block-inline">
												<u-button @click="receipt(item.order_id)" size="small" type="warning"
													text="确认完成"></u-button>
											</view>
										</block>
										<view v-if="item.order_status.value==30 && item.is_cmt.value==0"
											class="hm-dis-block-inline">
											<u-button @click="goTo('order/comment?id='+item.order_id)" size="small"
												type="warning" text="我要评价"></u-button>
										</view>
									</view>
								</view>
							</view>
							<view>
								<u-loadmore :status="loadStatus[current]" bgColor="#F7F7F7" marginTop="20"
									marginBottom="20" line></u-loadmore>
							</view>
						</view>
						<view v-else class="hm">
							<img :src="applet.domain + '/addons/food/img/empty/order.png'" />
							<view class="text">暂无订单数据</view>
						</view>
						<!-- 技术支持 -->
						<view class="hm">
							{{applet.copyright}} <text class="v">V{{applet.version}}</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup :show="cashier_show" @close="cashier_show = false" mode="center" round="8" :closeable="true">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b hm-text-center">支付收银台</view>
				<view class="hm-p-tb-50 hm-text-center">
					<view class="hm-font-b hm-col-0">
						￥<text class="hm-font-100">{{order_pay_price}}</text>
					</view>
					<view class="hm-font-28 hm-col-content">订单支付</view>
				</view>
				<!-- #ifdef H5 || MP-WEIXIN --> 
				<view class="hm-p-20 hm-border-t" @click="pay_mode = 0">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="weixin-circle-fill" size="25" color="#19be6b"></u-icon>
					</view>
					微信
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==0" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 || MP-ALIPAY --> 
				<view class="hm-p-20 hm-border-t" @click="pay_mode = 3">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="zhifubao-circle-fill" size="25" color="#2979ff"></u-icon>
					</view>
					支付宝
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==3" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<view v-if="pay_after" class="hm-p-20 hm-border-t" @click="pay_mode = 2">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="rmb-circle-fill" size="25" color="#fa3534"></u-icon>
					</view>
					{{pay_text}}
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==2" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<view class="hm-p-20 hm-border-t hm-border-b" @click="pay_mode = 1">
					<view class="hm-m-r-10 hm-dis-block-inline">
						<u-icon name="red-packet-fill" size="25"
							:color="Number(userInfo.money) < Number(order_pay_price)?'#c0c4cc':'#FF9900'"></u-icon>
					</view>
					<text :class="Number(userInfo.money) < Number(order_pay_price)?'hm-col-light':''">
						余额(<text
							:class="Number(userInfo.money) < Number(order_pay_price)?'hm-font-26':'hm-col-error hm-font-26'">￥{{userInfo.money}}</text>)
					</text>
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==1" size="25" color="#fa3534"></u-icon>
						<text v-if="Number(userInfo.money) < Number(order_pay_price)" class="hm-col-light">余额不足</text>
					</view>
				</view>
				<view class="hm-p-t-50">
					<view class="hm-p-lr-b25">
						<u-button type="error" @click="payment" text="确认支付"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="spk_box" @close="spk_box = false" round="8" closeable>
			<view class="hm-p-20 hm-border-b">在线呼叫服务</view>
			<view class="hm-p-tb-50">
				<view @click="spk('money')" class="hm-dis-block-inline hm-w-b16">
					<view class="hm-text-center">
						<view class="hm-dis-block-inline">
							<u-icon name="red-packet-fill" color="#19be6b" size="30"></u-icon>
						</view>
					</view>
					<view class="hm-text-center hm-font-26 hm-m-t-10">结账</view>
				</view>
				<view @click="spk('order')" class="hm-dis-block-inline hm-w-b16">
					<view class="hm-text-center">
						<view class="hm-dis-block-inline">
							<u-icon name="file-text-fill" color="#19be6b" size="30"></u-icon>
						</view>
					</view>
					<view class="hm-text-center hm-font-26 hm-m-t-10">点单</view>
				</view>
				<view @click="spk('pack')" class="hm-dis-block-inline hm-w-b16">
					<view class="hm-text-center">
						<view class="hm-dis-block-inline">
							<u-icon name="bag-fill" color="#19be6b" size="30"></u-icon>
						</view>
					</view>
					<view class="hm-text-center hm-font-26 hm-m-t-10">打包</view>
				</view>
				<view @click="spk('upper')" class="hm-dis-block-inline hm-w-b16">
					<view class="hm-text-center">
						<view class="hm-dis-block-inline">
							<u-icon name="play-right-fill" color="#19be6b" size="30"></u-icon>
						</view>
					</view>
					<view class="hm-text-center hm-font-26 hm-m-t-10">起菜</view>
				</view>
				<view @click="spk('water')" class="hm-dis-block-inline hm-w-b16">
					<view class="hm-text-center">
						<view class="hm-dis-block-inline">
							<u-icon name="checkmark-circle-fill" color="#19be6b" size="30"></u-icon>
						</view>
					</view>
					<view class="hm-text-center hm-font-26 hm-m-t-10">茶水</view>
				</view>
				<view @click="spk('serve')" class="hm-dis-block-inline hm-w-b16">
					<view class="hm-text-center">
						<view class="hm-dis-block-inline">
							<u-icon name="bell-fill" color="#19be6b" size="30"></u-icon>
						</view>
					</view>
					<view class="hm-text-center hm-font-26 hm-m-t-10">服务员</view>
				</view>
			</view>
		</u-popup>
		<!-- #ifdef H5 -->
		</view>
		<view v-else class="hm">
			<img :src="applet.domain + '/addons/food/img/empty/permission.png'" />
			<view class="text">你还没有登录</view>
			<view class="hm-dis-block-inline hm-m-t-20">
				<u-button @click="goTo('login/index')" type="info" text="去登录" plain></u-button>
			</view>
			<!-- 技术支持 -->
			<view class="hm">
				{{applet.copyright}} <text class="v">V{{applet.version}}</text>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				isLogin: false,
				applet: {},
				userInfo:{},
				tabs: [{
						name: '全部',
						value: 'all'
					},
					{
						name: '待付款',
						value: 'payment'
					},
					{
						name: '待评价',
						value: 'comment'
					},
					{
						name: '退款',
						value: 'refund10'
					}
				],
				current: 0,
				list: [{total:0}],
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				page: [1, 1, 1, 1],
				
				pay_mode: 0, //支付模式 0微信，1余额 2后付 3支付宝
				order_pay_price: 0,
				cashier_show: false,
				pay_after:true,
				pay_index: '',
				pay_text: '',
				
				spk_box: false,
				order_id: '',

			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _this = this;
			_this.isLogin = App.checkIsLogin();
			_this.getApplet();
			_this.getOrderAll();
			_this.current = uni.getStorageSync('order_type') || 0;
			uni.removeStorageSync('order_type');
			// #ifdef MP-ALIPAY
			_this.pay_mode = 3;
			//#endif
		},
		methods: {
			/**
			 * 发起付款
			 */
			payment: function() {
				let _this = this,
				pay_mode = _this.pay_mode;
				let callback = function(result) {
					_this.cashier_show = false;
					if (result.code === -10) {
						App.showError(result.msg, function() {
							App.goTo('order/index'); // 跳转到订单列表
						});
						return false;
					}
					// 发起余额支付
					if (pay_mode == 1 || pay_mode == 2) {
						_this.goTo('order/detail?id=' + _this.list[_this.current].data[_this.pay_index].order_id); // 跳转到已付款订单
						return true;
					}
					// 发起微信支付
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						timeStamp: result.data.payment.timeStamp,
						nonceStr: result.data.payment.nonceStr,
						package: result.data.payment.package,
						signType: result.data.payment.signType,
						paySign: result.data.payment.paySign,
						success: function(res) {
							_this.goTo('order/detail?id=' + result.data.order_id);
						},
						fail: function(res) {
							let msg = '支付失败';
							if(res.errMsg == 'requestPayment:fail cancel'){
								msg = '用户取消支付';
							}
							App.showError(msg);
						}
					});
					//#endif
					//#ifdef H5
					// #ifdef MP-WEIXIN
					window.location.href = result.data.payment.h5_url;
					//#endif
					//#endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						orderInfo: result.data.payment.trade_no,
						success: function(res) {
							if(res.resultCode != '9000'){
								App.showError(res.memo);
								return false;
							}
							_this.goTo('order/detail?id=' + result.data.order_id);
						}
					});
					//#endif
				};
				//验证是否支持后付款
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.order/pay', {
					order_id: _this.list[_this.current].data[_this.pay_index].order_id,
					pay_mode: pay_mode
				}, function(result) {
					callback(result);
				});
			},
			/**
			 * 支付框
			 */
			payOrder: function(index) {
				let _this = this,
					order_mode = _this.list[_this.current].data[index].order_mode.value,
					pay_status = _this.list[_this.current].data[index].pay_status.value,
					postpaid = _this.applet.other.postpaid;
				_this.order_pay_price = _this.list[_this.current].data[index].pay_price;
				_this.getUserDetail();
				_this.pay_index = index;
				if(pay_status == 30 || postpaid[order_mode] == 0){
					_this.pay_after = false;//隐藏后付费
				}else{
					_this.pay_after = true;//显示后付费
				}
				if (order_mode == 10) {
					_this.pay_text = '餐后支付';
				}
				if (order_mode == 20) {
					_this.pay_text = '骑手代收';
				}
				if (order_mode == 30) {
					_this.pay_text = '取餐付';
				}
				_this.cashier_show = true;
			},
			/**
			 * 叫号服务框
			 */
			spkBox: function(order_id) {
				let _this = this;
				_this.spk_box = true;
				_this.order_id = order_id;
			},
			/**
			 * 呼叫
			 */
			spk: function(mode) {
				let _this = this;
				_this.spk_box = false;
				App._post_form('order/spk', {
					order_id: _this.order_id,
					mode: mode
				}, function(result) {
					App.showSuccess(result.msg);
				});
			},
			/**
			 * 确认收货
			 */
			receipt: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确认要完成订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('user.order/receipt', {
								order_id
							}, function(result) {
								_this.getOrderAll();
							});
						}
					}
				});
			},
			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.userInfo = result.data.detail;
				});
			},
			/**
			 * 取消订单
			 */
			cancelOrder: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确认要取消订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('user.order/cancel', {
								order_id
							}, function(result) {
								_this.getOrderAll();
							});
						}
					}
				});
			},

			/**
			 * 获取订单列表
			 */
			getOrderList: function(current, page) {
				let _this = this;
				App._get('user.order/lists', {
					page: page || 1,
					dataType: _this.tabs[current].value
				}, function(result) {
					let resList = result.data.list,
						dataList = _this.list[current];
					_this.list[current].data = dataList.data.concat(resList.data);
					_this.loadStatus[current] = 'loadmore';
				});
			},

			/**
			 * 获取所有类型列表
			 */
			getOrderAll: function() {
				let _this = this;
				App._get('user.order/all', {
					page: 1
				}, function(result) {
					_this.list = result.data.list;
				});
			},
			/**
			 * tab栏切换
			 */
			change(e) {
				let _this = this;
				_this.current = e.index;
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.current = current;
			},

			/**
			 * 触底加载
			 */
			reachBottom: function() {
				let _this = this,
					current = _this.current;
				_this.loadStatus[current] = "loading"; //加载中
				// 已经是最后一页
				if (_this.page[current] >= _this.list[current].last_page) {
					_this.loadStatus[current] = "nomore"; //没有数据
					return false;
				}
				// 加载下一页列表
				_this.getOrderList(current, ++_this.page[current]);
			},
			/**
			 * 获取当前小程序配置
			 */
			getApplet() {
				let _this = this,
					applet;
				if (applet = uni.getStorageSync('applet')) {
					_this.applet = applet;
				} else {
					App.getAppletBase(() => {
						_this.getApplet();
					});
				}
			},
			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.swiper{
		flex: 1;
		.item {
			height: 100%;
			.order{
				margin-top: 20rpx;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 8rpx;
				box-sizing: border-box;
			}
		}
	}
	
</style>
