<template>
	<view class="container">
		<image class="top_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/order/orderAMeal.png" mode="aspectFill"></image>
		<view class="content_box">
			<view class="content">
				<view class="title">
					<view class="title_text">请选择就餐人数</view>
					<view class="title_tabNum">桌号A2</view>
				</view>
				<view class="num" :class="{'active':numIndex==-1}">
					<view class="num_item" :class="{'active':numIndex==index }" @click="tabCut(index)" v-for="(item,index) in 9" :key="index">{{item+1}}</view>
					<!-- <view class="num_item" v-else :class="{'active':numIndex==-1 }">其</view> -->
					<u--input  custom-class="num_item" v-model="otherNum" :class="{'active':numIndex==-1 }" @focus="tabCut(-1)" @blur="blur()" border="none" type="number" maxlength="3"></u--input>
				</view>
				<view class="startBtn" @click="start">
					开始点餐
				</view>
			</view>
		</view>

		
		

	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				tableCode: null,
				shopId: null,
				numIndex: 0,
				otherNum: '其他',
				dinersNum: 1,
			};
		},
		onLoad(options) {
			this.tableCode = uni.cache.get('tableCode');
		},
		onShow() {
		},
	
		methods: { 
		
			/**
			 * 切换桌型
			 */
			tabCut(index) {
				console.log(index)
				this.numIndex = index;
				if ( index != -1) {
					this.dinersNum = index+1;
				} else {
					this.otherNum = this.otherNum == "其他" ? "" : this.otherNum;
				}
			},
			
			blur ( index ) {
				this.otherNum = this.otherNum == "" ? "其他" : this.otherNum;
			},
			
			/**
			 * 开始点餐
			 */
			start () {
				if ( this.numIndex == -1 && (this.otherNum == "其他"||this.otherNum <= 0)) {
					uni.showToast({
						title: '请选择就餐人数',
						icon: 'none',
					})
					return;
				}
				if ( this.numIndex == -1 && this.otherNum != "其他") {
					this.dinersNum = this.otherNum
				}
				uni.pro.navigateTo('order_food/order_food', {
					tableCode: this.tableCode,
					dinersNum: this.dinersNum,
				})
			}
		
		}
	};
</script>

<style scoped lang="scss">
	page {
		// background: #f6f6f6;
	}
	.top_bg{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		top: 0;
	}
	.content_box{
		width: 100%;
		padding: 0 28rpx;
		position: absolute;
		bottom: 148rpx;
	}
	.content{
		width: 100%;
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		padding: 48rpx 32rpx 32rpx 32rpx;
		background: #FFFFFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 48rpx;
			.title_text{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
			.title_tabNum{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
		.num{
			display: flex;
			flex-wrap: wrap;
			.num_item{
				width: 104rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				margin-right: 28rpx;
				margin-bottom: 32rpx;
				background-color: #FEF4EB;
				border-radius: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			.num_item:nth-child(5n){
				margin-right: 0;
			}
			::v-deep .u-input{
				width: 104rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				margin-bottom: 32rpx;
				background-color: #FEF4EB;
				border-radius: 12rpx;
				
			}
			::v-deep input{
				font-weight: 400;
				font-size: 28rpx!important;
				color: #333333!important;
				text-align: center!important;
			}
			.active{
				color: #fff;
				background-color: #E8AD7B;
			}
			
		}
		::v-deep .num.active  .u-input{
			width: 104rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			margin-bottom: 32rpx;
			background-color: #E8AD7B!important;
			border-radius: 12rpx;
		}
		::v-deep .num.active input{
			color: #fff!important;
		}
	
	}
	.startBtn{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: #E8AD7B;
		border-radius: 48rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
	
	
</style>