<template>
	<view>
		<view v-if="list.length">
			<view class="table" v-for="(item, index) in list" :key="index" @click="changeTable(index)">
				<view class="hm-font-28 hm-col-main hm-p-b-20 hm-border-b hm-line-1">{{item.table_name}}</view>
				<view :class="'hm-p-t-20 hm-font-32 hm-font-b status-'+item.status.value">
					{{item.status.text}}
				</view>
				<!--
				<view v-if="item.status.value == 20">
					占用时间：<text class="col-9">{{item.status.time}}分钟</text>
				</view>
				<view v-if="item.status.value == 30">
					约定时间：<text class="col-9">{{item.status.patc.pact_time.text}}</text>
				</view>
				-->
			</view>
		</view>
		<view v-else class="hm">
			<img :src="applet.domain + '/addons/food/img/empty/data.png'" />
			<view class="text">暂无餐桌列表</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<view v-if="phoneShow">
			<u-popup :show="phoneShow" mode="center" closeable @close="noPhonShow()" round="10">
				<view class="hm-popup">
					<view class="popup-title">会员下单</view>
					<view class="hm-p-20 hm-border-b">
						<u--input v-model="phone" type="number" border="none" inputAlign="center"
							placeholder="请输入会员账号、手机号" :clearable="true" :focus="true"></u--input>
					</view>
					<view class="hm-text-center">
						<view class="but2 hm-border-r status-20" @click="goFood(0)">无会员</view>
						<view class="but2 status-10" @click="goFood(1)">确认会员</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view v-if="orderShow">
			<u-popup :show="orderShow" mode="center" closeable @close="orderShow = false" round="10">
				<view class="hm-popup">
					<view class="popup-title">该桌正在使用，你要做什么？</view>
					<view class="hm-p-20 hm-border-b hm-font-24">
						<view>订单数量：<text class="hm-font-b hm-col-tips">{{list[index].status.order_id.length}}</text></view>
						<view>占用时间：<text class="hm-font-b hm-col-tips">{{list[index].status.time}}分钟</text></view>
						<view>待收餐费：<text class="hm-font-b hm-col-error">{{list[index].status.pay_price}}</text></view>
					</view>
					<view class="hm-text-center">
						<view class="but2 hm-border-r status-20" @click="clearOrder()">清台</view>
						<view class="but2 status-10" @click="addOrder()">加单</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view v-if="pactShow">
			<u-popup :show="pactShow" mode="center" closeable @close="pactShow = false" round="10">
				<view class="hm-popup">
					<view class="popup-title">该桌已被预定，你要做什么？</view>
					<view class="hm-p-20 hm-border-b hm-font-24">
						<view>用户姓名：<text class="hm-font-b hm-col-tips">{{list[index].status.pact.linkman}}</text></view>
						<view>联系电话：<text class="hm-font-b hm-col-tips">{{list[index].status.pact.phone}}</text></view>
						<view>约定时间：<text class="hm-font-b hm-col-tips">{{list[index].status.pact.pact_time.text}}</text></view>
					</view>
					<view class="hm-text-center">
						<view class="but2 hm-border-r status-20" @click="rescind()">解约</view>
						<view class="but2 status-10" @click="addOrder()">下单</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	const App = getApp();
	export default {
		data() {
			return {
				applet: {},
				list: {},
				index: '',
				phoneShow: false,
				phone: '', //会员手机号
				pactShow: false, //订桌提示框
				orderShow: false, //加单提示框
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.applet = App.getApplet();
		},

		onShow() {
			let _this = this;
			_this.getList();
		},

		methods: {
			/**
			 * 解约订桌
			 */
			rescind: function() {
				let _this = this,
					table = _this.list[_this.index];
				uni.showModal({
					title: "提示",
					content: "确定要解除客户预定？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('table/rescind', {
								pact_id: table.status.pact.pact_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.pactShow = false;
									_this.getList();
								});
							});
						}
					}
				});
			},
			/**
			 * 清台接单
			 */
			clearOrder: function() {
				let _this = this,
					table = _this.list[_this.index];
				if (table.status.pay_price > 0) {
					App.showError('该桌有￥' + table.status.pay_price + '待收餐费，请完成收款后在清台！');
					return false;
				}
				uni.showModal({
					title: "提示",
					content: "确定要完成订单并清台？",
					success: function(o) {
						if (o.confirm) {
							for (let n = 0; n < table.status.order_id.length; n++) {
								App._post_form('order/receipt', {
									order_id: table.status.order_id[n]
								}, function(result) {
									_this.orderShow = false;
									_this.getList();
								});
							}
						}
					}
				});
			},
			changeTable: function(index) {
				let _this = this;
				_this.index = index;

				if (_this.list[index].status.value == 10) {
					_this.phoneShow = true;
					return true;
				}
				if (_this.list[index].status.value == 20) {
					//忙 - 加单 清台 取消
					_this.orderShow = true;
					return true;
				}
				if (_this.list[index].status.value == 30) {
					//订桌 - 取消 下单 解约
					_this.pactShow = true;
					return true;
				}
			},
			/**
			 * 下单/加单
			 */
			addOrder: function(mode) {
				_this = this;
				if (mode == 'order') {
					_this.orderShow = false;
				}
				if (mode == 'pact') {
					_this.pactShow = false;
				}
				_this.phoneShow = true;
				return true;
			},
			goFood: function(e) {
				let _this = this,
					table_id = _this.list[_this.index].table_id,
					phone = _this.phone;
				if (e == 1) {
					if (phone == '') {
						App.showError('会员账号不可为空');
						return false;
					}
					App._get('user/phone', {
						phone: phone
					}, function(result) {
						_this.phone = '';
						_this.phoneShow = false;
						App.goTo('table/food?table_id=' + table_id + '&user_id=' + result.data
							.detail.user_id);
					});
				} else {
					_this.phone = '';
					_this.phoneShow = false;
					App.goTo('table/food?table_id=' + table_id + '&user_id=');
				}
			},
			/**
			 * 关闭会员输入框
			 */
			noPhonShow: function() {
				let _this = this;
				_this.phone = '';
				_this.phoneShow = false;
			},
			/**
			 * 获取餐桌/包间列表
			 */
			getList: function() {
				let _this = this;
				App._get('table/lists', {}, result => {
					_this.setData(result.data);
				});
			}
		}
	};
</script>
<style>
	.table {
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
		width: 40.5%;
		display: inline-block;
		margin: 20rpx 0rpx 0rpx 20rpx;
		font-size: 24rpx;
		background-color: #FFF;
		text-align: center;
	}
	.but2 {
		padding: 20rpx 0;
		width: 49%;
		display: inline-block;
	}
	.status-10 {
		color: #19be6b;
	}

	.status-20 {
		color: #fa3534;
	}

	.status-30 {
		color: #ff9900;
	}
</style>
