<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" @click="toScan">
					<u-icon name="scan"></u-icon>
				</view>
			</view>
		</view>
		<view class="productList-body">
			<view class="nav-right-item" v-for="(item, index) in productList" :key="item.id" @click="choose(item)">
				<view class="item-info">
					{{item.code}}
				</view>
				<view class="arrow">
					<u-icon name="arrow-right" color="#969da3" size="28"></u-icon>
				</view>
			</view>
			<view v-if="productList&&productList.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" :load-text="loadText" />
			</view> 
		</view>
	</view>
</template>

<script>
	import { bindProductList } from '@/api/shelf'
	export default {
		data() {
			return {
				queryWord: '',
				isGobleSearch: false,
				productList: [],
				pageNo:1,
				pageSize: 20,
				total: 0, // 列表总数
				noDataText: '暂无产品',
				status: 'nomore',
				customerSn: null,
				shelfSn: null,
				loadText: {
					loading: '搜索中..',
					nomore: '最多显示前20条匹配的产品,请尝试输入更多内容'
				}
			}
		},
		onLoad(opts) {
			this.customerSn = opts.customerSn||''
			this.shelfSn = opts.shelfSn
			console.log(this.customerSn)
		},
		methods: {
			clearSearch(){
				this.queryWord = ''
				this.pageNo = 1
				this.total = 0
				this.productList = []
				this.getProductList()
			},
			// 获取产品列表
			getProductList(){
				if(this.queryWord == ''){
					this.pageNo = 1
					this.total = 0
					this.productList = []
					return
				}
				const _this = this
				let params = {
				    pageNo: this.pageNo,
				    pageSize: this.pageSize,
					code: this.queryWord,
					customerSn: this.customerSn
				}
				_this.status = 'loading'
				bindProductList(params).then(res => {
					uni.hideLoading()
					if(res.status == 200){
						let list = res.data.list
						if (list && list.length){
							// 分页 拼接数据
							if (_this.pageNo != 1) {
								_this.productList = _this.productList ? _this.productList.concat(list) : list
							} else {
								_this.productList = list
							}
							this.total = res.data.count
							_this.status = 'nomore'
						} else {
							_this.productList = list || []
							this.total = 0
							_this.status = 'nomore'
							_this.noDataText = '没有查询到相关产品'
						}
					}else{
						_this.status = 'nomore'
						_this.productList = []
						_this.total = 0
						_this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
					}
				})
			},
			// 选择产品
			choose(item){
				 uni.$emit("addProductToHw",item)
				 uni.navigateBack()
			},
			// 扫描
			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,
					customerSn: this.customerSn
				}
				// 二维码
				if(data.scanType == 'QRCODE'){
					const ret = data.scanValue.split("&")
					params.code = ret[1] // 产品编码
				}else{
					params.qrCode = data.scanValue
				}
				
				bindProductList(params).then(res => {
					console.log(res)
					if(res.status == 200){
						if(res.data&&res.data.list.length){
							this.choose(res.data.list[0])
						}else{
							uni.showToast({
								icon: "none",
								title: "没有查找到此产品,请重新扫描",
								duration: 5000
							})
						}
					}
				})
			}
		}
	}
</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;
			overflow: auto;
			.nav-right-item{
				padding:20upx 0;
				border-bottom: 2rpx solid #f5f5f5;
				display: flex;
				align-items: center;
				&:active{
					background: #f8f8f8;
				}
				.arrow{
					text-align: right;
					padding-left: 20rpx;
				}
				.item-info{
					font-size: 30upx;
					flex-grow:1;
				}
			}
		}
		 
	}
</style>