<template>
	<view class="">

		<view class="cell flex-y-center">
			<text class="title_left">绑定编号：</text> {{code||'识别编号为空，请重新扫码'}}
		</view>

		<view class="cell flex flex-y-center">
			<view class="title-block required">
				<text class="title_left">绑定类型：</text>
			</view>
			<view class="desc">
				<view class="flex-center flex-x-start">
					<view class="checklist-box " @click="choicepayType(item.type)" v-for="(item,index) of code_arr"
						:key='index' :class="is_type==item.type?'actt':''">
						<view class="radio__inner" :class="is_type==item.type?'act_border':''">
							<view :class="is_type==item.type?'is-default-checked':''"
								class="radio__inner-icon radio__inner-icon ">
							</view>
						</view>
						<text class="checklist-text">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="table" v-if="is_type==1">
			<scroll-view scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="bindscrolltolower">
				<view style="padding-bottom: 20rpx;">
					<text class="title_left">选择桌号</text>
				</view>
				<view class="">
					<view v-for="(item,index) of list" :key='index' class="tableItem"
						:class="table_index==index?'tableItemAct':''" @click="onTableItem(index)">
						<view class="tabel_label">
							<text class="tabel1_label">桌名：</text>{{item.name}}
						</view>
						<view class="tabel_label" style="margin-top: 10rpx;">
							<text class="tabel1_label">序号：</text>{{index+1}}
						</view>
						<view class="tabel_label" style="margin-top: 10rpx;">
							<text class="tabel1_label">桌类型：</text>{{item.typename}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view style="height: 150rpx;"></view>

		<view class="footer-bar-code flex-y-center" style="padding: 0 30rpx;">
			<image src="../static/images/qrcode.png" class="qrcode" @click="bindQr"></image>
			<view class="bottomButtonCode" @click="bindEmpty">
				确认绑定
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				code_arr: [{
						name: '桌码',
						type: '1',

					},
					{
						name: '自助收款码',
						type: '2',
					},
					{
						name: '排队取号码',
						type: '3',
					},
				],
				code: '',
				is_type: 1,
				store_id: '',
				list: [],
				table_index: -1,
				is_bottom: false,
				height:500,
			}
		},

		onLoad(e) {
			this.store_id = uni.getStorageSync("store_id");
			this.code = e.number;
			this.table(1);
		    this.height=wx.getSystemInfoSync().windowHeight - 210;
		},

		onReachBottom() {

		},

		methods: {

			bindscrolltolower() {
				if (!this.is_bottom) {
					this.table(this.page + 1)
				}
			},

			onTableItem(index) {
				this.table_index = index;

			},

			choicepayType(index) {
				this.is_type = index;
				this.table_index = -1;
			},

			bindQr() {
				uni.scanCode({
					success: (res) => {
						console.log(res, "eeeee")
						let result = res.result.split("/smdc/");
						result = result[1]?result:res.result.split("/zhjy/");
						console.log(result)
						this.code = result[1]
					}
				});
			},
			
			bindEmpty() {
				let table_id = '';
				if (this.table_index != -1) {
					table_id = this.list[this.table_index].id
				}
				this.request({
					url: 'Smdcshop/bind_empty_code',
					data: {
						type: this.is_type,
						table_id: table_id,
						store_id: this.store_id,
						code: this.code
					}
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.code = ''
						// uni.showModal({
						// 	title: '提示',
						// 	content:"绑定成功，是否继续绑定？",
						// 	confirmText:"继续",
						// 	cancelText:"取消",
						// 	showCancel: true,
						// 	success: res => {
						// 		if (res.confirm) {
						// 			uni.scanCode({
						// 				success: (res)=> {	
						// 					console.log(res,"eeeee")
						// 					let result = res.result.split("/smdc/");
						// 					this.code = result[1]
						// 					this.table_index = this.table_index+1;
						// 					// this.bindEmpty();
						// 				}
						// 			});
						// 		}else{
						// 			uni.navigateBack()
						// 		}
						// 	}
						// })


					}
				})
			},


			table(page) {
				if (page == 1) {
					this.list = []
					this.page = 1
					this.is_bottom = false;
				}
				this.request({
					url: 'Smdcshop/table_list',
					data: {
						page,
						limit: 30,
						store_id: this.store_id
					}
				}).then(res => {
					if (res.code == 200 && res.data.length) {
						this.list = this.list.concat(res.data)
						this.page = page
					} else {
						this.is_bottom = true
					}

				})
			},

		}
	}
</script>

<style>
	.title_left {
		color: #999;
		font-size: 26rpx;
	}

	.qrcode {
		width: 80rpx;
		height: 80rpx;
		margin-right: 40rpx;
	}

	.cell {
		padding:0 20rpx;
		border-bottom: 1rpx solid #F1F1F1;
		height: 50px;
	}

	.title-block {
		margin-right: 20rpx;
	}

	.checklist-box {

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 5px 0;
		margin-right: 25rpx;
	}

	.radio__inner {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		background-color: #fff;
		z-index: 1;
		-webkit-transition: border-color .3s;
		transition: border-color .3s;
	}

	.radio__inner-icon {
		width: 8px;
		height: 8px;
		border-radius: 10px;
		opacity: 0;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
	}

	.is-default-checked {
		opacity: 1;
		background-color: #5CB85C;
		-webkit-transform: rotate(45deg) scaleY(1);
		transform: rotate(45deg) scaleY(1);
	}

	.checklist-text {
		font-size: 28rpx;
		margin-left: 5px;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
		color: #000;
	}

	.act_border {
		border: 1rpx solid #5CB85C;
	}

	.table {
		padding: 20rpx;
	}

	.tableItem {
		width: 31%;
		display: inline-block;
		border: 1rpx solid #ccc;
		padding: 10px;
		border-radius: 6rpx;
		margin: 0 15rpx 20rpx 0;
		font-size: 24rpx;
		color: #000;
	}

	.tableItemAct {
		border: 1rpx solid #5CB85C;
		color: #07C160;
	}


	.tabel1_label {
		font-size: 24rpx;
		color: #999;
	}

	.footer-bar-code {
		position: fixed;
		bottom: 20rpx;
		width: 100%;
	}

	.bottomButtonCode {
		width: 560rpx;
		height: 98rpx;
		/* margin: 0 auto; */
		line-height: 98rpx;
		text-align: center;
		background: linear-gradient(180deg, #5CB85C, #07C160);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		color: #ffffff;

	}
</style>
