<template>
	<view class="flex-wrap jus-b" style="margin:24upx">
		<view v-for="(item,index) in tableList" class="" @click="findCode(item.qr_code,item.name)" style="width: 49%;text-align: center;margin-bottom: 20upx;background-color: #FFFFFF;border-radius: 24upx;">
			<view class="" style="font-size: 24upx;padding: 34upx 0;">
				桌位号
			</view>
			<view class="" style="font-weight: bold;color: #F64F15;font-size: 100upx;">
				{{item.name}}
			</view>
			<view class="flex jus-b" style="width: 80%;font-size: 32upx;margin: 24rpx auto 44upx;">
				<view @click.stop="delcode(item.table_id,index)" style="color: #808080;background-color: #E0E0E0;padding: 2rpx 34upx;border-radius: 24upx;">删除</view>
				<view @click.stop="showedit(item.table_id)" style="color: #FFFFFF;background-color: #F64F15;padding: 2rpx 34upx;border-radius: 24upx;">修改</view>
			</view>
		</view>


		<uni-popup ref="popup" type="center">
			<view class="" style="background-color: #EEEEEE;padding:44upx 24upx 1upx 24upx;border-radius: 20upx;">
				<view class="flex" style="padding: 20upx 24upx;background-color: #fff;margin-bottom: 20rpx;border-radius: 10upx;">
					<view class="">
						桌号：
					</view>
					<view class="">
						<input type="text" v-model="name" placeholder="桌号三位数 例如:001,002" placeholder-style="font-size:24upx" />
					</view>
				</view>
				<button class="submitbtn" type="default" @click="editcode">确认修改</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		eleTable,
		deleteTable,
		addTable as editTable
	} from "@/utils/api/api.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';

	export default {
		data() {
			return {
				tableList: [],
				name: ''
			}
		},
		components: {
			uniPopup
		},
		onShow() {

		},
		//下拉刷新
		onPullDownRefresh() {
			this.eletable();
			uni.stopPullDownRefresh();
		},
		onLoad() {
			this.eletable();
		},
		methods: {
			findCode(qr_code, name) {
				console.log(qr_code)
				uni.navigateTo({
					url: `/pages/table_code/table_code/table_code?codeurl=${qr_code}&name=${name}`
				})
			},

			eletable() {
				eleTable({}).then(res => {
					if (res.code == 0) {
						this.tableList = res.data
					}
				})
			},

			delcode(table_id, index) {
				let that = this

				uni.showModal({
					title: '提示',
					content: '确定删除？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除'
							})
							deleteTable({
								table_id: table_id
							}).then(res => {
								if (res.code == 0) {
									uni.hideLoading()
									uni.showToast({
										title: res.msg,
										icon: "none",
										success() {
											// that.tableList.splice(index,0)
											that.eletable();
										}
									})

								}
							})
						}
					}
				});


			},
			showedit(table_id) {
				this.$refs.popup.open();
				this.table_id = table_id
			},

			editcode() {
				let that = this
				uni.showLoading({
					title: "正在修改"
				})
				editTable({
					name: that.name,
					table_id: that.table_id
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: "none",
							success() {
								that.eletable();
								that.$refs.popup.close();
								that.name = ""
							}
						})
					}
				});
			}

		},

	}
</script>

<style>
	.submitbtn {
		margin: 60upx 24upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		background: #f64f15;
		border-radius: 6upx;
		font-size: 32upx;
		color: rgba(255, 255, 255, 1);
	}
</style>
