<template>
	<view class="content flex flex_column">
		<view class="searchBar">
			<view class="shelfName">{{shelfName}}</view>
			<view class="search flex align_center">
				<view class="input">
					<u-search 
					focus
					v-model="queryWord" 
					@input="change"
					@custom="getpartList" 
					@search="getpartList" 
					@clear="clearSearch" 
					bg-color="#fff" 
					:action-style="{border:'0.1rpx solid #00aaff',borderRadius:'50rpx',color:'#00aaff'}" 
					placeholder="请输入产品编码或名称搜索"></u-search>
				</view>
				<view class="icon" @click="toScan">
					<u-icon name="scan"></u-icon>
				</view>
			</view>
		</view>
		<view class="check-list">
			<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
				<view class="partList-list-box" v-for="item in partList" :key="item.id">
					<view class="product flex align_center" @click="toEdit(item)">
						<view class="flex align_center flex_1">
							<view class="pimgs">
								<u-image :src="item.productEntity&&item.productEntity.images?item.productEntity.images:`../../static/${$config('themePath')}/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.code}}
								</view>
								<view class="ptxt flex align_center justify_between">
									<view>
										<text class="pcode">{{item.productEntity&&item.productEntity.productName}}</text>
									</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="180" :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: '',
				shelfName:'',
				shelfSn: '',
				pageNo:1,
				pageSize: 10,
				total: 0, // 列表总数
				noDataText: '暂无产品',
				status: 'loading',
				partList: []
			}
		},
		onLoad(opts) {
			this.shelfName = opts.shelfName
			this.shelfSn = opts.shelfSn
			this.getpartList()
		},
		methods: {
			//编辑货位
			toEdit(item){
				const type = 'edit'
				const params = Object.assign({shelfSn: this.shelfSn,shelfName: this.shelfName},item)
				uni.navigateTo({
					url: "/pages/shelfSetting/editShelfHw?detailData="+encodeURIComponent(JSON.stringify(params))+"&type=" + type
				})
			},
			clearSearch(){
				this.queryWord = ''
				this.pageNo = 1
				this.partList = []
				this.getpartList()
			},
			change(v){
				if(v==''){
					this.clearSearch()
				}
			},
			// 获取数字货架列表
			getpartList(){
				const _this = this
				let params = {
				    pageNo: this.pageNo,
				    pageSize: this.pageSize,
					shelfSn: this.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 ){
					this.pageNo++
					this.getpartList()
				}else{
					this.status = "nomore"
				}
			},
			// 扫描
			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 = {
					pageNo: 1,
					pageSize:1,
					shelfSn: this.shelfSn
				}
				// 二维码
				if(data.scanType == 'QRCODE'){
					const ret = data.scanValue.split("&")
					params.queryWord = ret[1] // 产品编码
				}else{
					params.qrCode = data.scanValue
				}
				
				getShelfProductList(params).then(res => {
					console.log(res)
					if(res.status == 200){
						if(res.data&&res.data.list.length){
							this.toEdit(res.data.list[0])
						}else{
							uni.showToast({
								icon: "none",
								title: "产品不属于此货架，请重新扫描",
								duration: 5000
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
.content{
	height: 100vh;
	width: 100%;
	padding: 0 0.5rem;
	background: #fff;
	.searchBar{
		padding: 0.5rem 0;
		.shelfName{
			font-weight: bold;
		}
		.search{
			padding: 0.5rem;
			.input{
				flex-grow: 1;
				border:0.1rpx solid #eee;
				padding: 0.1rpx;
				border-radius: 50rpx;
				padding-right: 10rpx;
			}
			.icon{
				width: 10%;
				text-align: center;
				font-size: 50rpx;
				color: #999;
			}
		}
	}
	.check-list{
		flex-grow: 1;
		.scroll-view{
			height: calc(100vh - 180rpx);
			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{
						font-size: 28rpx;
						color: #191919;
						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: 24rpx;
						}
					}
					.ptxt{
						font-size: 28rpx;
						color: #666;
						.pnums{
							color: #222;
						}
					}
				}
			}
		} 
	}
}
</style>
