<template>
	<view class="productList flex flex_column">
		<view class="productList-search">
			<view class="search flex align_center">
				<view class="input">
					<u-search 
					focus
					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" @click="toScan">
					<u-icon name="scan"></u-icon>
				</view> -->
			</view>
		</view>
		<view class="productList-body">
			<view class="partList-list-box" v-for="item in productList" :key="item.shelfCartSn">
				<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">{{item.shelfCartApi.shelfPlaceCode}}</text>
							{{item.productName}}
						</view>
						<view class="ptxt flex justify_between">
							<text>{{item.code}}</text>
							<view v-if="item.shelfProductApi">
								可用库存：<text>{{item.shelfProductApi.qty}}</text>{{item.unit}}
							</view>
						</view>
					</view>
				</view>
				<view class="ptools flex align_center justify_between">
					<view></view>
					<view class="pcurnums flex align_center">
						<view class="u-ninput" v-if="item.shelfCartApi">
							<u-number-box :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 @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" 
			style="color:#999;font-size: 26upx;text-align: center;padding: 20upx;">
				最多显示前20条匹配产品，请尝试输入更多内容
			</view>
			<view v-if="productList && productList.length == 0">
				<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="60"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryProductPage, shelfCartSave } from '@/api/shelfCart'
	export default {
		data() {
			return {
				shelfSn: null,
				shelfName: '',
				layer:'',
				queryWord: '',
				productList: [],
				total: 0, // 列表总数
				noDataText: '暂无产品',
				status: 'nomore',
				shelfPlaceCode: ''
			}
		},
		onLoad(options) {
			this.shelfSn = options.shelfSn
			this.layer = options.layer
			this.shelfName = options.shelfName
			this.customerSn = options.customerSn
			uni.setNavigationBarTitle({
				title: '按产品编码搜索——' +this.layer+'层'
			})
		},
		onBackPress(e) {
			console.log(e,'-----------')
			uni.$emit("updateTempHw")
			uni.redirectTo({
				url: "/pages/batchShelves/cartList?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
			})
			return true
		},
		onNavigationBarButtonTap(e) {
			 this.scanProduct()
		},
		methods: {
			scanProduct(){
				uni.redirectTo({
					url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn
				})
			},
			clearSearch(){
				this.queryWord = ''
				this.productList = []
				this.getProductList()
			},
			getProductList(){
				const _this = this
				if(this.queryWord == ''){
					this.productList = []
					return
				}
				uni.showLoading({
					title: "正在查询..."
				})
				let params = {
					pageNo:1,
					pageSize:20,
					code: this.queryWord,
					shelfSn: this.shelfSn,
					shelfTierCode: this.layer
				}
				console.log(params)
				queryProductPage(params).then(res => {
					console.log(res)
					if(res.status == 200&&res.data&&res.data.page){
						this.productList = res.data.page.list
						this.shelfPlaceCode = res.data.shelfPlaceCode
						this.total = res.data.page.count
					}else{
						this.noDataText = '没有搜索到相关产品'
					}
					this.status = 'nomore'
					uni.hideLoading()
				})
			},
			// 新增
			addItem(item){
				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){
				// 继续修改数量
				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.cost,
					shelfCartSn: item?item.shelfCartSn:undefined
				}
				console.log(params)
				shelfCartSave(params).then(res => {
					if(res.status == 200){
						this.toashMsg(res.message)
						this.getProductList()
					}
					uni.hideLoading()
				})
			}
		}
	}
</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:0.1rpx solid #eee;
				.input{
					flex-grow: 1;
					padding: 0.1rpx;
				}
				.icon{
					width: 13%;
					text-align: center;
					font-size: 46rpx;
					color: #999;
				}
			}
		}
		.productList-body{
			flex-grow: 1;
			background-color: #fff;
			padding: 0 40upx;
			overflow: auto;
			.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;
						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>
