<template>
	<view class="productList flex flex_column">
		<view class="productList-search">
			<view class="search flex align_center">
				<view class="input">
					<u-search 
					v-model="queryWord" 
					@input="$u.debounce(getProductList, 800)"
					@custom="$u.debounce(getProductList, 500)" 
					@search="$u.debounce(getProductList, 500)" 
					@clear="clearSearch" 
					bg-color="#fff" 
					:show-action="false"
					placeholder="请输入产品编码查询"></u-search>
				</view>
				<!-- <view class="icon">
				</view> -->
			</view>
		</view>
		<view class="productList-body">
			<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
				<view class="partList-list-box" v-for="item in productList" :key="item.id">
					<view class="flex align_center flex_1">
						<view class="pimgs">
							<u-image :src="item.images?item.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image>
						</view>
						<view class="pinfo">
							<view class="pname">
								<text v-if="item.shelfCartApi">{{item.shelfCartApi.shelfPlaceCode}}</text>
								<text v-else-if="item.shelfProductApi">{{item.shelfProductApi.shelfPlaceCode}}</text>
								{{item.productName}}
							</view>
							<view class="ptxt flex justify_between">
								<text style="word-break: break-all;">{{item.code}}</text>
								<view v-if="item.shelfProductApi&&item.shelfProductApi.enableFlag==1">
									可用库存：<text>{{item.shelfProductApi.qty}}</text>{{item.unit}}
								</view>
							</view>
						</view>
					</view>
					<view class="ptools flex align_center justify_between">
						<view>{{item.id+'----'+item.pageNo}}</view>
						<view class="pcurnums flex align_center">
							<view class="u-ninput" v-if="item.shelfCartApi">
								<u-number-box :long-press="false" :index="item.id" :input-height="60" @blur="updateNums" @minus="updateNums" @plus="updateNums" color="#000" bg-color="#fff" v-model="item.shelfCartApi.qty" :min="1"></u-number-box>
							</view>
							<view v-else>
								<u-button :loading="status == 'loading'" @click="addItem(item)" plain style="height: 50rpx;line-height: 50rpx;" size="mini" shape="circle">
									<u-icon name="plus"></u-icon> 添加
								</u-button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="productList && productList.length == 0 && status == 'nomore'">
					<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="60"></u-empty>
				</view>
				<view style="padding: 20upx;" v-if="productList.length && status != 'nomore'">
					<u-loadmore :status="status" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { queryProductPage, shelfCartSave } from '@/api/shelfCart'
	export default {
		data() {
			return {
				shelfSn: null,
				shelfName: '',
				layer:'',
				queryWord: '',
				productList: [],
				pageNo:1,
				pageSize: 10,
				total: 0, // 列表总数
				noDataText: '暂无产品',
				status: 'nomore',
				shelfPlaceCode: '',
				fromPage: null
			}
		},
		onLoad(options) {
			this.shelfSn = options.shelfSn
			this.layer = options.layer
			this.shelfName = options.shelfName
			this.customerSn = options.customerSn
			this.fromPage = options.from||''
			console.log(options)
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '按产品编码搜索—' +this.layer+'层'
			})
		},
		onBackPress(e) {
			console.log(e)
			if(!this.fromPage){
				uni.redirectTo({
					url: "/pages/batchShelves/cartList?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
				})
			}else{
				return false
			}
			return true
		},
		onNavigationBarButtonTap(e) {
			 this.scanProduct()
		},
		methods: {
			// 加载更多
			onreachBottom () {
				if(this.productList.length <this.total ){
					this.pageNo++
					this.getProductList()
				}else{
					this.status = 'nomore';
				}
			},
			scanProduct(){
				uni.redirectTo({
					url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn+'&from='+this.fromPage
				})
			},
			clearSearch(){
				this.queryWord = ''
				this.productList = []
				this.status == 'nomore'
				this.getProductList()
			},
			getProductList(refash,row,pageNo){
				const _this = this
				if(this.queryWord == ''){
					this.productList = []
					return
				}
				let params = {
					pageNo: pageNo || this.pageNo,
					pageSize:this.pageSize,
					code: this.$u.trim(this.queryWord),
					shelfSn: this.shelfSn,
					shelfTierCode: this.layer
				}
				this.status = 'loading'
				queryProductPage(params).then(res => {
					if(res.status == 200&&res.data&&res.data.page&&res.data.page.list&&res.data.page.list.length){
						_this.shelfPlaceCode = res.data.shelfPlaceCode
						if(!refash){
							let list = res.data.page.list
							console.log(list)
							if (list && list.length){
								list.forEach(item=>{
									item.pageNo = params.pageNo
								})
								// 分页 拼接数据
								if (_this.pageNo != 1) {
									_this.productList = _this.productList ? _this.productList.concat(list) : list
								} else {
									_this.productList = list
								}
								_this.total = res.data.page.count
								if (_this.productList.length == res.data.page.count) {
									_this.status = 'nomore'
								} else {
									_this.status = 'loadmore'
								}
							} else {
								_this.productList = list || []
								_this.total = 0
								_this.status = 'nomore'
							}
							_this.noDataText = '暂无匹配产品'
						}else{
							const curRowIndex = _this.productList.findIndex(item => item.id == row.id)
							const newRow = res.data.page.list.find(item => item.id == row.id)
							newRow.pageNo = pageNo
							_this.productList.splice(curRowIndex,1,newRow)
							_this.status = 'nomore'
						}
					}else{
						_this.status = 'nomore'
						_this.productList = []
						_this.shelfPlaceCode = ''
						_this.total = 0
						_this.noDataText = '没有搜索到相关产品'
					}
				})
			},
			// 新增
			addItem(item){
				if(item.shelfProductApi&&item.shelfProductApi.enableFlag==0){
					uni.showToast({
						icon:'none',
						title: '此产品已被禁用，不可添加!'
					})
					return false
				}
				this.saveData(item,1)
			},
			// 修改数量
			updateNums(e){
				console.log(e)
				const row = this.productList.find(item => item.id == e.index)
				const nums = e.value
				this.saveData(row,nums)
			},
			saveData(row,nums){
				console.log(row,nums)
				// 继续修改数量
				uni.showLoading({
					title: '正在保存...'
				})
				const item = row.shelfCartApi || row.shelfProductApi
				const params = {
					shelfSn: this.shelfSn,
					shelfName: this.shelfName,
					shelfTierCode: item?item.shelfTierCode:this.layer,
					shelfPlaceSn: item?item.shelfPlaceSn:undefined,
					shelfPlaceCode: item?item.shelfPlaceCode:this.shelfPlaceCode,
					productSn: row.productSn,
					productCode: row.code,
					qty: nums,
					price: row.price,
					cost: row.terminalPrice,
					shelfCartSn: item?item.shelfCartSn:undefined
				}
				console.log(params)
				shelfCartSave(params).then(res => {
					uni.hideLoading()
					if(res.status == 200){
						// this.toashMsg(res.message)
						if(!item){
							row.shelfCartApi={shelfPlaceCode:this.shelfPlaceCode}
							this.getProductList(true,row,row.pageNo)
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.productList{
		width: 100%;
		height: 100vh;
		.productList-search{
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;
			.search{
				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;
				}
			}
		}
		.productList-body{
			flex-grow: 1;
			background-color: #fff;
			padding: 0 40upx;
			.scroll-view{
				height: calc(100vh - 150rpx);
				box-sizing: border-box;
			}
			.partList-list-box{
				padding: 10px 0;
				border-bottom: 2rpx solid #f5f5f5;
				.pinfo{
					flex-grow: 1;
					padding-left: 20rpx;
					.pname{
						color: #666;
						font-size: 26rpx;
						font-weight: bold;
						word-break: break-all;
						text{
							font-weight: normal;
							margin-right: 10rpx;
							padding: 0 10rpx;
							background: rgba(3, 54, 146, 0.15);
							border-radius: 30rpx;
							color: #033692;
							font-size: 26rpx;
						}
					}
					.ptxt{
						color: #666;
						font-size: 26rpx;
						padding: 10upx 0;
					}
				}
				.ptools{
					color: #666;
					font-size: 24rpx;
					.u-ninput{
						border: 2rpx solid #eee;
						border-radius: 50rpx;
						padding: 0 6rpx;
					}
					/deep/ .u-icon-disabled{
						background: #fff!important;
					}
					/deep/ .u-number-input{
						margin: 0 0;
						border: 2rpx solid #eee;
						border-top: 0;
						border-bottom: 0;
					}
					/deep/ .u-icon-plus, /deep/ .u-icon-minus{
						border-radius: 50rpx;
					}
				}
			}
		}
		 
	}
</style>
