<template>
	<view class="im-container">
		<view class="im-up">
			<view class="im-column">
				<u-input class="im-pan" border placeholder="请扫描货位或条码" @input="searchData" />
			</view>
			<view class="im-column">
				<span class="im-name">货 位：</span>{{this.data.locationName || '-'}}
				<span class="ku-bie">库别：{{this.data.storageName || '-'}}</span>
			</view>
			<view class="im-column">
				<span class="im-name">货 主：</span>{{this.data.consignorName || '-'}}
			</view>
			<view class="im-column">
				<span>商品编号：</span><text>{{this.data.goodNo || '-'}}</text>
			</view>
			<view class="im-column">
				<span>商品名称：</span><text>{{this.data.goodName || '-'}}</text>
			</view>
			<view class="im-column">
				<span class="im-name">规 格：</span>{{this.data.specifications || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">厂 家：</span>{{this.data.factory || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">产 地：</span>{{this.data.waster || '-'}}
			</view>
			<view class="im-column">
				<span class="im-name">批 号：</span>{{this.data.batchNo || '-'}}
			</view>
			<view class="im-column">
				<span>显示效期：</span><text>{{this.expireDate}}</text>
			</view>
			<u-line color="black" class="line-class" length="90%" />
			<view class="im-down">
				<view class="im-down-title">
					<span>件装/单位</span>
					<span>件数</span>
					<span>零散数</span>
					<span>数量</span>
				</view>
				<view class="im-down-title">
					<span>{{this.data.packageQty}}/ {{transUnit(this.data.unit)}} </span>
					<span style="margin-left: 25rpx;">{{this.data.caseQty}}</span>
					<span>{{this.data.pieceQty}}</span>
					<span>{{this.data.qty}}</span>
				</view>

				<view class="im-down-title">
					<span>入库预分配</span>
					<span>出库预分配</span>
					<span>补货预分配</span>
				</view>
				<view class="im-down-title">
					<span>{{this.data.onlockInQuantity}}</span>
					<span>{{this.data.onlockOutQuantity}}</span>
					<span>{{this.data.onlockReplenishQuantity}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startShow: false,
				data: {},
				expireDate: "",
				dicOptions: []
			};
		},
		mounted() {
			this.getDic()
		},
		methods: {
			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;
					}
				}
			},
			loadList(val) {
				this.$u.api.queryGoodsStock({
					content: val,
				}).then(res => {
					this.data = res.data;
					this.expireDate = res.data.productionDate.substr(0, 10) + '  ——  ' + this.data.expiredDate
						.substr(0, 10);
				});
			},
			searchData(val) {
				this.loadList(val);
			}
		}
	}
</script>
<style>
	page {
		height: 100%
	}
</style>
<style lang="scss">
	.im-container {
		padding: 20rpx;
		height: 100%;

		.im-up {
			margin: 20rpx 40rpx;
			height: 90%;
			background-color: rgba(248, 248, 255, 0.6);
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(211, 211, 211, 0.4);

			.im-column {
				display: flex;
				flex-direction: row;
				padding: 20rpx 30rpx 0 30rpx;

				.im-pan {
					margin-right: 40rpx;
				}



				.ku-bie {
					flex: 1;
					text-align: center;
				}

				.im-name {
					word-spacing: 46rpx;
				}
			}

			.im-down-title {
				margin-top: 50prx;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 30rpx 0 30rpx;

			}

		}

		.line-class {
			padding: 20rpx 0;
			margin: auto !important;
		}

		.u-input {
			width: 150rpx;
		}
	}
</style>
