<template>
	<view class="wrap">
		<u-sticky offset-top="0" bgColor="#fff">
			<view class="hm-header-xian"></view>
			<u-tabs :list="tabs" lineColor="#1196DB" :current="current" @change="change" :scrollable="false"></u-tabs>
		</u-sticky>
		<swiper class="swiper-box" :current="current" @animationfinish="animationfinish">
			<swiper-item class="swiper-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 && list[current].total">
						<view class="order-box" v-for="(item, index) in list[current].data" :key="index">
							<view class="hm-p-tb-20 hm-border-b">
								<text class="hm-m-r-10">{{item.order_mode.text}}</text>
								<text class="hm-col-tips" v-if="item.order_mode.value==10 && item.table_id > 0">
									#{{item.table.table_name}}#
								</text>
								<text class="hm-col-tips" v-else>
									#{{item.row_no}}号#
								</text>
								<view class="hm-dis-block-inline hm-fr hm-col-success">
									<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="goods-list" @click="goTo('order/detail?id=' + item.order_id)">
								<view class="" v-for="(item2, index2) in item.goods" :key="index2">
									{{index2+1}}:
									<text class="hm-m-l-20">{{item2.goods_name}} {{item2.goods_attr?' - '+item2.goods_attr:''}}</text>
									<text class="hm-fr">× {{item2.total_num}}</text>
								</view>
								<view class="hm-p-t-20 hm-text-right">
									共{{item.goods.length}}件商品，实付<text class="hm-col-error hm-font-b">￥{{item.pay_price}}</text>
								</view>
							</view>
							<view class="hm-border-t hm-text-right">
								<view v-if="item.order_status.value==10 && item.delivery_status.value == 10"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="cancelOrder(item.order_id)" type="error" text="取消订单" size="small">
									</u-button>
								</view>
								<view
									v-if="item.order_status.value==10 && item.pay_status.value>10 && item.shop_status.value == 10"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="setShopStatus(item.order_id)" type="primary" text="确认接单"
										size="small"></u-button>
								</view>
								<view
									v-if="item.order_status.value==10 && item.pay_status.value > 10 && 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="item.order_status.value==10 && item.order_mode.value != 20 && item.shop_status.value > 10 && item.delivery_status.value == 10"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="delivery(item.order_id)" type="primary" text="确认发货" size="small">
									</u-button>
								</view>
								<view
									v-if="item.order_status.value==10 && item.order_mode.value == 20 && item.shop_status.value > 10 && item.delivery_status.value == 10"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="goTo('order/delivery?id='+item.order_id)" type="primary"
										text="外卖派单" size="small"></u-button>
								</view>
								<view
									v-if="item.order_status.value==10 && item.order_mode.value == 20 && item.shop_status.value == 30 && item.delivery_status.value == 20 && item.delivery.delivery_status.value == 10  && item.delivery.status.value == 10"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="cancelDelivery(item.order_id)" type="error" text="取消配送"
										size="small"></u-button>
								</view>
								<block
									v-if="item.order_status.value==10 && item.order_mode.value == 20 && item.delivery_status.value == 20 && item.delivery.company.value == 'self'">
									<view v-if="item.delivery.delivery_status.value == 20"
										class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
										<u-button @click="deliveryStatus(item.order_id,30)" type="primary" text="骑手到店"
											size="small"></u-button>
									</view>
									<view v-if="item.delivery.delivery_status.value == 30"
										class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
										<u-button @click="deliveryStatus(item.order_id,40)" type="primary" text="开始配送"
											size="small"></u-button>
									</view>
									<view v-if="item.delivery.delivery_status.value == 40"
										class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
										<u-button @click="deliveryStatus(item.order_id,50)" type="primary" text="配送完毕"
											size="small"></u-button>
									</view>
								</block>
								<view
									v-if="item.order_status.value==10  && item.pay_status.value==30 && item.shop_status.value > 10 && item.delivery_status.value == 30 && item.receipt_status.value == 10"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="collection(item.order_id)" type="primary" text="确认收钱"
										size="small"></u-button>
								</view>
								<view v-if="item.order_status.value==40 && item.refund_status.value==10"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="refundOrder(item.order_id)" type="primary" text="退款操作"
										size="small"></u-button>
								</view>
								<view
									v-if="item.order_status.value == 10 && item.pay_status.value == 20 && item.delivery_status.value == 30"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="receipt(item.order_id)" type="primary" text="完成清台" size="small">
									</u-button>
								</view>
								<view
									v-if="item.order_status.value==10 && item.table_id > 0 && item.delivery_status.value == 30"
									class="hm-p-tb-20 hm-m-l-20 hm-dis-block-inline">
									<u-button @click="spk(item.order_id)" type="primary" text="呼叫取餐" size="small">
									</u-button>
								</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>
					<view v-if="refund_box">
						<u-popup :show="refund_box" closeable @close="refund_box = false" round="10">
							<view class="hm-p-lr-20">
								<view class="hm-p-tb-20 hm-text-center hm-border-b">是否同意用户退款</view>
								<view class="hm-p-b-20">
									<u-grid :border="false" col="2">
										<u-grid-item @click="refund(0)">
											<u-icon :customStyle="{paddingTop:20+'rpx'}" name="close-circle-fill"
												color="#fa3534" size="50">
											</u-icon>
											<text class="hm-col-tips">拒绝</text>
										</u-grid-item>
										<u-grid-item @click="refund(1)">
											<u-icon :customStyle="{paddingTop:20+'rpx'}" name="checkmark-circle-fill"
												color="#19be6b" size="50"></u-icon>
											<text class="hm-col-tips">同意</text>
										</u-grid-item>
									</u-grid>
								</view>
							</view>
						</u-popup>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				applet: {},
				tabs: [{
						name: '全部',
						value: 'all'
					},
					{
						name: '待接单',
						value: 'shop'
					},
					{
						name: '待发货',
						value: 'delivery'
					},
					{
						name: '待收款',
						value: 'collection'
					},
					{
						name: '待退款',
						value: 'refund10'
					}
				],
				current: 0,
				list: null,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
				page: [1, 1, 1, 1, 1],
				order_id: '',
				refund_box: false,
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _this = this;
			_this.applet = App.getApplet();
			_this.getOrderAll();
			_this.current = uni.getStorageSync('order_type') || 0;
			uni.removeStorageSync('order_type');
		},
		methods: {
			/**
			 * 退款框
			 */
			refundOrder: function(order_id) {
				let _this = this;
				_this.refund_box = true;
				_this.order_id = order_id;
			},

			/**
			 * 退款操作
			 */
			refund: function(is_refund) {
				let _this = this;
				let title = '确定拒绝本次退款？';
				if (_this.order_id == '') {
					App.showError('订单ID为空');
					return false;
				}
				if (is_refund == 1) {
					title = '确定同意本次退款？';
				}
				uni.showModal({
					title: "提示",
					content: title,
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/refund', {
								order_id: _this.order_id,
								is_refund: is_refund
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							}, function(result) {
								// fail
							}, function() {
								// complete
								_this.order_id = '';
							});
						}
						_this.order_id = '';
						_this.refund_box = false;
					}
				});
			},

			/**
			 * 完成清台
			 */
			receipt: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确定要完成订单并清台？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/receipt', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							});
						}
					}
				});
			},
			/**
			 * 叫号取餐
			 */
			spk: function(order_id) {
				App._post_form('order/spk', {
					order_id: order_id
				}, function(result) {
					App.showSuccess(result.msg);
				});
			},
			/**
			 * 收到用户付款
			 */
			collection: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认收到用户线下的付款？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/collection', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							});
						}
					}
				});
			},
			/**
			 * 外卖订单状态
			 */
			deliveryStatus: function(order_id, delivery_status) {
				let _this = this,
					content = '';
				if (delivery_status == 30) {
					content = '我已到店待取配送餐？';
				}
				if (delivery_status == 40) {
					content = '取到配送餐开始配送？';
				}
				if (delivery_status == 50) {
					content = '客户已收到配餐？';
				}
				uni.showModal({
					title: "提示",
					content: content,
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/deliveryStatus', {
								order_id: order_id,
								delivery_status: delivery_status
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							});
						}
					}
				});
			},
			/**
			 * 取消推送的外卖订单
			 */
			cancelDelivery: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认取消已推送的外卖订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/cancelDelivery', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							});
						}
					}
				});
			},
			/**
			 * 确认发货
			 */
			delivery: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认要发货？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/delivery', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							});
						}
					}
				});
			},
			/**
			 * 确认接单
			 */
			setShopStatus: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确定要接受订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/shop', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							});
						}
					}
				});
			},
			/**
			 * 取消订单
			 */
			cancelOrder: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认要取消订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/cancel', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getOrderAll();
								});
							});
						}
					}
				});
			},
			/**
			 * 获取订单列表
			 */
			getOrderList: function(current, page) {
				let _this = this;
				App._get('order/lists', {
					page: page,
					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';
				});
			},

			/**
			 * 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]);
			},

			/**
			 * 获取所有类型订单
			 */
			getOrderAll: function() {
				let _this = this;
				App._get('order/all', {
					page: 1
				}, function(result) {
					_this.list = result.data.list;
				});
			},

			/**
			 * 页面跳转
			 */
			goTo: function(url) {
				App.goTo(url);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		width: 100%;
		.swiper-box {
			flex: 1;
			.swiper-item {
				height: 100%;
				.order-box {
					margin-top: 15rpx;
					background-color: #FFF;
					padding: 0 20rpx;
					.goods-list {
						padding: 20rpx;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
