<template>
	<view>
		<view class="top">
			<u-form labelPosition="left" :model="dataForm" class="sh-form">
				<u-form-item label="容器编号" prop="containerCode" labelWidth="150rpx" :border-bottom="false">
					<u-input v-model="containerCode" border style="background-color: #ffffff;" placeholder="请输入或扫描条码">
					</u-input>
				</u-form-item>
				<u-form-item label="商品条码" prop="goodNo" labelWidth="150rpx" :border-bottom="false">
					<u-input v-model="dataForm.goodNo" border style="background-color: #ffffff;"
						placeholder="请输入或商品扫描条码"></u-input>
				</u-form-item>
				<u-form-item label="上架货位" prop="locationName" labelWidth="150rpx" :border-bottom="false">
					<u-input v-model="dataForm.locationName" border style="background-color: #ffffff;"
						placeholder="请输入或扫描上架货位"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="center" v-if="data !== null">
			<view class="labelValue">
				<span class="bigLabel">容器编号</span>
				<span class="bigValue">{{dataForm.containerCode}}</span>
			</view>
			<view class="labelValue">
				<span class="bigLabel">分配库房</span>
				<span class="bigValue">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.storageName}}</span>
			</view>
			<view class="labelValue">
				<span class="bigLabel">分配货位</span>
				<span
					class="bigValue">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.blLocationName}}</span>
			</view>
			<view class="labelValue">
				<span class="label">商品编号</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bgGoodNo}}</span>
			</view>
			<view class="labelValue">
				<span class="label">商品名称</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bgGoodName}}</span>
			</view>
			<view class="labelValue">
				<span class="label">规格</span>
				<span
					class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bgSpecifications}}</span>
			</view>
			<view class="labelValue">
				<span class="label">厂家</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bpFactory}}</span>
			</view>
			<view class="labelValue">
				<span class="label">产地</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bpWaster}}</span>
			</view>
			<view class="labelValue">
				<span class="label">件装量</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.bpPackageQty}}</span>
			</view>
			<view class="labelValue">
				<span class="label">单位</span>
				<span
					class="value">{{data.businInShelfDVo === null ? '-' : transUnit(data.businInShelfDVo.bpUnit)}}</span>
			</view>
			<view class="labelValue">
				<span class="label">验收数量</span>
				<span class="value">{{data.qty || '-'}}</span>
			</view>
			<view class="labelValue">
				<span class="label">待上架件数</span>
				<span class="value">{{data.ableQty || '-'}}</span>
			</view>
			<view class="labelValue">
				<span class="label">待上架零散数</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.pieceQty}}</span>
			</view>
			<view class="labelValue">
				<span class="label">批号</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.batchNo}}</span>
			</view>
			<view class="labelValue">
				<span class="label">生产日期</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.productionDate}}</span>
			</view>
			<view class="labelValue">
				<span class="label">有效期至</span>
				<span class="value">{{data.businInShelfDVo === null ? '-' : data.businInShelfDVo.expiredDate}}</span>
			</view>
			<view class="labelValue">
				<span class="label">货主</span>
				<span class="value">{{data.bcsConsignorName || '-'}}</span>
			</view>
			<view class="labelValue marginBottom">
				<span class="label">上架件数</span>
				<u-input v-model="caseQty" @input="changeCase" border style="background-color: #ffffff;" placeholder="请输入上架件数"></u-input>
			</view>
			<view class="labelValue">
				<span class="label">上架零散数</span>
				<u-input v-model="pieceQty" @input="changPiece" border style="background-color: #ffffff;" placeholder="请输入上架零散数"></u-input>
			</view>
			<view class="footer">
				<u-button type="primary" @click="errorConfir">提报异常</u-button>
				<u-button type="primary" @click="putConfirm">上架确认</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataForm: {
					goodNo: '',
					locationName: '', //上架货位
					detailId: null, //明细id
					sid: null, //汇总id
					containerCode: "", //容器编号
				},
				caseQty: "", //上架件数
				pieceQty: "", //上架零散数
				containerCode: "",
				data: {
					ableQty: 0,
					qty: 0,
					bcsConsignorName: "",
					businInShelfDVo: {}
				}, //接口数据对象
				dicOptions: []
			}
		},
		onLoad: function(option) {
			this.dataForm.detailId = option.detailId
			this.dataForm.sid = option.sid
			this.dataForm.containerCode = option.containerCode
			this.loadDetail()
			this.getDic(); //获取字典
		},
		methods: {
			// 改变件数
			changeCase(e) {
				this.data.qty = this.data.businInShelfDVo.bpPackageQty * e + Number(this.pieceQty)
			},
			// 改变零散数
			changPiece(e) {
				if(this.caseQty) {
					this.data.qty = this.caseQty * this.data.businInShelfDVo.bpPackageQty + Number(e)
				} else {
					this.data.qty = Number(e)
				}
			},
			loadDetail() {
				this.$u.api.onShelf.getShelf({
					containerCode: this.containerCode,
					goodNo: this.dataForm.goodNo,
					locationName: this.dataForm.locationName,
					sid: this.dataForm.sid,
					did: this.dataForm.detailId
				}).then(res => {
					if(res.code===200) {
						this.data = res.data;
						if (res.data === null || res.data === '') {
							if (this.containerCode === '') {
								this.$u.toast("当前容器无任务");
							} else if (this.dataForm.goodNo === '') {
								this.$u.toast("当前商品无待上架任务");
							} else if (this.dataForm.locationName === '') {
								this.$u.toast("货位不存在");
							}
						}
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			putConfirm() {
				if (this.caseQty === '') {
					this.$u.toast("上架件数不能为空");
					return
				}
				if (this.pieceQty === '') {
					this.$u.toast("上架零散数不能为空");
					return
				}
				this.$u.api.onShelf.confirmShelf({
					did: this.dataForm.detailId, //明细
					id: this.dataForm.sid, //汇总id
					caseQty: this.caseQty,
					pieceQty: this.pieceQty
				}).then(res => {
					if(res.code===200) {
						this.$u.toast('上架成功');
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			errorConfir() {
				this.$u.api.onShelf.billingToAdnormal({
					id: this.data.id,
				}).then(res => {
					if(res.code===200) {
						this.$u.toast('填报成功');
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			getDic() {
				this.$u.api.getByDicType().then(res => {
					this.dicOptions = res.data;
				});
			},
			transUnit(unit) {
				for (let dic in this.dicOptions) {
					if (this.dicOptions[dic].dictValue === unit) {
						return this.dicOptions[dic].dictLabel;
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.top {
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #f2f2f2;
		padding: 0 20rpx;
	}

	.u-form-item {
		padding: 5rpx 0px;
	}

	.center {
		line-height: 55rpx;
		padding: 20rpx 40rpx;

		.labelValue {
			display: flex;
			align-items: center;

			.bigLabel {
				font-size: 36rpx;
				color: #555555;
				width: 160rpx;
			}

			.bigValue {
				font-size: 36rpx;
				color: #333333;
			}

			.label {
				font-size: 24rpx;
				color: #555555;
				width: 160rpx;
				text-align: left;
			}

			.value {
				font-size: 24rpx;
				color: #333333;
			}
		}

		.marginBottom {
			margin-bottom: 20rpx;
		}
	}

	.footer {
		display: flex;
		padding: 20rpx 0;
	}
</style>
