<template>
	<view class="color-333 u-font-28 min-page bg-gray">
		<up-sticky>
			<view class="bg-fff u-p-l-30 u-p-b-30 u-relative">
				<view class="input-wrapper">
					<view class="input-main">
						<view class="u-flex u-p-r-30 u-font-28" @click="pageData.statusShow = !pageData.statusShow">
							<text class="u-m-r-10 u-line-1" :class="{ 'color-main': pageData.query.status != '' }"
								style="max-width: 100rpx">{{ pageData.statusName }}</text>
							<up-icon name="arrow-down" size="16"></up-icon>
						</view>
						<uni-easyinput clearable class="jeepay-search" :inputBorder="false" trim="all" placeholder="搜索"
							v-model="pageData.query.name" @clear="searchConfirm" @confirm="searchConfirm">
							<template #prefixIcon>
								<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
							</template>
						</uni-easyinput>
						<view class="u-m-l-4">
							<button class="" type="text" @click="searchConfirm"><text
									class="color-333">搜索</text></button>
							<!-- <button class="" type="text" ><text class="color-main font-bold">清台设置</text></button> -->
						</view>
					</view>
				</view>
			</view>
		</up-sticky>

		<view class="list u-p-30">
			<view class="my-bg-main table-type u-flex border-r-12 color-fff">
				<view class="item u-p-20" :class="{ sel: pageData.area.sel == '' }" @tap="changeAreaSel({ id: '' })">
					<view class="box">
						<view class="up-line-1">全部</view>
						<!-- <view class="u-m-t-10">0/12</view> -->
					</view>
				</view>
				<view class="item u-p-20" :class="{ sel: pageData.area.sel === item.id }" @tap="changeAreaSel(item)"
					v-for="(item, index) in pageData.area.list" :key="index">
					<view class="box">
						<view class="up-line-1">{{ item.name }}</view>
						<!-- <view class="u-m-t-10">0/12</view> -->
					</view>
				</view>
			</view>

			<view class="u-m-t-30">
				<template v-if="pageData.tabList.length">
					<view class="u-flex u-flex-wrap u-row-between">
						<view class="u-m-b-30" v-for="(item, index) in pageData.tabList" :key="index">
							<table-item @bind="scanCode" @update="getTable" :areaMap="pageData.areaMap"
								@more="moreShow(item)" :data="item"></table-item>
						</view>
					</view>
					<my-pagination :page="pageData.query.page" :totalElements="pageData.totalElements"
						:size="pageData.query.size" @change="pageChange"></my-pagination>
				</template>

				<my-img-empty v-if="pageData.hasAjax && !pageData.tabList.length" tips="未找到相关桌台"></my-img-empty>
			</view>
		</view>
	</view>
	<my-action-sheet :active="4" @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list"
		:title="actionSheet.title">
		<template #title>
			<view class="color-999 u-p-30 u-text-center border-bottom">桌号：{{ actionSheet.title }}</view>
		</template>
	</my-action-sheet>
	<up-picker :show="pageData.statusShow" :columns="pageData.statusList" keyName="label"
		@cancel="pageData.statusShow = false" @confirm="confirmStatus"></up-picker>
</template>

<script setup>
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed,
		watch
	} from 'vue';

	import tableItem from './components/table-item';

	import go from '@/commons/utils/go.js';
	import myActionSheet from '@/components/my-components/my-action-sheet';
	import {
		hasPermission
	} from '@/commons/utils/hasPermission.js';

	import {
		getShopTable,
		shopTableBind,
		shopTableClear
	} from '@/http/api/table.js';
	import {
		getShopArea
	} from '@/http/api/area.js';
	import {
		printOrder
	} from '@/http/api/order.js';
	import {
		getHistoryOrder
	} from '@/http/api/order.js';
import tableStatus from './tableStatus'
	const pageData = reactive({
		statusShow: false,
		hasAjax: false,
		areaMap: {},
		query: {
			page: 1,
			size: 10,
			status: '',
			areaId: '',
			name: ''
		},
		totalElements: 0,
		statusList: [
			[{
					key: '',
					label: '全部'
				},
				// ...uni.$utils.objToArrary(uni.$dict.tableStatus)
			...tableStatus
			]
		],
		statusName: '全部',
		tabList: [],
		area: {
			list: [],
			sel: ''
		},
		orderInfo: null
	});

	const refMoreSheet = ref(null);
	const actionSheet = reactive({
		list: ['结账', '清台', '增减菜', '换台', '打印订单', '历史订单', '绑定码牌'],
		title: '',
		selTable: ''
	});

	watch(
		() => pageData.area.sel,
		(newval) => {
			pageData.query.page = 1;
			getTable();
		}
	);

	onShow((opt) => {
		getData();
	});

	function getData() {
		getTable();
		getArea();
	}

	/**
	 * 获取桌台列表
	 */
	async function getTable() {
		const res = await getShopTable(pageData.query);
		pageData.hasAjax = true;
		pageData.tabList = res.records;
		pageData.totalElements = res.totalRow;
	}

	/**
	 * 获取区域
	 */
	async function getArea() {
		const res = await getShopArea({
			name: '',
			page: 1,
			size: 300
		});
		pageData.area.list = res.records;
		pageData.areaMap = res.records.reduce((prve, cur) => {
			prve[cur.id] = cur.name;
			return prve;
		}, {});
	}

	/**
	 * 类型选择
	 * @param {Object} e
	 */
	function confirmStatus(e) {
	console.log('---',e);
		pageData.statusShow = false;
		pageData.query.status = e.value[0].type;
		pageData.statusName = e.value[0].label;
		getTable();
	}

	/**
	 * 区域选择确定
	 * @param {Object} item
	 */
	function changeAreaSel(item) {
		pageData.area.sel = item.id;
		pageData.query.areaId = item.id;
	}

	/**
	 * 更多操作打开
	 * @param {Object} table
	 */
	function moreShow(table) {
		actionSheet.title = table.name;
		actionSheet.selTable = table;
		refMoreSheet.value.open();
		if (actionSheet.selTable.orderId) {
			getHistoryOrder({
				orderId: actionSheet.selTable.orderId
			}).then((res) => {
				pageData.orderInfo = res;
			});
		}
	}

	/**
	 * 更多操作选择
	 * @param {Object} index
	 */
	async function actionSheetClick(index) {
		console.log(index);
		const item = actionSheet.selTable;
		if (index == 0) {
			if (!item.orderId) {
				return uni.$utils.showToast('该桌台暂无要结账的订单！');
			}
			const canJieZhang = await hasPermission('允许收款');
			if (!canJieZhang) {
				return;
			}
			return toPay(item);
		}
		if (index == 1) {
			//清台
			return uni.showModal({
				title: '提示',
				content: '确定要清台：' + item.name + '？',
				success(res) {
					if (res.confirm) {
						shopTableClear({
							id: item.id
						}).then((res) => {
							uni.$utils.showToast('清台成功');
							pageData.query.page = 1;
							getTable();
						});
					}
				}
			});
		}
		if (index == 2) {
			if (item.status == 'idle' || item.status == 'unsettled') {
				return go.to('PAGES_CREATE_ORDER', item);
			}else{
				return uni.$utils.showToast('当前台桌不可增减菜！');
			}
			// return uni.$utils.showToast('待开放，请敬请期待！');
		}
		if (index == 3) {
			return uni.$utils.showToast('待开放，请敬请期待！');
		}
		if (index == 4) {
			//打印订单
			if (!item.orderId) {
				return uni.$utils.showToast('该桌台暂无要打印的订单！');
			}

			let res = await printOrder({
				id: actionSheet.selTable.orderId,
				type: pageData.orderInfo.status == 'unpaid' ? 1 : 0
			});
			return;
		}
		if (index == 6) {
			//绑定码牌
			scanCode(item);
			return;
		}
		uni.$utils.showToast('待开放，请敬请期待！');
	}

	/**
	 * 去结账
	 * @param {Object} item
	 */
	function toPay(item) {
		go.to('PAGES_ORDER_PAY', {
			tableId: item.id,
			tableName: item.name,
			orderId: item.orderId,
			discount: 1,
			userId: item.userId
		});
	}

	/**
	 * 绑定码牌
	 * @param {Object} item
	 */
	function scanCode(item) {
		uni.scanCode({
			onlyFromCamera: true,
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				let params = getQueryString(res.result);
				shopTableBind({
					tableCode: params.code,
					id: item.id
				}).then((res) => {
					uni.$utils.showToast('桌台绑定成功');
					setTimeout(() => {
						getTable();
					}, 1500);
				});
			}
		});
	}

	/**
	 * 解码
	 * @param {Object} url
	 */
	function getQueryString(url) {
		let params = {};
		// 正则表达式来匹配URL中的查询字符串
		let reg = /(?:\?|#|&){1}([^=]*)=([^&]*)/g;
		url.replace(reg, (match, key, value) => {
			params[key] = value;
		});
		return params;
	}

	/**
	 * 搜索
	 */
	function searchConfirm() {
		pageData.query.page = 1;
		getTable();
	}

	/**
	 * 页数改变事件
	 * @param {Object} page
	 */
	function pageChange(page) {
		pageData.query.page = page;
		getTable();
	}
</script>

<style lang="scss" scoped>
	.fixed-top {
		z-index: 10;
	}

	.input-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 26rpx;
		background-color: $J-bg-ff;

		.input-main {
			flex: 1;
			display: flex;
			align-items: center;
			height: 64rpx;

			image {
				padding: 22rpx;
				width: 26rpx;
				height: 26rpx;
			}

			input {
				flex: 1;
				font-size: 27rpx;
			}

			::v-deep uni-button {
				font-size: 28rpx;
				color: $my-main-color;
				background: rgba(255, 255, 255, 1);
			}

			::v-deep.uni-easyinput {
				.uni-easyinput__content {
					background-color: $J-bg-f5 !important;
					border-radius: $J-b-r12;

					.uni-easyinput__content-input {
						padding-left: 0 !important;

						.uni-input-input {
							border-radius: $J-b-r12 !important;
							overflow: hidden !important;
						}
					}

					.uni-input-placeholder {
						font-size: 27rpx;
					}

					.uni-icons {
						color: rgba(230, 230, 230, 1) !important;
					}
				}
			}
		}
	}

	.table-type {
		flex-wrap: wrap;
		padding: 0 10rpx 0 10rpx;

		.item {
			width: 25%;
			margin-bottom: 10rpx;

			.box {
				position: relative;
				padding: 10rpx;
				border-radius: 10rpx;

				&::after {
					position: absolute;
					display: block;
					content: '';
					top: 0;
					bottom: 0;
					width: 2px;
					border-radius: 2px;
					right: -20rpx;
					background-color: rgba(255, 255, 255, 0.5);
				}
			}

			&:nth-of-type(4n) {
				.box::after {
					background-color: transparent;
				}
			}

			&.sel {
				.box {
					background-color: rgba(255, 255, 255, 0.6);
				}
			}
		}
	}

	.search-box {
		background-color: #fff;
		padding: 16rpx 0;
		display: flex;

		.search-btn {
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			// width: 164rpx;
			transition: all 0.3s ease-in-out;
			background-color: rgb(247, 247, 247);
			border-radius: 100px;
		}
	}

	.status {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.icon-arrow-down-fill {
		width: 16rpx;
		height: 10rpx;
	}

	.list {
		// margin-top: 52px;
	}
</style>