<template>
	<view class="scanCodePrint-wrap flex flex_column">
		<view class="barCode" id="barcode"></view>
		<view class="info-body">
			<view class="flex align-center orderTj" v-if="info">
				<view>
					<view class="redText">{{info.totalQty}}</view>
					<view>总数量</view>
				</view>
				<view>
					<view>{{info.outQty}}</view>
					<view>已扫码</view>
				</view>
			</view>
			<view class="info partList" v-if="partList.length">
				<view class="infoList">
					<view class="title">配件列表</view>
					<view>
						{{partList.length}}款，共<text class="redText">{{totalNums}}</text>件
					</view>
				</view>
				<view v-for="item in partList" :key="item.id" class="flex align-center item-list">
					<view>
						<u-image border-radius="16" width="130" height="130" bg-color="#EBEBEB" ></u-image>
					</view>
					<view>
						<view class="item-name">
						  <text>{{item.productName}}</text>
						</view>
						<view class="item-nums">
							<text>{{item.productCode}}</text>
						</view>
						<view class="item-head">
							<view>
								数量：<text class="redText">{{item.totalQty}}</text>
								已扫：<text>{{item.outQty}}</text>
							</view>
							<text class="item-no">{{item.shelfPlaceCode}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer flex align-center" v-if="info">
			<u-button :throttle-time="100" @click="outShelfOrder" :style="{background:$config('buttonColors'),color:'#fff'}" shape="circle" type="info">确认取货</u-button>
		</view>
	</view>
</template>

<script>
	// import { findBySnShelfOrder, outShelfOrder, scanConfirmShelfOrder } from '@/api/shelf.js'
	// import { clzConfirm } from '@/libs/tools.js'
	export default {
		data() {
			return {
				barcode:null,
				shelfOrderSn: null,
				info: null,
				partList: []
			}
		},
		computed: {
		   totalNums(){
			   let ret = 0
			   this.partList.map(item => {
				   ret += item.totalQty
			   })
			   return ret
		   }
		},
		onReady() {
			// 初始化摄像头
			this.init()
		},
		onLoad(options) {
			this.shelfOrderSn = options.shelfOrderSn
			this.getDetail()
		},
		methods: {
			// 获取详情
			getDetail(){
			  // findBySnShelfOrder({sn: this.shelfOrderSn}).then(res => {
				 //  if(res.status == 200){
					//   this.info = res.data
					//   this.partList = res.data.shelfOrderDetailList
					//   // 此单已全部扫码，是否确认取货
					//   if(this.info.totalQty == this.info.outQty){
					// 	  clzConfirm({
					// 	  	title: '扫码成功',
					// 	  	content: '此单已全部扫码，是否确认取货？',
					// 	  	success: (ret) => {
					// 	  	  if(ret.confirm||ret.index==0){
					// 	  		  _this.outShelfOrder()
					// 	  	  }
					// 	  	}
					// 	  })
					//   }
				 //  }
			  // })
			},
			// 确认取货
			outShelfOrder(){
				// if(this.info.totalQty == this.info.outQty){
				// 	outShelfOrder({id:this.info.id}).then(res => {
				// 		if(res.status == 200){
							
				// 		}
				// 	})
				// }else{
				// 	this.toashMsg("请先扫码取货")
				// }
			},
			// 扫码结果
			scanResult(qrCode){
				console.log(qrCode)
				// const _this = this
				// scanConfirmShelfOrder({
				// 	qrCode: qrCode,
				// 	id: _this.info.id
				// }).then(res => {
				// 	if(res.status == 200){
				// 		_this.toashMsg("扫码成功！")
				// 		// 刷新列表
				// 		_this.getDetail()
				// 		setTimeout(()=>{
				// 			_this.barcode.start()
				// 		},1000)
				// 	}else{
				// 		// clzConfirm({
				// 		// 	title: '扫码失败',
				// 		// 	content: res.message,
				// 		// 	showCancel: false,
				// 		// 	success: (ret) => { 
				// 		// 		_this.barcode.start()
				// 		// 	}
				// 		// })
				// 	}
				// })
			},
			init(){
				const _this = this
				// 初始化
				this.barcode = plus.barcode.create('barcode', ['EAN13'], {
					top:'0px',
					left:'0px',
					width: '100%',
					height: '35%',
					position: 'static',
					frameColor: '#00aaff',
					scanbarColor: '#00aaff'
				})
				// 设置高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#barcode').boundingClientRect(data => {
					this.barcode.setStyle({
						height: data.height	+ 'px'	// 调整扫码控件的位置
					})
				}).exec()
				 
				// 扫码成功后
				this.barcode.onmarked = function(type, result) {
					_this.scanResult(result)
				}
				// 扫码识别出错
				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;
	}
	.scanCodePrint-wrap{
		height: 100%;
		.barCode{
			background-color: #000;
			height: 500upx;
		}
		> view{
			padding: 20rpx;
		}
		.info-body{
			flex-flow: 1;
			overflow: auto;
			height: 60%;
		}
		.redText{
			color: #FB1E1E;
		}
		.orderTj{
			padding: 20rpx;
			background-color: #fff;
			> view{
				text-align: center;
				border-right: 2rpx solid #eee;
				width: 50%;
				color: #666E75;
				.redText{
					color: #FB1E1E;
				}
				&:last-child{
					border: 0;
				}
				> view{
					color: #666E75;
					&:first-child{
						font-size: 56rpx;
					}
				}
			}
			border-radius: 20rpx;
		}
		.info{
			background-color: #FFFFFF;
			padding: 10rpx 30upx;
			font-size: 32rpx;
			margin-top: 20rpx;
			.infoList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #f2f2f2;
				.title{
					font-weight: bold;
				}
				> text{
					&:first-child{
						color: #666E75;
					}
				}
			}
			.item-list{
				border-bottom: 2rpx solid #f2f2f2;
				&:last-child{
					border: none;
				}
				> view{
					padding: 20rpx 0;
					&:first-child{
						margin-right: 20rpx;
						margin-top: 18rpx;
					}
					&:last-child{
						flex-grow: 1;
					}
				}
				.item-name{
					word-wrap: break-word;
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
					margin-top: 10rpx;
				}
				.item-nums{
					padding: 10rpx 0;
					text{
						font-size: 32rpx;
						color: #222222;
					}
				}
				.item-head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666;
					> view{
						&:first-child{
							font-size: 28rpx;
							text{
								margin-right: 30rpx;
							}
						}
					}
					.item-no{
						font-size: 28rpx;
						background: rgba(3, 54, 146, 0.15);
						color: #033692;
						border-radius: 100rpx;
						padding: 2rpx 30rpx;
						margin-right: 20rpx;
						display: block;
					}
				}
			}
		}
		.footer{
			padding: 20upx 40upx;
			background: #FFFFFF;
			uni-button{
				&:after{
					border: 0;
				}
				width: 90%;
				color: #585858;
				font-size: 32rpx;
			}
		}
	}
</style>
