<template>
	<view class="content flex flex_column">
		<view class="tits">请选择产品的货架层号</view>
		<view class="tagbox flex">
			<view>
				<view class="tag" :class="curTag==item?'active':''" v-for="item in list" :key="item" @click="curTag=curTag==item?'':item">
					{{item}}层
				</view>
			</view>
		</view>
		<view class="newbtn flex justify_between" v-if="curTag">
			<u-button shape="circle" @click="searchProduct()" size="medium">按产品编码搜索</u-button>
			<u-button @click="scanProduct()" type='primary' shape="circle" size="medium">扫描条形码匹配</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				curTag: '',
				shelfSn: '',
				shelfName: ''
			}
		},
		onLoad(opts) {
			this.list = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z'.split('、');
			this.shelfName = opts.shelfName
			this.shelfSn = opts.shelfSn
		},
		methods: {
			scanProduct(){
				uni.redirectTo({
					url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.curTag+'&shelfName='+this.shelfName
				})
			},
			searchProduct(){
				uni.redirectTo({
					url: "/pages/batchShelves/searchProduct?shelfSn="+this.shelfSn+'&layer='+this.curTag+'&shelfName='+this.shelfName
				})
			}
		}
	}
</script>

<style lang="less">
	.content{
		width: 100%;
		height: 100vh;
		padding: 20upx;
		background-color: #fff;
		.tits{
			padding: 30upx 0;
			text-align: center;
		}
		.tagbox{
			flex-grow: 1;
			> view{
				margin: 0 auto;
				overflow: hidden;
				width: 100%;
				.tag{
					width: 16%;
					background-color: #fff;
					border:1rpx solid #aeaeae;
					box-shadow: 2rpx 4rpx 6rpx #eee;
					border-radius: 15rpx;
					text-align: center;
					padding: 10rpx 0;
					float: left;
					margin: 20rpx 2%;
				}
				.active{
					background-color: #55aaff;
					border-color: #55aaff;
					color: #fff;
				}
			}
		}
		.newbtn{
			padding: 30upx;
			button{
				width: 45%;
			}
		}
	}
</style>
