<template>
	<view class="moreShelfPart flex flex_column">
		<view class="moreShelfPart-search">
			<view class="p-title flex align_center">
				<text></text>
				<view class="shelfName flex">
					<view>{{shelfInfo.shelfName}}</view>
				</view>
				<view class="btns" @click="showTab = true">
					筛选:({{curTab!='all'?(curTab+'层'):'全部'}})
					<u-icon size="20" name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="search flex align_center">
				<view class="input">
					<u-search 
					v-model="queryWord" 
					@custom="getpartList" 
					@search="getpartList" 
					@clear="clearSearch" 
					@input="$u.debounce(changeSearch, 800)"
					bg-color="#fff" 
					:show-action="false"
					placeholder="请输入货位号/产品编码/产品名称搜索"></u-search>
				</view>
				<view class="icon" @click="toScan">
					<u-icon name="scan"></u-icon>
				</view>
			</view>
		</view>
		<view class="moreShelfPart-body">
			<scroll-view class="nav-right" scroll-y @scrolltolower="onreachBottom">
				<view class="partList-list-box" v-for="item in partList" :key="item.id">
					<view class="product flex align_center">
						<view class="flex align_center flex_1">
							<view class="pimgs">
								<u-image :src="item.productEntity&&item.productEntity.images?item.productEntity.images:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
							</view>
							<view class="pinfo">
								<view class="pname">
									<text>{{item.shelfPlaceCode}}</text>{{item.productCode}}
								</view>
								<view class="pname pname1">
									{{item.productName}}
								</view>
								<view class="ptxt flex align_center justify_between">
									<view>
									  最大库容：<text class="pnums">{{item.maxQty}}{{item.productEntity&&item.productEntity.unit}}</text>
									   / 当前库存：<text class="pnums">{{item.qty}}{{item.productEntity&&item.productEntity.unit}}</text>
									</view>
									<view class="print" @click.stop="print(item)">
										<u-image :src="`/static/${$config('themePath')}/icon_printer@3x.png`" width="45" height="45"></u-image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="partList&&partList.length==0">
					<u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" mode="list" :margin-top="50"></u-empty>
				</view>
				<view style="padding: 20upx;" v-if="status!='loadmore'">
					<u-loadmore :status="status" />
				</view>
			</scroll-view>
		</view>
		<!-- 筛选项 -->
		<u-popup v-model="showTab" mode="right" width="70%">
			<view class="tabBox flex flex_column">
				<view class="tabs">
					<view class="flex">
						<view :class="curTab=='all'?'active':''" @click="tabChange('all')">全部层</view>
						<view :class="item==curTab?'active':'all'" v-for="item in placeTab" :key="item" @click="tabChange(item)">{{item}}层</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { queryShelfProductList,getProductPlace } from '@/api/shelf'
	export default {
		data() {
			return {
				queryWord: '',
				isGobleSearch: false,
				partList: [],
				allList: [],
				pageNo:1,
				pageSize: 15,
				total: 0, // 列表总数
				noDataText: '暂无数据',
				status: 'loading',
				vinstatus: 'loading',
				shelfInfo: {
					shelfSn: '',
					shelfName: ''
				},
				theme: '',
				showTab: false,
				placeTab: [],
				curTab: 'all',
				customBtnStyle: {  //  自定义按钮样式
					borderColor: this.$config('primaryColor'),
					backgroundColor: this.$config('primaryColor'),
					color: '#fff'
				},
			}
		},
		onLoad(options) {
			this.theme = getApp().globalData.theme
			this.shelfInfo = {
				shelfSn: options.shelfSn,
				shelfName: options.shelfName
			}
			this.getpartList()
			this.getShelfPlace()
		},
		onBackPress() {
			if(this.showTab){
				this.showTab = false
				return true
			}
		},
		// 批量打印
		onNavigationBarButtonTap(e) {
			if(this.queryWord=='' && this.placeTab.length>1){
				if(this.curTab=='all'){
					uni.showToast({
						icon: 'none',
						title: '请先筛选层，按层批量打印！',
						duration: 5000
					})
					return
				}
			}
			
			const list = this.allList.filter(item => item.qty>0)
			this.$store.state.vuex_tempPrintList = list
			if(this.shelfInfo&&list.length){
				uni.navigateTo({
					url: "/pages/shelfSetting/batchPrint?page=bdtq&data="+encodeURIComponent(JSON.stringify(this.shelfInfo)) 
				})
			}else{
				uni.showToast({
					icon: 'none',
					title: '没有可打印的产品',
					duration: 5000
				})
			}
		},
		methods: {
			getShelfPlace(flag){
				getProductPlace({ shelfSn: this.shelfInfo.shelfSn }).then(res => {
				  if (res.status == 200) {
					for(let a in res.data){
						this.placeTab.push(a)
					}
					if(!flag){
					  this.curTab = 'all'
					}
				  } else {
				    this.placeTab = []
				  }
				})
			},
			handleClear(){
				this.curTab = 'all'
				this.changeSearch()
			},
			// -------------------
			clearSearch(){
				this.queryWord = ''
				this.changeSearch()
			},
			changeSearch(v){
				this.pageNo = 1
				this.allList = []
				this.partList = []
				this.getpartList()
			},
			tabChange(item){
				this.curTab=item
				this.showTab = false
				this.changeSearch()
			},
			// 获取数字货架列表
			getpartList(){
				const _this = this
				let params = {
					shelfSn: this.shelfInfo.shelfSn,
					queryWord: this.queryWord,
					shelfPlaceCodeHead: this.curTab == 'all' ? '' : this.curTab
				}
				_this.status = 'loading'
				queryShelfProductList(params).then(res => {
					console.log(res)
					uni.hideLoading()
					if(res.status == 200){
						let list = res.data
						if (list && list.length){
							_this.allList = list
							_this.partList = list.slice(0,this.pageSize)
							_this.total = _this.allList.length
							_this.status = 'nomore'
						} else {
							_this.allList = []
							_this.partList = []
							_this.status = 'loadmore'
						}
						_this.noDataText = '没有搜索到产品'
					}else{
						_this.status = 'loadmore'
						_this.partList = []
						_this.total = 0
						_this.noDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
					}
					this.showTab = false
				})
			},
			// 加载更多
			onreachBottom () {
				if(this.partList.length < this.total ){
					this.pageNo = this.pageNo + 1
					this.partList = this.allList.slice(0,this.pageSize*this.pageNo)
				}else{
					this.status = "nomore"
				}
			},
			print(data){
				uni.navigateTo({ url: "/pages/common/printTag/printTag?page=bdtq&data="+JSON.stringify(data)})
			},
			// 扫描
			toScan(){
				this.mpaasScanModule = uni.requireNativePlugin("wss-scan")
				this.mpaasScanModule.scan(
				{
					"scanMode":"Customized",
					"scanStyle":{
						"scanFrameSizePlus":{"width":250,"height":250},
						"scanFrameSize":200,
						"scanLight":"visible",
						"scanText":"对准条形码/二维码进行识别",
						"scanTitle":"扫码打印",
					}
				},
				(result) => {
					console.log(result)
					if(result.scanStatus == 1){
						this.scanResult(result)
					}
				})
			},
			// 扫描结果
			scanResult(data){
				const params = {
					shelfSn: this.shelfInfo.shelfSn,
				}
				// 二维码
				if(data.scanType == 'QRCODE'){
					const ret = data.scanValue.split("&")
					params.queryWord = ret[1] // 产品编码
				}else{
					params.qrCode = data.scanValue
				}
				queryShelfProductList(params).then(res => {
					console.log(res)
					if(res.status == 200){
						if(res.data&&res.data.length){
							if(res.data[0].qty){
								this.print(res.data[0])
							}else{
								uni.showToast({
									icon: "none",
									title: "产品库存不足，不能打印",
									duration: 5000
								})
							}
						}else{
							uni.showToast({
								icon: "none",
								title: "产品不属于此货架，请重新扫描",
								duration: 5000
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.moreShelfPart{
		width: 100%;
		height: 100vh;
		.moreShelfPart-search{
			padding: 10rpx 20rpx;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #f5f5f5;
			
			.p-title{
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				color: #222;
				font-size: 30rpx;
				> text{
						display: block;
						height: 30rpx;
						width: 6rpx;
						background: #0485F6;
						margin-right: 10rpx;
						border-radius: 10rpx;
					}
				.shelfName{
					flex-grow: 1;
					font-weight: bold;
					width: 60%;
					> view{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.btns{
					width:200rpx;
					text-align: right;
					font-size: 28rpx;
					color: #0485F6;
				}
			}
			.search{
				margin-top: 15upx;
				padding: 0.1rem;
				border-radius: 50rpx;
				border:1rpx solid #eee;
				.input{
					flex-grow: 1;
					padding: 4rpx;
				}
				.icon{
					width: 13%;
					text-align: center;
					font-size: 46rpx;
					color: #999;
				}
			}
		}
		.moreShelfPart-body{
			flex-grow: 1;
			background-color: #fff;
		}
		.nav-right{
			height: calc(100vh - 160rpx);
			box-sizing: border-box;
			
			.partList-list-box{
				padding: 20rpx 30rpx;
				border-bottom: 2rpx solid #f5f5f5;
				&:last-child{
					border:0;
				}
				.product{
					flex-grow: 1;
					.checkbox{
						width: 60rpx;
					}
					.pinfo{
						flex-grow: 1;
						padding-left: 20rpx;
						.pname{
							color: #191919;
							margin-bottom: 10rpx;
							text{
								font-weight: normal;
								margin-right: 6rpx;
								padding: 0 20rpx;
								background: rgba(3, 54, 146, 0.15);
								border-radius: 100rpx;
								color: #033692;
								font-size: 24rpx;
							}
						}
						.pname1{
							font-weight: bold;
							font-size: 32rpx;
						}
						.pno{
							background-color: rgba(3, 54, 146, 0.15);
							border-radius: 50rpx;
							padding: 2rpx 20rpx;
							color: #033692;
							font-size: 24rpx;
							margin-right: 10rpx;
						}
						.ptxt{
							font-size: 28rpx;
							color: #999;
							.pnums{
								color: #222;
							}
						}
					}
				}
			}
		}
		
		// 筛选
		.tabBox{
			height: 100vh;
			.tabs{
				flex-grow: 1;
				overflow: auto;
				padding: 20rpx;
				> view{
					flex-wrap: wrap;
					justify-content: space-between;
					> view{
						width: 45%;
						border: 1rpx solid #eee;
						padding: 15rpx;
						border-radius: 50rpx;
						text-align: center;
						margin-bottom: 15rpx;
					}
					.active{
						border:0;
						background-color: #0485F6;
						color: #fff;
					}
				}
			}
			.btns{
				display: flex;
				padding: 20upx;
				justify-content: space-between;
				.handle-btn {
					font-size: 28upx;
				}
			}
		}
	}
</style>
