<template>
	<view class="container">
		<view class="page-block">
			<view class="page-title-block">
				<view class="title">{{table_manager}}信息</view>
			</view>
			<view class="content">
				<view class="cell flex flex-y-center">
					<view class="title-block">
						<text>{{table_manager}}名称</text>
					</view>
					<view class="desc">
						<view class="input-box">{{info.name}}</view>
					</view>
				</view>

				<view class="cell flex flex-y-center">
					<view class="title-block">
						<text>状态</text>
					</view>
					<view class="desc">
						<view class="input-box">{{info.status==1?'已开台':'空闲'}}</view>
					</view>
				</view>

				<view class="cell flex flex-y-center">
					<view class="title-block">
						<text>{{table_manager}}类型</text>
					</view>
					<view class="desc">
						<view class="input-box">{{info.typename}}</view>
					</view>
				</view>


				<view class="cell flex flex-y-center">
					<view class="title-block">
						<text>可使用人数</text>
					</view>
					<view class="desc">
						<view class="input-box">{{info.number}}</view>
					</view>
				</view>


			</view>
		</view>
		<!-- <view class="page-block">
			<view class="page-title-block"></view>
			<view class="content">
				<view class="cell flex flex-y-center arr-r">
					<view class="title-block">
						<text>生成{{table_manager}}码</text>
					</view>
				</view>
				<view class="cell flex flex-y-center arr-r">
					<view class="title-block">
						<text>绑定{{table_manager}}码</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="page-block">
			<view class="page-title-block"></view>
			<view class="content">
				<view class="cell flex flex-y-center">
					<view class="title-block">
						<text>{{table_manager}}二维码</text>
					</view>
				</view>
				<view class="qrcode-block">
					<image :src="info.wx_url" mode="aspectFit" class="qr-code-img"></image>
				</view>
			</view>
		</view>
		<view style="height:30rpx;"></view>
		<view class="footer-bar" style="height: 100rpx;">

			<view class="content flex flex-center" style="height: 100rpx;">


				<view class="detail-btn flex flex-center" style="border-right: 2rpx solid #F4F5F7;" @click="onDel">
					<image src="../static/images/icon_16.png" mode="aspectFit" class="btn-icon"></image>
					<view style="color:#999999">删除</view>
				</view>


				<view class="detail-btn flex flex-center" @click="toEdit">
					<image src="../static/images/icon_17.png" mode="aspectFit" class="btn-icon"></image>
					<view style="color:#3387FF">重新编辑</view>
				</view>

				<view class="detail-btn flex flex-center" style="border-right: 2rpx solid #F4F5F7;"
					@click="onOpen(info.status)">
					<image src="../static/images/zhuozi.png" mode="aspectFit" class="btn-icon"></image>
					<view style="color:#FF5722">{{info.status==1?`清理`:`开台`}}</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				URL: getApp().globalData.URL,
				table_manager: ""
			}
		},

		onLoad(options) {
			let info = {};
			wx.getStorage({
				key: 'tabDetail',
				success: (res) => {
					info = res.data;
					info.wx_url = this.URL + res.data.wx_url;
					this.info = res.data;
				}
			})
			// this.info = info
			this.table_manager = options.table_manager
		},

		methods: {

			toEdit() {
				uni.redirectTo({
					url: `/saomaDiancan/editTable/editTable?table_id=${this.info.id}&table_manager=${this.table_manager}`
				})
			},

			onOpen(status) {
				let a = status == 1 ? `清理${this.table_manager}` : `开台${this.table_manager}`;
				uni.showModal({
					content: `确定${a}?`,
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: "Smdcshop/table_status",
								data: {
									id: this.info.id,
									status: status == 1 ? 0 : 1,
								}
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: status == 1 ? '清理成功' : '开台成功',
										icon: "none",
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)

								}
							})
						}
					}
				})
			},
			onDel() {
				uni.showModal({
					content: `确定删除该${this.table_manager}`,
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: "Smdcshop/table_delect",
								data: {
									id: this.info.id
								}
							}).then(res => {
								if (res.code == 200) {
									uni.navigateBack()
								}
							})
						}
					}
				})
			}
		}
	}
</script>

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

	page {
		background-color: #F4F5F7;
	}

	.qrcode-block {
		padding: 56rpx 0;
	}

	.qrcode-block .qr-code-img {
		display: block;
		width: 414rpx;
		height: 414rpx;
		margin: 0 auto;
	}
</style>
