<template>
	<view class="orderScanCode-digitalShel flex flex_column">
		<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.confirmQty }}</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.productSn" class="flex align-center item-list">
					<view><u-image :src="item.images" 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.confirmQty }}</text>
							</view>
							<text class="item-no">{{ item.shelfPlaceCode }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer flex align_center justify_center" v-if="info">
			<u-button v-if="!hasScanFinish" :throttle-time="100" @click="scanCode" :custom-style="{ background: '#066cff', color: '#fff',width:'400rpx' }" shape="circle" type="info">
				<u-icon name="scan" color="#fff" size="32"></u-icon>
				点击扫码
			</u-button>
			<u-button v-else :throttle-time="100" @click="outShelfOrder" :custom-style="{ background: '#066cff', color: '#fff',width:'400rpx' }" shape="circle" type="info">
				确认拿货
			</u-button>
		</view>
	</view>
</template>

<script>
import { findBySnShelfOrder, outShelfOrder, scanConfirmShelfOrder } from '@/api/shelf.js'
export default {
	data() {
		return {
			barcode:null,
			shelfOrderSn: null,
			info: null,
			partList: [],
			mpaasScanModule: null
		}
	},
	computed: {
	   totalNums(){
		   let ret = 0
		   this.partList.map(item => {
			   ret += item.totalQty
		   })
		   return ret
	   },
	   hasScanFinish(){
		   return this.info&&this.info.totalQty == this.info.confirmQty
	   }
	},
	onReady() {
	},
	onLoad(options) {
		this.shelfOrderSn = options.shelfOrderSn
		this.getDetail(0)
	},
	methods: {
		// 扫码
		scanCode(){
			const _this = this
			// 允许从相机和相册扫码
			uni.scanCode({
				success: function (res) {
					_this.scanResult(res.result)
				}
			});
		},
		// 获取详情
		getDetail(type){
		  findBySnShelfOrder({sn: this.shelfOrderSn}).then(res => {
			  if(res.status == 200){
				  this.info = res.data
				  this.partList = res.data.shelfOrderDetailList
				  // 此单已全部扫码，是否确认拿货
				  if(this.hasScanFinish){
					  uni.showModal({
					  	title: '扫码成功',
					  	content: '此单已全部扫码，是否确认拿货？',
					  	success: (ret) => {
					  	  if(ret.confirm){
					  		  this.outShelfOrder()
					  	  }
					  	}
					  })
				  }else{
					  if(type){
						 this.confimInfo('是否继续扫码',1)
					  }
				  }
			  }
		  })
		},
		// 确认拿货
		outShelfOrder(){
			if(this.hasScanFinish){
				outShelfOrder({sn:this.shelfOrderSn}).then(res => {
					console.log(res,'确认拿货')
					if(res.status == 200){
						uni.$emit("refreshOrder")
						uni.navigateBack()
					}
				})
			}else{
				this.message("请先扫码拿货")
			}
		},
		confimInfo(msg,type){
			const _this = this
			uni.showModal({
				title: type?'扫码成功':'扫码失败',
				content: msg,
				confirmText:'继续扫码',
				success: (ret) => {
					if(ret.confirm){
						_this.scanCode()
					}
				}
			})
		},
		// 扫码结果
		scanResult(qrCode){
			const _this = this
			console.log(qrCode)
			const params = {
				shelfSn: qrCode.split("&")[0],
				productCode: qrCode.split("&")[1]
			}
			console.log(params)
			if(params.shelfSn != this.info.shelfSn){
				_this.confimInfo('该配件不属于此数字货架',0)
				return
			}
			scanConfirmShelfOrder({
				shelfOrderSn: _this.shelfOrderSn,
				shelfOrderDetailList:[
				        {
				            "productCode": params.productCode,
				            "confirmQty": 1
				        }
				    ]
			}).then(res => {
				if(res.status == 200){
					// 刷新列表
					_this.getDetail(1)
				}else{
					_this.confimInfo(res.message,0)
				}
			})
		},
		message(title){
			uni.showToast({
				icon:'none',
				title: title
			})
		},
	}
}
</script>

<style lang="less">
page {
	height: 100vh;
}
.orderScanCode-digitalShel {
	height: 100%;
	.barCode {
		background-color: #333;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	> view {
		padding: 20rpx;
	}
	.info-body {
		flex-flow: 1;
		overflow: auto;
		height: 100%;
	}
	.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;
	}
}
</style>
