<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" @click="toDetail(index)">
					<view class="box-pack-between flex-y-center">
						<view class="name">{{item.name}}</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">{{table_manager}}ID：</view>
							<view class="desc">{{item.id}}</view>
						</view>
					</view>
					
					<view class="content flex flex-y-center">
						
						<view class="cell flex flex-y-center">
							<view class="title">{{table_manager}}类型：</view>
							<view class="desc">{{item.typename}}</view>
						</view>
						
						<view class="cell flex flex-y-center arr-r">
							<view class="title">可使用人数：</view>
							<view class="desc">{{item.number}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-more">没有更多内容了~</view>
		</view>

		<view class="footer-bar">
			<view class="content flex flex-center">
				<navigator :url="`/saomaDiancan/editTable/editTable?store_id=${store_id}&table_manager=${table_manager}`" class="btn">+新增</navigator>
			</view>
		</view>
	</view>
</template>

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

		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(1);
		},
		
		onReachBottom() {
			if (!this.is_bottom) {
				this.getData(this.page + 1)
			}
		},
		methods: {
			
			choiceAll() {
				if (this.checkedAll) {
					this.list.forEach((v, i) => {
						v.checked = false;
					})
					this.checkedAll = false
				} else {
					this.list.forEach((v, i) => {
						v.checked = true;
					})
					this.checkedAll = true
				}
			},
			choice(index) {
				this.list[index].checked = !this.list[index].checked;
				let allArr = getData(this.list);
				this.checkedAll = this.list.length === allArr.length ? true : false;
				function getData(col) {
					return col
						.filter(item => item.checked)
						.map(item => item.id);
				}
			},
			
			toDetail(index) {
				uni.setStorage({
					key:'tabDetail',
					data:this.list[index]
				})
				uni.navigateTo({
					url: `/saomaDiancan/tableDetail/tableDetail?table_manager=${this.table_manager}`
				})
			},
			
			
			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(1)
								}
							})
						}
					}
				})
			},
		
			getData(page) {
				if (page == 1) {
					this.list = []
					this.page = 1
					this.is_bottom = false;
					console.log(this.list,"this.list")
				}
				this.request({
					url: 'Smdcshop/table_list',
					data: {
						page,
						limit: 10,
						store_id: this.store_id
					}
				}).then(res => {
					if (res.code == 200 && res.data.length) {
						for (let i of res.data) {
							i.checked = false
						}
						this.list = this.list.concat(res.data)
						this.page = page
					} else {
						this.is_bottom = true
					}
				})
			}
		}
	}
</script>

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

	page {
		background-color: #F4F5F7;
	}

	.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>
