<template>
	<view class="im-container">
		<view class="im-up">
			<view class="im-column">
				<text class="im-text">巷道：</text>
				<view class="im-select">
					<u-input v-model="startTunnel" type="select" class="u-input" placeholder-style="color:#000000"
						placeholder="" border @click="startShow = true" />
					<u-select :mask-close-able="false" :safe-area-inset-bottom="true" v-model="startShow"
						mode="single-column" :list="list" @confirm="confirmStart" />
				</view>
				<span>——</span>
				<view class="im-select">
					<u-input v-model="endTunnel" type="select" class="u-input" placeholder-style="color:#000000"
						placeholder="" border @click="endShow = true" />
					<u-select :mask-close-able="false" :safe-area-inset-bottom="true" v-model="endShow"
						mode="single-column" :list="list" @confirm="confirmEnd" />
				</view>
				<view class="im-button">
					<u-button size="mini" v-if="orderBy===1" @click="changeOrder">正序</u-button>
					<u-button size="mini" v-if="orderBy===0" @click="changeOrder">倒序</u-button>
				</view>
			</view>
			<view class="im-column">
				<u-input class="im-pan" v-model="value" type="text" border placeholder="请扫描盘点货位" @input="change()" />
				
			</view>
			<view class="im-column" style="display: flex;justify-content: space-between;" v-if="result">
				<view>
					<span class="im-name">货 位：</span>
					<text class="im-bold">{{ result.locationCode }}</text>
				</view>
				<span class="im-span">{{ result.storageName }}</span>
			</view>
			<view class="im-column" style="display: flex;justify-content: space-between;" v-if="result">
				<view>
					<span class="im-name">货 主：</span>
					<text>{{ result.consignorName}}</text>
				</view>
				<span class="im-span" v-if="result.invWay==='open'">明盘</span>
				<span class="im-span" v-if="result.invWay==='close'">盲盘</span>
			</view>
			<view class="im-column" style="display: flex;justify-content: space-between;" v-if="result">
				<view>
					<span>商品编号：</span><text>{{ result.goodNo}}</text>
				</view>
				
				<span class="im-span">{{ transInvUnit(result.invType)}}</span>
			</view>
			<view class="im-column" v-if="result">
				<span>商品名称：</span><text>{{ result.goodName}}</text>
			</view>
			<view class="im-column" v-if="result">
				<span class="im-name">规 格：</span>
				<text>{{ result.specifications}}</text>
			</view>
			<view class="im-column" v-if="result">
				<span class="im-name">厂 家：</span>
				<text>{{ result.factory}}</text>
			</view>
			<view class="im-column" v-if="result">
				<span class="im-name">产 地：</span>
				<text>{{ result.waster}}</text>
			</view>
			<view class="im-column" v-if="result">
				<span class="im-name">批 号：</span>
				<text>{{ result.batchNo	}}</text>
			</view>
			<view class="im-column" v-if="result">
				<span>显示效期：</span><text>{{ result.productionDate }}--{{ result.expiredDate }}</text>
			</view>
			<view class="im-down-title" v-if="result">
				<span>件装/单位</span>
				<span>件数</span>
				<span>零散数</span>
				<span>数量</span>
			</view>

			<view v-if="result" class="im-down">
				<view class="im-down-title">
					<span>{{result.packageQty}}/{{transUnit(result.unit)}}</span>
					<span v-if="result.invWay==='open'">
						<u-input style="margin-left: 30rpx;" border v-model="result.invCase" border-color="black"
							placeholder="" :trim="false" :clearable="false"></u-input>
					</span>
					<span v-if="result.invWay==='open'">
						<u-input border v-model="result.invPiece" border-color="black" placeholder="" :trim="false"
							:clearable="false"></u-input>
					</span>
					<span v-if="result.invWay==='open'">{{result.qty}}</span>
				</view>

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

			</view>
			<view class="confirm-button" v-if="result">
				<u-button size="medium" @click="sure()">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: '',
				orderBy: 1,
				startShow: false,
				endShow: false,
				xiangStart: "",
				value: "",
				list: [],
				invOrderNo: '',
				startTunnel: '',
				endTunnel: '',
				dicOptions: []
			};
		},
		onLoad: function(option) {
			this.invOrderNo = option.invOrderNo
			this.getList(option.invOrderNo)
			this.getDic()
			this.getInvTypeDic()
		},
		methods: {
			//盘点类型的字典
			getInvTypeDic() {
				this.$u.api.getInvType().then(res => {
					this.invOptions = res.data;
				});
			},
			transInvUnit(unit) {
				for (let dic in this.dicOptions) {
					if (this.invOptions[dic].dictValue === unit) {
						return this.invOptions[dic].dictLabel;
					}
				}
			},
			// 单位的字典
			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;
					}
				}
			},
			sure() {
				this.$u.api.inventoryPlanning.pdaEntrySave({
					id: this.result.id,
					invQty: this.result.invQty,
					invCase: this.result.invCase,
					invPiece: this.result.invPiece
				}).then((res) => {
					if (res.code === 200) {
						this.$u.toast('盘点成功');
						this.$u.route({
							url: '/pages/inventory/index',
							type: 'navigateTo'
						})
					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			changeOrder() {
				if (this.orderBy) {
					this.orderBy = 0
				} else {
					this.orderBy = 1
				}
				this.getDetail()
			},
			// 获取巷道
			getList(params) {
				this.$u.api.inventoryPlanning.optionByInvOrderNo(params).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.list = res.data.map((item) => ({
							label: item,
							value: item
						}))
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			change() {
				this.invOrderNo = this.value
				this.list = []
				this.startTunnel = ''
				this.endTunnel = ''
				this.getList(this.value)
				this.result = ''
			},
			getDetail() {
				if (this.orderBy && this.startTunnel && this.endTunnel && this.invOrderNo) {
					this.$u.api.inventoryPlanning.queryDetailStockInv({
						orderBy: this.orderBy,
						startTunnel: this.startTunnel,
						endTunnel: this.endTunnel,
						invOrderNo: this.invOrderNo
					}).then(res => {
						console.log(res)
						if (res.code === 200) {
							this.result = res.data
						} else {
							this.$u.toast(res.msg);
						}

					});
				}
			},
			confirmStart(e) {
				console.log(e)
				this.startTunnel = e[0].value;
				this.getDetail()
			},
			confirmEnd(e) {
				console.log(e)
				this.endTunnel = e[0].value;
				this.getDetail()
			}
		}
	}
</script>
<style>
	page {
		height: 100%
	}
</style>
<style lang="scss">
	.im-container {
		background-color: rgba(242, 242, 242, 1);
		height: 100%;

		.im-up {
			background-color: #fff;
			margin: 20rpx 40rpx;
			border: 0.5px solid black;
			height: 100%;

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

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

				.im-span {
					padding-right: 60rpx;
				}

				.im-text {
					padding: 12rpx 20rpx 12rpx 0;
				}

				.im-bold {
					font-weight: bold;
				}

				.span-right {
					position: absolute;
					right: 50px;
				}

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


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

				.down-span {
					border: 0.5rpx black solid;
				}
			}

			.confirm-button {
				display: flex;
				padding-top: 150rpx;
			}
		}

		.im-button {
			display: contents;
		}

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