<template>
	<view class="container">
		<!-- 	<view class="header-title  flex-y-center box-pack-between">
			<view class="flex-y-center">
				<view class="rund flex-center" @click="choiceAll()">
					<icon type="success_no_circle" size="12" v-if="checkedAll" />
				</view>
				<text class="ft28">全选</text>
			</view>
			
			<view class="ft28 status1" @click="dell">
				一键清空
			</view>
		</view> -->
		<!-- <view class="hg-line"></view> -->
		<view class="list">
			<view class="item flex-y-center" v-for="(item,index) in list" :key="index">
				<!-- <view class="rund" v-if="item.checked">
	                  <view class="rund flex-center" @click="choice(index)">
							<icon type="success_no_circle" size="12" v-if="item.checked" />
					</view>
				</view> -->

				<view class="flex-grow-1">
					<view class="flex border-b">
						<view class="flex-grow-1">
							<view class=" flex-y-center">
								<view class="rund flex-center" @click="choice(index)">
									<icon type="success_no_circle" size="12" v-if="index == act_index" />
								</view>
								<view class="name">
									{{item.pages == "pages/index/index" ? '餐桌码' :
					               	item.pages == "pages/onPay/onPay"?'收款码':item.pages == "pages/lineup/lineup"?'排队取号':''}}
								</view>
								<!-- <view :class="item.status==1?'status1':'status0'">{{item.status==1?'已开台':'空闲'}}</view> -->
							</view>

							<view class="flex flex-y-center">
								<view class="cell flex flex-y-center ft26" style="color: #999;">
									<view class="title">编号：</view>
									<view class="desc">{{item.code}}</view>
								</view>
							</view>

							<view class="flex flex-y-center" v-if="item.table_id">
								<view class="cell flex flex-y-center ft26" style="color: #999;">
									<view class="title">桌号：</view>
									<view class="desc">{{item.table_id}}</view>
								</view>
							</view>

						</view>

						<view class="flex-grow-0">
							<image @click="openImg(item.image)" :src="URL+item.image" class="codeImg"></image>
						</view>
					</view>

					<view class="content flex flex-y-center">
						<view class="cell flex flex-y-center">
							<button @click="onWechat(item)" class="mini-btn" type="primary"
								size="mini">{{item.wechat}}</button>
						</view>
						<view class="cell flex flex-y-center">
							<button @click="onAlipay(item)" class="mini-btn" style="background: #007AFF;" type="primary"
								size="mini">{{item.alipay}}</button>
						</view>
					</view>
				</view>
			</view>
			<view class="no-more">没有更多内容了~</view>
		</view>

		<view class="footer-bar">
			<view class="content flex flex-center">
				<view class="btn" @click="Unbinding">解绑</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id: "",
				list: [],
				page: 1,
				is_bottom: false,
				checkedAll: false,
				table_manager: '',
				act_index: -1,
				URL: getApp().globalData.URL,
			}
		},

		onLoad(options) {
			this.store_id = uni.getStorageSync("store_id")
			if (options.name) {
				uni.setNavigationBarTitle({
					title: `${options.name}管理`
				})
				this.table_manager = options.name || ''
			}
		},

		onShow() {
			this.getData();
		},

		onReachBottom() {

		},
		
		methods: {

			openImg(img) {
				uni.previewImage({
					urls: [this.URL + img]
				})
			},

			onWechat(item) {
				if (item.is_wechat == 1) {
					uni.showToast({
						title: "已绑定",
						icon: 'none'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定绑定微信码吗?',
						showCancel: true,
						success: res => {
							if (res.confirm) {
								this.common(item.id, 1)
							}
						}
					})
				}
			},
			onAlipay(item) {
				if (item.is_alipay == 1) {
					uni.showToast({
						title: "已绑定",
						icon: 'none'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定绑定支付宝码吗?',
						showCancel: true,
						success: res => {
							if (res.confirm) {
								this.common(item.id, 2)
							}
						}
					})
				}

			},

			common(id, type) {

				this.request({
					url: 'Smdcshop/bind_empty_one',
					data: {
						id,
						type,
					}
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							this.getData();
						}, 2000)

					}
				})
			},

			Unbinding() {
				if (this.act_index < 0) {
					uni.showToast({
						title: "请选择解绑码",
						icon: 'none'
					})
					return
				}
				let id = this.list[this.act_index].id;
				this.request({
					url: 'Smdcshop/empty_code_delete',
					data: {
						id: id
					}
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})

						setTimeout(() => {
							this.act_index = -1
							this.getData();
						}, 2000)

					}
				})
			},

			choice(index) {
				this.act_index = index
			},


			dell(e) {
				let arr = getData(this.list);

				function getData(col) {
					return col
						.filter(item => item.checked)
						.map(item => item.id);
				}
				if (arr.length <= 0) {
					uni.showToast({
						title: '请选择桌台',
						icon: "none",
					})
					return
				}

				uni.showModal({
					content: "清空所有桌台吗？",
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: "Smdcshop/tableall_set",
								data: {
									id: arr.join(","),
								}
							}).then(res => {
								if (res.code == 200) {
									this.getData()
								}
							})
						}
					}
				})
			},

			getData() {
				this.request({
					url: 'Smdcshop/empty_code_list',
					data: {
						store_id: this.store_id
					}
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data
					}
				})
			}
		}
	}
</script>

<style>
	@import url("../static/css/common.css");

	page {
		background-color: #F4F5F7;
	}
  .border-b{
	  border-bottom: 1rpx solid #F1F1F1
  }
	.codeImg {
		width: 150rpx;
		height: 150rpx;
	}

	.header-title {
		height: 120rpx;
		background: #FFF;
		position: fixed;
		left: 0;
		width: 100%;
		padding: 0 20rpx;
		z-index: 99;
	}

	.hg-line {
		height: 120rpx;
	}

	.rund {
		height: 40rpx;
		width: 40rpx;
		margin-right: 10rpx;
		border: 1rpx solid #ccc;
		border-radius: 3px;
	}


	.list {
		padding: 30rpx 25rpx;
	}

	.list .item {
		border-radius: 8rpx;
		overflow: hidden;
		padding: 0 20rpx;
		border-left: 8rpx solid #247EFF;
		background-color: #fff;
		margin-bottom: 30rpx;
	}

	.list .item .name {
		height: 80rpx;
		border-bottom: 1rpx solid #f5f5f5;
		font-size: 30rpx;
		line-height: 80rpx;
		font-weight: bold;
	}

	.list .item .content {
		padding: 20rpx 0 24rpx;
	}

	.list .item .content .cell {
		flex: none;
		width: 50%;
		box-sizing: border-box;
		padding-right: 30rpx;
		font-size: 26rpx;
		line-height: 37rpx;
		color: #666;
	}

	.list .item .content .cell .title {
		color: #99A0AD;
	}

	.status0 {
		background: #007AFF;
		color: #FFFFFF;
		padding: 4rpx 10rpx;
		font-size: 26rpx;
		border-radius: 4rpx;
	}

	.status1 {
		border-radius: 4rpx;
		color: #FFFFFF;
		background: #FF5722;
		font-size: 26rpx;
		padding: 4rpx 10rpx;
	}
</style>
