<template>
	<view class="scanCode-wrap">
		<view class="barCode" id="barcode"></view>
		<view class="info-body">
			<view class="info" v-if="productInfo">
				<view>
					<view class="shelfPlaceCode">
						<text v-if="productInfo.shelfCartApi">{{productInfo.shelfCartApi.shelfPlaceCode}}</text>
						<text v-else-if="productInfo.shelfProductApi">{{productInfo.shelfProductApi.shelfPlaceCode}}</text>
						<text v-else>{{shelfPlaceCode}}</text>
					</view>
					<view class="flex flex_1 align_center">
						<view class="pimgs">
							<u-image :src="productInfo.images?productInfo.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="pinfo flex_1">
							<view class="ptxt flex align_center justify_between">
								<view>{{productInfo.code}}</view>
								<view class="pcode" v-if="productInfo.shelfProductApi">
									可用库存：
									<text>{{productInfo.shelfProductApi.qty}}</text>
									{{productInfo.unit}}
								</view>
							</view>
							<view class="pname">
								{{productInfo.productName}}
							</view>
						</view>
					</view>
				</view>
				<view class="product-nums">
					<view>本次上架数量<text>(左右滑动选择)</text></view>
					<view class="numsBox flex align_center justify_between">
						<view class="a-left" @click="numsBoxScroll(0)"><u-icon name="arrow-left"></u-icon></view>
						<scroll-view class="scroll-nums" scroll-x="true" :scroll-left="scleft">
							<view class="ntabs-box flex align_center">
								<view :id="'nums'+item" class="ntabs" @click="saveData(item)" :class="curQty==item?'active':''" v-for="item in 99" :key="item">
									{{item<10?('&nbsp;'+item+'&nbsp;'):item}}
								</view>
							</view>
						</scroll-view>
						<view class="a-right" @click="numsBoxScroll(1)"><u-icon name="arrow-right"></u-icon></view>
					</view>
				</view>
				<view class="infoTits" v-if="productInfo.shelfCartApi">产品已录入，请确认数量</view>
			</view>
			<view class="noData" v-else>
				暂无扫描结果
			</view>
		</view>
		<!-- 确认弹框 -->
		<u-popup v-model="confirmModal" closeable mode="bottom" border-radius="14" width="80%" @close="modalConfirm">
			<view style="display: flex;flex-direction:column;justify-content: center;padding: 30rpx 30rpx 120rpx;">
				<view style="margin-top: 40rpx;text-align: center;">没有找到该产品，请重新扫描</view>
				<view style="color: #999;padding: 30upx 30upx 50upx;text-align: center;">试一试</view>
				<view style="text-align: center;display: flex;justify-content: space-between;">
					<u-button style="width: 40%;" type='primary' shape="circle" @click="searchProduct()" size="medium">按产品编码搜索</u-button>
					<!-- <u-button style="width: 40%;" @click="modalConfirm" type='primary' shape="circle" size="medium">继续扫码</u-button> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { queryProduct, shelfCartSave } from '@/api/shelfCart'
	export default {
		components: { },
		data() {
			return {
				barcode:null,
				shelfSn: null,
				shelfName: '',
				layer:'',
				confirmModal: false,
				productInfo: null,
				shelfPlaceCode: '',
				shelfCartSn: '',
				curQty: '',
				scleft: 0,
				fromPage: null,
				qrCode: '',
				numsWidth: 52
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '扫描条形码—' +this.layer+'层'
			})
			// 设置高度
			const query = uni.createSelectorQuery().in(this);
			query.select('#barcode').boundingClientRect(data => {
				this.barcode.setStyle({
					width: data.width + 'px',
					height: data.height	+ 'px'	// 调整扫码控件的位置
				})
			}).exec()
		},
		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)
			// 初始化摄像头
			this.init()
		},
		onBackPress(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.searchProduct()
		},
		methods: {
			numsBoxScroll(type){
				this.scleft = type ? (this.scleft+this.numsWidth*3) : (this.scleft-this.numsWidth*3)
			},
			searchProduct(){
				uni.redirectTo({
					url: "/pages/batchShelves/searchProduct?shelfSn="+this.shelfSn+'&layer='+this.layer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn+'&from='+this.fromPage
				})
			},
			// 扫码结果
			scanResult(){
				const _this = this
				uni.showLoading({
					title: "正在查询产品信息"
				})
				let params = {
					qrCode: this.qrCode,
					shelfSn: this.shelfSn,
					shelfTierCode: this.layer
				}
				console.log(params)
				queryProduct(params).then(res => {
					console.log(res)
					if(res.status == 200&&res.data&&res.data.productList&&res.data.productList.length){
						const ret = res.data.productList[0]
						 this.productInfo = ret
						 this.shelfPlaceCode = res.data.shelfPlaceCode
						 // 数量区域宽度
						 const query = uni.createSelectorQuery().in(_this);
						 query.select('#nums1').boundingClientRect(data => {
							 _this.numsWidth = data ? (data.width + 20) : 52
						 }).exec()
						 // 已录入
						 if(ret.shelfCartApi){
							 this.curQty = ret.shelfCartApi.qty
							 _this.scleft = (_this.curQty -1) * _this.numsWidth
						 }else{
							 this.curQty = ''
							 this.scleft = 0
						 }
						 setTimeout(()=>{
							 this.barcode.start()
						 },2000)
					}else{
						this.confirmModal = true
					}
					uni.hideLoading()
				})
			},
			// 保存
			saveData(nums){
				uni.showLoading({
					title: '正在保存...'
				})
				const row = this.productInfo
				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 => {
					console.log(res)
					if(res.status == 200){
						this.toashMsg('保存成功，继续扫描')
						this.curQty = nums
						this.scanResult()
					}
					setTimeout(()=>{
						uni.hideLoading()
					},4000)
				})
			},
			modalConfirm(){
				this.confirmModal = false
				this.barcode.start()
			},
			startScan(){
				this.barcode.start()
			},
			init(){
				const _this = this
				// 初始化
				this.barcode = plus.barcode.create('barcode', [
					plus.barcode.QR,
					plus.barcode.EAN13,
					plus.barcode.EAN8,
					plus.barcode.UPCA,
					plus.barcode.UPCE,
					plus.barcode.CODABAR,
					plus.barcode.CODE39,
					plus.barcode.CODE128,
					plus.barcode.ITF
				], {
					top:'0px',
					left:'0px',
					width: '100%',
					height: '45%',
					position: 'static',
					frameColor: '#00aaff',
					scanbarColor: '#00aaff'
				})
				 
				// 扫码成功后
				this.barcode.onmarked = function(type, result) {
					console.log(type,result)
					_this.qrCode = result
					_this.scanResult()
				}
				// 扫码识别出错
				this.barcode.onerror = function(error){
					console.log(error)
					_this.toashMsg("条形码错误！")
					_this.barcode.start()
				}
				
				 const currentWebview = this.$mp.page.$getAppWebview()
				 currentWebview.append(this.barcode)
				 this.barcode.start()
			}
		}
	}
</script>

<style lang="less">
	page{
		height: 100vh;
	}
	.scanCode-wrap{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.barCode{
			height: 45%;
		}
		.info-body{
			flex-grow: 1;
			overflow: auto;
			.noData{
				padding: 100rpx 20rpx 0;
				text-align: center;
				color: #999;
			}
			.info{
				background-color: #FFFFFF;
				padding: 10rpx 30upx;
				font-size: 32rpx;
				margin-top: 20rpx;
				.shelfPlaceCode{
					background-color: #f6f6f6;
					text-align: center;
					padding: 10rpx 20rpx;
					border-radius: 50rpx;
					margin-bottom: 15rpx;
				}
				.pimgs{
					padding:0.1rem;
					background:#f8f8f8;
					border-radius:0.3rem;
				}
				.pinfo{
					line-height:normal;
					padding-left: 20rpx;
					color: #666;
					.pcode{
						color:#999;
						text{
							color: #000;
						}
					}
				}
				
				.product-nums{
					border-top: 10rpx solid #eee;
					margin-top: 20rpx;
					> view{
						&:first-child{
							text-align: center;
							color: #999;
							margin-top: 20rpx;
							text{
								font-size: 24rpx;
							}
						}
					}
					.numsBox{
						.scroll-nums{
							width: 80%;
							padding: 10rpx 0;
							.ntabs-box{
								margin: 10rpx 0;
							}
							.ntabs{
								background-color: #fff;
								border:1rpx solid #aeaeae;
								box-shadow: 2rpx 4rpx 6rpx #eee;
								border-radius: 15rpx;
								padding: 10rpx 15rpx;
								margin: 10rpx 20rpx;
							}
							.active{
								border-color: crimson;
								background-color: crimson;
								color: #FFFFFF;
							}
							.a-left,.a-right{
								color: #666;
							}
						}
					}
				}
				.infoTits{
					padding: 30rpx;
					text-align: center;
					color: red;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
