<template>
	<view>
		<uni-collapse>
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<!-- 					<uni-forms-item label="生产领料任务单" :labelWidth='90' name="drawTaskCode">
									<uni-combox :candidates="drawTaskCodeList"  emptyTips="无" @input="scanBarCode"  v-model="formData.drawTaskCode"></uni-combox>
								</uni-forms-item> -->
				<uni-forms-item label="生产领料任务单" :labelWidth='90' name="drawTaskCode">
					<uni-easyinput ref="myInput" suffixIcon="scan" @iconClick="scanBar" @confirm="scanBarCode"
						v-model="formData.drawTaskCode" type="text" />
				</uni-forms-item>
				<!-- 					<uni-section title="确认生产领料出库单明细单" type="line" padding style="">
									<uni-data-picker :localdata="dataTree" v-model="formData.drawOutDetailCode"
										@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
									</uni-data-picker>
								</uni-section> -->
				<uni-forms-item label="生产领料出库单" :labelWidth='90' name="drawOutCode">
					<uni-combox :candidates="drawOutCodeList" emptyTips="无" @input="scanBarCodeOut"
						v-model="formData.drawOutCode"></uni-combox>
				</uni-forms-item>
				<uni-forms-item label="生产领料出库单明细编码" :labelWidth='90' name="drawOutDetailCode" style="">
					<view style="overflow: visible;z-index: 200;">
						<uni-combox :candidates="drawOutDetailCodeList" style="z-index: 200px;" emptyTips="无"
							@input="selectDetail" v-model="formData.drawOutDetailCode"></uni-combox>
					</view>
					<!-- <scroll-view  style="overflow: visible;z-index: 200px;"> -->
					<!-- <uni-combox :candidates="drawOutDetailCodeList" :z-index="100" emptyTips="无" @input="selectDetail"  v-model="formData.drawOutDetailCode"></uni-combox> -->
					<!-- </scroll-view> -->
				</uni-forms-item>
				<uni-forms-item>

				</uni-forms-item>
			</uni-forms>
			<!-- <uni-collapse-item title="领料确认数量单明细" :open="true" > -->
			<uni-collapse-item title="出库确认数量单明细" :open="true">
				<uni-swipe-action :open="true">
					<uni-swipe-action-item :rightOptions="rightOptions" :key="index"
						v-for="(item, index) in formData.details" @click="(data) => clickDetail(index,data)"
						@change="swipChange">
						<uni-badge :text="index+1" type="primary"></uni-badge>
						<uni-forms-item label="物料编码" :labelWidth='90' :name="'details.'+ index +'.materialCode'">
							<uni-easyinput type="text" disabled v-model="item.materialCode"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="物料名称" :labelWidth='90' :name="'details.'+ index +'.materialName'">
							<uni-easyinput type="text" disabled v-model="item.materialName"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="物料批号" :labelWidth='90' :name="'details.'+ index +'.materialBatchNo'">
							<uni-easyinput disabled type="text" v-model="item.materialBatchNo" />
						</uni-forms-item>
						<uni-forms-item label="物料箱号" :labelWidth='90' :name="'details.'+ index +'.materialLotNo'">
							<uni-easyinput disabled type="number" v-model="item.materialLotNo" />
						</uni-forms-item>
						<uni-forms-item label="数量" :labelWidth='90' :name="'details.'+ index +'number'">
							<uni-easyinput disabled type="number" v-model="item.pickNumber" />
						</uni-forms-item>
						<u-button type="primary" @click="submit(index)">数量正确</u-button>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import {
		listOut,
		getOut,
		listPick,
		addOut,
		listTask,
		getDetails,
		getListDetail,
		updatePick
	} from "@/api/wms/pdcMaterial.js";

	export default {
		mounted() {
			let myInput = this.$refs.myInput;
			let inputWidth = myInput.$el.offsetWidth; // 获取元素宽度
			console.log(inputWidth); // 输出宽度
		},
		data() {
			return {
				formData: {
					drawTaskCode: null,
					drawOutCode: '',
					drawOutDetailCode: '',
					details: [],
				},
				drawOutCode: null,
				drawOutDetailCodeList: [],
				drawOutCodeList: [],
				rightOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#ff2a17'
					}
				}, ],
				rules: {
					drawTaskCode: {
						rules: [{
							required: true,
							errorMessage: '请输入领料任务单!'
						}]
					}
				}
			}
		},
		methods: {
			collapseChange(isOpen) {
				if (isOpen) {
					this.showCombox = true;
				} else {
					this.showCombox = false;
					this.$refs.combox.close(); // 使combox组件关闭
				}
			},
			selectDetail() {
				if (this.formData.drawOutDetailCode) {
					this.formData.details = []
					let obj = this.detailsList.find(item => item.drawOutDetailCode == this.formData.drawOutDetailCode)
					obj.drawTaskCode = this.formData.drawTaskCode;
					getListDetail(obj).then(response => {
						this.formData.details = response.drawPickDetailList.map(obj => {
							obj.storageLocationCode = null;
							if (obj.pickArea) {
								obj.storageLocationCode = obj.pickArea;
							}
							return obj;
						});

					})
				}

			},
			scanBarCodeOut() {
				this.detailsList = [];
				this.drawOutDetailCodeList = [];
				if (this.formData.drawOutCode) {
					listOut({
						drawOutCode: this.formData.drawOutCode
					}).then(async res => {
						getOut(res.rows[0].id).then(async response => {
							if (response.data.wmsDrawOutDetailList.length > 0) {
								this.detailsList = response.data.wmsDrawOutDetailList;
								for (var i in response.data.wmsDrawOutDetailList) {
									this.drawOutDetailCodeList.push(response.data
										.wmsDrawOutDetailList[i].drawOutDetailCode);
								}
							}
						})
					});
				}
				// this.$nextTick(() => {
				// 				this.$refs.collapse.resize();
				// 		});
			},
			scanBarCode() {
				this.drawOutCodeList = [];
				if (this.formData.drawTaskCode) {
					let data = {
						drawTaskCode: this.formData.drawTaskCode
					}
					listOut(data).then(async res => {
						if (res.rows.length > 0) {
							for (var i = 0; i < res.rows.length; i++) {
								this.drawOutCodeList.push(res.rows[i].drawOutCode);
							}
						}
					});
				} else {
					this.$modal.msg("请输入生产领料任务单！")
				}
			},
			scanBar() {
				const _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						_this.formData.drawTaskCode = res.result;
						_this.scanBarCode();
					}
				});
			},
			submit(index) {
				const _this = this;
				_this.$refs.form.validate().then(res => {
					uni.showModal({
						title: '提示',
						content: '您确定数量正确吗？',
						success: function(res) {
							if (res.confirm) {
								if (_this.formData.details[index].checkStatus == '2') {
									_this.$modal.msg("该条明细数量已检验！")
								} else {
									_this.formData.details[index].drawOutCode = _this.formData
										.drawOutCode;
									_this.formData.details[index].checkStatus = "2";
									updatePick(_this.formData.details[index]).then(response => {
										_this.$modal.msgSuccess("检验完成！");
									});
								}

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				});
			},

		}
	}
</script>

<style>
</style>