<template>
	<view class="moreShelfPart flex flex_column">
		<view class="moreShelfPart-search">
			<u-search
			placeholder="请输入货位号/产品编码/产品名称搜索" 
			v-model="queryWord" 
			:show-action="isGobleSearch" 
			@focus="isGobleSearch=true" 
			@blur="isGobleSearch=false"
			@custom="searchPart" 
			@search="searchPart" 
			@clear="clearSearch"
			:action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', 'padding': '12upx 0'}">
			</u-search>
			<view class="p-title">
				<text></text>
				{{shelfInfo.shelfName}}
			</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.productEntity&&item.productEntity.productName}}
								</view>
								<view class="ptxt flex align_center justify_between">
									<view>
										<text class="pcode">{{item.productEntity&&item.productEntity.code}}</text>
									</view>
									<view>
									  库存数量：<text class="pnums">{{item.qty}}{{item.productEntity&&item.productEntity.unit}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="ptools flex align_center justify_between">
						<view></view>
						<view class="print" @click="print(item)">
							<u-image :src="`/static/${$config('themePath')}/icon_printer@3x.png`" width="48" height="48"></u-image>
						</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="total>pageSize || status=='loading'">
					<u-loadmore :status="status" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getShelfProductList } from '@/api/shelf'
	export default {
		data() {
			return {
				queryWord: '',
				isGobleSearch: false,
				partList: [],
				pageNo:1,
				pageSize: 10,
				total: 0, // 列表总数
				noDataText: '暂无货架',
				status: 'loading',
				vinstatus: 'loading',
				shelfInfo: {
					shelfSn: '',
					shelfName: ''
				},
				theme: '',
			}
		},
		onLoad(options) {
			this.theme = getApp().globalData.theme
			this.shelfInfo = {
				shelfSn: options.shelfSn,
				shelfName: options.shelfName
			}
			this.getpartList()
		},
		methods: {
			clearSearch(){
				this.queryWord = ''
				this.pageNo = 1
				this.partList = []
				this.getpartList()
			},
			// 搜索配件
			searchPart(){
				if(this.queryWord != ''){
					this.getpartList()
				}
			},
			// 获取数字货架列表
			getpartList(){
				const _this = this
				let params = {
				    pageNo: this.pageNo,
				    pageSize: this.pageSize,
					shelfSn: this.shelfInfo.shelfSn,
					queryWord: this.queryWord
				}
				_this.status = 'loading'
				getShelfProductList(params).then(res => {
					uni.hideLoading()
					if(res.status == 200){
						let list = res.data.list
						console.log(list)
						if (list && list.length){
							// 分页 拼接数据
							if (_this.pageNo != 1) {
								_this.partList = _this.partList ? _this.partList.concat(list) : list
							} else {
								_this.partList = list
							}
							this.total = res.data.count
							if (_this.partList.length == res.data.count) {
								_this.status = 'nomore'
							} else {
								_this.status = 'loadmore'
							}
						} else {
							_this.partList = list || []
							this.total = 0
							_this.status = 'nomore'
						}
						_this.noDataText = '暂无配件'
					}else{
						_this.status = 'loadmore'
						_this.partList = []
						_this.total = 0
						_this.noDataText = res.message ? res.message : '网络似乎出错了，请稍后再试'
					}
				})
			},
			// 加载更多
			onreachBottom () {
				if(this.partList.length < this.total ){
					if(this.isGobleSearch&&this.queryWord==''){
						return
					}
					this.pageNo++
					this.getpartList()
				}else{
					this.status = "nomore"
				}
			},
			print(data){
				uni.navigateTo({ url: "/pages/common/printTag/printTag?page=bdtq&data="+JSON.stringify(data) })
			}
		}
	}
</script>

<style lang="less">
	.moreShelfPart{
		width: 100%;
		height: 100vh;
		.moreShelfPart-search{
			padding: 20rpx 20rpx 0;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #f5f5f5;
		}
		.p-title{
			padding: 20rpx;
			display: flex;
			align-items: center;
			color: #222;
			font-size: 32rpx;
			text{
				display: block;
				height: 32rpx;
				width: 6rpx;
				background: #0485F6;
				margin-right: 10rpx;
				border-radius: 10rpx;
			}
		}
		.moreShelfPart-body{
			flex-grow: 1;
			background-color: #fff;
		}
		.nav-right{
			padding: 0 30upx;
			height: calc(100vh - 180rpx);
			box-sizing: border-box;
			
			.partList-list-box{
				padding: 10px 0;
				border-bottom: 2rpx solid #f5f5f5;
				&:last-child{
					border:0;
				}
				.product{
					flex-grow: 1;
					.checkbox{
						width: 60rpx;
					}
					.pinfo{
						flex-grow: 1;
						padding-left: 20rpx;
						.pname{
							font-size: 32rpx;
							color: #191919;
							font-weight: bold;
							margin-bottom: 10rpx;
							text{
								font-weight: normal;
								margin-right: 6rpx;
								padding: 0 10rpx;
								background: rgba(3, 54, 146, 0.15);
								border-radius: 100rpx;
								color: #033692;
								font-size: 28rpx;
							}
						}
						.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;
							}
						}
					}
				}
				.ptools{
					margin-top: 20rpx;
					.print{
						padding: 0 10rpx;
					}
				}
			}
		}
	}
</style>
