<template>
	<view>
		<view class="tab-header">
			<view class="item" :class="{ active: active == 0 }" @click="tabChange(0)">全部</view>
			<view class="item" :class="{ active: active == item.id }" v-for="item in tabs" :key="item.id" @click="tabChange(item.id)">
				{{ item.name }}
			</view>
		</view>
		<view class="list">
			<view class="item" :class="{ active: item.qrcode }" v-for="item in list" :key="item.id" @click="bindCode(item)">
				<text class="t1">{{ item.name }}</text>
				<text class="t2">{{ item.qrcode ? `重新绑定` : '未绑定' }}</text>
			</view>
		</view>
		<u-empty v-if="!list.length" text="空空如也~"></u-empty>
	</view>
</template>

<script>
import  {getQueryString}  from '@/commons/utils/getQueryString.js';
import { tableList, areaList, tableBinding } from '@/http/businessApiManger.js';
export default {
	data() {
		return {
			active: 0,
			tabs: [],
			list: []
		};
	},
	onLoad() {
		this.areaList();
		this.tableList();
	},
	methods: {
		// 绑定
		bindCode(item) {
			uni.scanCode({
				success: (res) => {
					let tableCode = getQueryString(decodeURIComponent(res.result), 'code');
					uni.showModal({
						title: '注意',
						content: `确定绑定该桌码吗？`,
						success: async (res) => {
							if (res.confirm) {
								try {
									uni.showLoading({
										title: '桌码绑定中...',
										mask: true
									});
									await tableBinding({
										qrcode: tableCode,
										id: item.id
									});
									uni.hideLoading();
									uni.showModal({
										title: '注意',
										content: '桌码绑定成功',
										showCancel: false
									});
									this.tableList();
								} catch (e) {
									uni.hideLoading();
								}
							}
						}
					});
				}
			});
		},
		// 切换
		tabChange(id) {
			this.active = id;
			this.tableList();
		},
		// 获取区域列表
		async areaList() {
			try {
				const { data } = await areaList();
				this.tabs = data;
			} catch (e) {
				console.log(e);
			}
		},
		// 新版获取店铺桌码信息
		async tableList() {
			try {
				uni.showLoading({
					title: '加载中...'
				});
				const res = await tableList(this.active);
				this.list = res.data;
				uni.hideLoading();
			} catch (e) {
				console.log(e);
				uni.hideLoading();
			}
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style scoped lang="scss">
$color: #19be6b;
.tab-header {
	display: flex;
	padding: 0 14upx;
	background-color: #fff;
	height: 120upx;
	.item {
		height: inherit;
		padding: 0 28upx;
		display: flex;
		align-items: center;
		font-size: 32upx;
		&.active {
			color: $color;
		}
	}
}
.list {
	display: grid;
	grid-gap: 34upx;
	background-color: #fff;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding: 0 34upx 34upx;
	.item {
		height: 166upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f7f7f7;
		color: #999;
		border-radius: 12upx;
		&.active {
			background-color: $color;
			.t1,
			.t2 {
				color: #fff;
			}
		}
		.t1 {
			font-size: 24upx;
		}
		.t2 {
			font-size: 24upx;
		}
	}
}
</style>
