<template>
	<view class="card">
		<view class="top">
			<view>{{$t('库房/储位')}}：{{`${info.ml002}|${info.ml003}`}}</view>
			<view class="top-r">
				<view class="inventory-data">
					{{$t('库存数')}}： {{info.ml005}}
				</view>
				<u-icon v-if="showDeleteButton" name="minus" size="36" @click="handleDel"></u-icon>
			</view>
		</view>
		<!-- 移除批次号显示，因为现在按批次分组 -->
		<uni-forms :modelValue="info" :label-width="90" label-align="right">
			<uni-forms-item :label="`${$t('调拨数')}：`">
				<uni-easyinput v-model="info.allocateQuantity" type="number" trim="all"
					:placeholder="$t('请输入调拨数')" @change="handleChangeNum" />
			</uni-forms-item>
			<uni-forms-item :label="`${$t('调入仓库')}：`">
				<zxz-uni-data-select
					filterable
					v-model="info.allocateWarehouse"
					dataKey="text"
					dataValue="value"
					:localdata="warehouseRange"
					@change="handleChange"
					@inputChange="handleWarehouseInput"
				/>
			</uni-forms-item>
		<uni-forms-item :label="`${$t('调入储位')}：`">
			<zxz-uni-data-select filterable v-model="info.allocateLocation" dataKey="text" dataValue="value"
				:localdata="storageRange" />
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	import i18n from '@/lang/index';
	export default {
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			i: {
				type: Number,
				default: 0
			},
			batchIndex: {
				type: Number,
				default: 0
			},
			itemIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				warehouseRange: [],
				storageRange: [],
			}
		},
		computed: {
			showDeleteButton() {
				// 每个批次组的第一个项目不显示删除按钮
				return this.itemIndex > 0;
			}
		},
		created() {
			this.getWarehouseList();
			if(this.info.allocateWarehouse) {
				this.getStorageList();
			}
		},
		methods: {
			getWarehouseList() {
				this.$u.api.getWarehouseListApi({})
					.then(res => {
						this.warehouseRange = res.data.map((item) => {
							return {
								...item,
								value: item.mc001,
								text: `${item.mc001}|${item.mc002}`,
							}
						})
					})
			},
			getStorageList() {
				const params = {
					ni001: this.info.allocateWarehouse
				}
				this.$u.api.getStorageListApi(params)
					.then(res => {
						this.storageRange = res.data.map((item) => {
							return {
								...item,
								value: item.ni002,
								text: item.ni002,
							}
						})
					})
			},
			handleAdd() {
				this.$emit('handleAdd');
			},
			handleDel() {
				this.$emit('handleDel', this.i);
			},
			handleChangeNum(e) {
				if (e > this.info.ml005) {
					this.$u.toast(i18n.t('调拨数不能大于库存数'));
				}
			},
			handleChange() {
				this.getStorageList();
			},
			handleWarehouseInput(val) {
				const code = String(val || '').trim();
				if (!code) return;
				const match = this.warehouseRange.find(w => w.value === code);
				this.info.allocateWarehouse = match ? match.value : code;
				this.getStorageList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 24rpx 12rpx 12rpx;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border: 1px solid #d8dadf;
		border-radius: 12rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 24rpx;

			.top-r {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.inventory-data {
					padding-right: 24rpx;
				}
			}
		}

		/* 移除批次信息样式 */

		::v-deep.uni-forms {
			.uni-forms-item {
				margin: 24rpx;

				.uni-forms-item__label {
					font-size: 28rpx;
				}
			}
		}
	}
</style>
