<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<view class="uni-title">{{$t('table.index.title')}}</view>
			</view>
		</view>
		<view class="uni-container">
			<view class="table">
				<view class="hm-p-b-10">
					<hm-tabs :list="tabs" :current="current" @clickItem="tabsChange"></hm-tabs>
				</view>
				<scroll-view class="scroll" scroll-y scroll-with-animation>
					<view class="box" v-if="list.length > 0">
						<uni-row gutter="20">
							<uni-col v-for="(item ,index) in list" :key="index" :xs="12" :sm="8" :md="6" :lg="4"
								:xl="3">
								<view class="item" :class="'status-' + item.status.value" @click="tableAction(index)">
									<view class="hm-col-0 hm-font-b hm-p-b-10 hm-border-b">
										{{item.table_name}}
									</view>
									<view class="status hm-p-t-10">
										{{item.status.text}}
									</view>
									<block v-if="item.status.value==10">
										<view class="hm-p-t-10" style="height: 53px;"></view>
									</block>
									<block v-if="item.status.value==20">
										<view class="hm-p-t-10">
											{{$t('table.index.time') + item.status.time + $t('table.index.minute')}}
										</view>
										<view class="hm-p-t-10">
											{{item.status.order_id.length + $t('table.index.single') + ',' + $t('table.index.to_received') + item.status.pay_price + $t('table.index.element')}}
										</view>
									</block>
									<block v-if="item.status.value==30">
										<view class="hm-p-t-10">
											{{item.status.pact.phone}}
										</view>
										<view class="hm-p-t-10">
											{{item.status.pact.pact_time.text}}
										</view>
									</block>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<view v-else class="hm-empty">
						<img :src="domain + '/addons/food/img/empty/data.png'" />
						<view class="text">{{$t('common.empty')}}</view>
					</view>
				</scroll-view>
				<uni-popup ref="status20" :is-mask-click="false">
					<view class="popup-500 hm-bg-f">
						<view class="title">
							{{$t('table.index.popup.title')}}
							<view @click="$refs.status20.close()" class="close">
								<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
							</view>
						</view>
						<view class="hm-p-10">
							<uni-row gutter="50">
								<uni-col :span="8">
									<view class="item" @click="addOrder()">
										<uni-icons type="plus-filled" size="50" color="#19be6b"></uni-icons>
										<view>{{$t('table.index.popup.add_order')}}</view>
									</view>
								</uni-col>
								<uni-col :span="8">
									<view class="item" @click="tablePay()">
										<uni-icons type="wallet-filled" size="50" color="#fa3534"></uni-icons>
										<view>{{$t('table.index.popup.settlement')}}</view>
									</view>
								</uni-col>
								<uni-col :span="8">
									<view class="item" @click="tableClear()">
										<uni-icons type="minus-filled" size="50" color="#ff9900"></uni-icons>
										<view>{{$t('table.index.popup.clearing')}}</view>
									</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</uni-popup>
				<uni-popup ref="status30" :is-mask-click="false">
					<view class="popup-500 hm-bg-f">
						<view class="title">
							{{$t('table.index.popup.title')}}
							<view @click="$refs.status30.close()" class="close">
								<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
							</view>
						</view>
						<view class="hm-p-10">
							<uni-row gutter="50">
								<uni-col :span="8">
									<view class="item" @click="tablePactDetail()">
										<uni-icons type="plus-filled" size="50" color="#ff9900"></uni-icons>
										<view>{{$t('table.index.popup.detail')}}</view>
									</view>
								</uni-col>
								<uni-col :span="8">
									<view class="item" @click="tablePactAddOrder()">
										<uni-icons type="wallet-filled" size="50" color="#19be6b"></uni-icons>
										<view>{{$t('table.index.popup.promise')}}</view>
									</view>
								</uni-col>
								<uni-col :span="8">
									<view class="item" @click="tablePactCancel()">
										<uni-icons type="minus-filled" size="50" color="#fa3534"></uni-icons>
										<view>{{$t('table.index.popup.cancel')}}</view>
									</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</uni-popup>
				<!--
				<uni-popup ref="pact" :is-mask-click="false">
					<view class="popup-500 hm-bg-f">
						<view class="title">
							{{$t('table.index.pact.title')}} - {{table_name}}
							<view @click="$refs.pact.close()" class="close">
								<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
							</view>
						</view>
						<view class="hm-p-10">
							<uni-forms ref="pactform" v-model="pactData" :rules="pactRules">
								<uni-forms-item :label="$t('table.index.pact.form.field.pact_time')" name="pact_time"
									labelWidth="35">
									<uni-datetime-picker type="datetime" v-model="pactData.pact_time"
										@change="changeLog" />
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.linkman')" name="linkman"
									labelWidth="35">
									<uni-easyinput type="text" v-model="pactData.linkman"
										:placeholder="$t('table.index.pact.form.placeholder.linkman')">
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.phone')" name="phone"
									labelWidth="35">
									<uni-easyinput type="number" v-model="pactData.phone"
										:placeholder="$t('table.index.pact.form.placeholder.phone')">
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.people')" name="people"
									labelWidth="35">
									<uni-easyinput type="number" v-model="pactData.people"
										:placeholder="$t('table.index.pact.form.placeholder.people')">
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.message')" name="message"
									labelWidth="35">
									<uni-easyinput type="text" v-model="pactData.message"
										:placeholder="$t('table.index.pact.form.placeholder.message')">
									</uni-easyinput>
								</uni-forms-item>
								<view class="uni-button-group">
									<view class="hm-p-lr-25">
										<button class="uni-button uni-button-full" type="primary" :loading="pactLoading"
											:disabled="pactLoading"
											@click="pactAdd">{{$t('common.button.submit')}}</button>
									</view>
								</view>
							</uni-forms>
						</view>
					</view>
				</uni-popup>
				<uni-popup ref="pactdetail" :is-mask-click="false">
					<view class="popup-500 hm-bg-f">
						<view class="title">
							{{$t('table.index.pact.detail')}} - {{table_name}}
							<view @click="$refs.pactdetail.close()" class="close">
								<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
							</view>
						</view>
						<view class="hm-p-10">
							<uni-forms ref="pactform" v-model="pactData" :rules="pactRules">
								<uni-forms-item :label="$t('table.index.pact.form.field.pact_time')" name="pact_time"
									labelWidth="35">
									<uni-easyinput type="text" v-model="pact_detail.pact_time.date" disabled>
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.linkman')" name="linkman"
									labelWidth="35">
									<uni-easyinput type="text" v-model="pact_detail.linkman" disabled>
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.phone')" name="phone"
									labelWidth="35">
									<uni-easyinput type="number" v-model="pact_detail.phone" disabled>
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.people')" name="people"
									labelWidth="35">
									<uni-easyinput type="number" v-model="pact_detail.people" disabled>
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item :label="$t('table.index.pact.form.field.message')" name="message"
									labelWidth="35">
									<uni-easyinput type="text" v-model="pact_detail.message" disabled></uni-easyinput>
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</uni-popup>
				-->
			</view>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>

<script>
	import config from '@/config.js';
	let App = getApp();
	export default {
		data() {
			return {
				domain: '',
				current: 0,
				tabs: [{
						name: '全部',
						type: 0,
						count: 0,
					},
					{
						name: '空台',
						type: 10,
						count: 0,
					},
					{
						name: '忙台',
						type: 20,
						count: 0,
					},
				],
				list: {
					data: []
				},
				table_id: '',
				table_name: '',
				index: '',
				/*
				pactLoading: false,
				pactData: {
					linkman: '',
					phone: '',
					people: '',
					message: '',
					pact_time: ''
				},
				pactRules: {
					pact_time: {
						rules: [{
							required: true,
							errorMessage: '请设置约定时间',
						}]
					},
					linkman: {
						rules: [{
							required: true,
							errorMessage: '请输入顾客姓名',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码',
						}]
					},
					people: {
						rules: [{
							required: true,
							errorMessage: '请输入就餐人数',
						}]
					}
				},
				pactDetail: [], //预约详情
				*/
			}
		},
		onLoad() {
			let _this = this;
			_this.domain = config.domain;
			_this.getList();
		},
		methods: {
			/**
			 * 餐桌清台
			 */
			tableClear: function() {
				let _this = this;
				if (_this.list[_this.index].status.pay_price > 0) {
					App.showError('请买单后在清台');
					return false;
				}
				uni.showModal({
					title: "提示",
					content: "您确定要对该桌清台？",
					success: function(o) {
						if (o.confirm) {
							App._get('table/clear', {
								table_id: _this.table_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getList();
									_this.$refs.status20.close();
								});
							});
						}
						return false;
					}
				});
			},
			/**
			 * 餐桌结账
			 */
			tablePay: function() {
				let _this = this;
				if (_this.list[_this.index].status.pay_price == 0) {
					App.showError('该桌已买过单了');
					return false;
				}
				uni.showModal({
					title: "提示",
					content: "您确定要对该桌买单？",
					success: function(o) {
						if (o.confirm) {
							App._get('table/pay', {
								table_id: _this.table_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getList();
									_this.$refs.status20.close();
								});
							});
						}
						return false;
					}
				});
			},

			/**
			 * 餐桌下单
			 */
			addOrder: function() {
				let _this = this;
				App.goTo('order/food?table_id=' + _this.table_id);
			},
			/**
			 * 餐桌操作
			 */
			tableAction: function(index) {
				let _this = this,
					table = _this.list[index];
				_this.table_id = table.table_id;
				_this.table_name = table.table_name;
				_this.index = index;
				if (table.status.value == 10) {
					_this.addOrder();
				}
				if (table.status.value == 20) {
					_this.$refs.status20.open();
				}
				if (table.status.value == 30) {
					_this.$refs.status30.open();
				}
			},

			// 点击选项卡
			tabsChange(e) {
				let _this = this;
				_this.current = e.currentIndex;
				_this.getList();
			},
			/**
			 * 获取餐桌列表
			 */
			getList: function() {
				let _this = this;
				App._get('table/lists', {
					status: _this.tabs[_this.current].type
				}, function(result) {
					_this.list = result.data.list;
				});
			}
		}
	}
</script>

<style lang="scss">
	.table {
		.scroll {
			width: 100%;
			height: calc(100vh - 162px - (var(--top-window-height)));

			.box {
				margin-bottom: 10px;
				width: 96%;
				padding: 0 10px 10px 10px;

				.item {
					margin-top: 10px;
					background-color: #ff0000;
					border-radius: 8px;
					padding: 10px;
					color: #999;
					text-align: center;
				}

				.status-10 {
					border: 1px solid #71d5a1;
					background-color: #dbf1e1;

					.status {
						color: #19be6b;
					}
				}

				.status-20 {
					border: 1px solid #fab6b6;
					background-color: #fef0f0;

					.status {
						color: #fa3534;
					}
				}

				.status-30 {
					border: 1px solid #fcbd71;
					background-color: #fdf6ec;

					.status {
						color: #ff9900;
					}
				}
			}
		}

		.popup-500 {
			.item {
				text-align: center;
				color: #999;
			}
		}
	}
</style>
