<template>
	<view class="content">
		<view class="title-box">
			<!-- <span class="title-text">拼箱</span> -->
			<view class="warehoseInfo-box">
				<view class="row">
					<span class="col">已扫货物数：{{ quantityTotal }}</span>
					<span class="col">已扫箱数：{{ newMaterialList.length }}</span>
				</view>
				<view>
					<view v-if="searchType === 2" class="color2 aciton-box">请扫货物码</view>
					<!-- 扫描操作 -->
					<view class="pda-search-box">
						<PdaScanInput @getInfo="handleGetInfo" :type="searchType" :hasFocus="false"></PdaScanInput>
					</view>
				</view>
			</view>
		</view>
		<!-- 货物列表 -->
		<view class="scroll-view-box">
			<view class="scroll-view-title">拼箱清单</view>
			<scroll-view :scroll-y="true" class="scroll-view-height">
				<view v-for="(item, index) in newMaterialList" :key="index">
					<materialItem style="background-color: whitesmoke" :index="index" :materialInfo="item" @click.native="handleDeleteItem(item, index)"></materialItem>
				</view>
			</scroll-view>
			<!-- <packageCard v-if="newMaterialList.length > 0" :packageInfo="newMaterialList[newMaterialList.length - 1]"></packageCard> -->
		</view>
		<!-- 底部按钮 -->
		<view class="button-box">
			<u-button style="width: 40%" type="error" @click="clear">清空</u-button>
			<u-button style="width: 40%" type="primary" @click="handlerSubmit">拼箱</u-button>
		</view>
		<!-- 数量选择 -->
		<u-modal :show="modalShow" showCancelButton title="请输入次箱拼入数量" @confirm="modalConfirm" @cancel="modalCancel">
			<view class="slot-content">
				<view>
					<u--text bold size="36" :text="'拼箱后主箱零件数:' + mainPackageQuantity"></u--text>
				</view>
				<view>
					<u--input placeholder="请输入拼入数量" type="number" border="surround" v-model="secondNum"></u--input>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import materialItem from '@/components/material-item/material-item.vue';
import packageCard from '@/components/package-card/package-card.vue';
import * as WarehoseApi from '@/api/warehouse/warehose.js';
import * as GoodsActionApi from '@/api/warehouse/wmGoodsAction.js';
// 拼箱
export default {
	components: {
		materialItem,
		packageCard
	},
	data() {
		return {
			loading: false,
			// 双击判定
			touchNum: 0,
			clearData: {},
			// 货物信息
			packageInfo: {
				// id
				id: '',
				// 工单号
				workoderID: '',
				// 批次号(工单号+箱号+班组)
				patchCode: '',
				// 零件号
				partNumner: '',
				// 标签数量
				goodsNumLogic: 0,
				// 盘点数量（实际）
				goodsNumAction: 0,
				// 描述
				productionDescribe: '',
				// 出厂日期/生产日期
				productionTime: '',
				// 此箱数量
				quantity: 0
			},
			// 新录入货物信息
			newMaterialList: [],
			// 1-仓库扫码 2-货物扫码 3-出货单扫码
			searchType: 2,
			modalShow: false,
			secondNum: 0
		};
	},
	watch: {},
	created() {
		this.init();
	},
	computed: {
		quantityTotal() {
			let num = 0;
			for (let index = 0; index < this.newMaterialList.length; index++) {
				let _num = parseInt(this.newMaterialList[index].quantity);
				_num = _num || 0;
				num += _num * 1;
			}
			return num;
		},
		mainPackageQuantity() {
			try {
				if (this.newMaterialList.length === 2) {
					return this.newMaterialList[0].quantity * 1 + this.secondNum * 1;
				} else {
					return 0;
				}
			} catch (e) {
				return 0;
			}
		}
	},
	methods: {
		init() {
			// 需要展示的参数：【零件号[物料号](35233201041) 描述(鲨鱼鳍)  箱号+班组(BNW240312023_18B1) 数量 时间 】
			// 初始化，并且清空数据
			this.clearData.packageInfo = JSON.parse(JSON.stringify(this.packageInfo));
			this.clearData.newMaterialList = JSON.parse(JSON.stringify(this.newMaterialList));
			this.searchType = 2;
			this.secondNum = 0;
		},
		clear() {
			this.packageInfo = JSON.parse(JSON.stringify(this.clearData.packageInfo));
			this.newMaterialList = JSON.parse(JSON.stringify(this.clearData.newMaterialList));
			this.secondNum = 0;
			this.searchType = 2;
		},
		// 长按弹出删除
		handleDeleteItem(item, index) {
			// 双击判定
			this.touchNum++;
			setTimeout(() => {
				if (this.touchNum >= 2) {
					uni.showModal({
						title: '删除提示',
						content: '是否从拼箱列表中删除此货物?',
						showCancel: true,
						cancelText: '取消',
						confirmText: '删除',
						success: (res) => {
							if (res.confirm) {
								this.newMaterialList.splice(index, 1);
							}
						}
					});
				}
				this.touchNum = 0;
			}, 250);
		},
		// 扫码信息录入
		handleGetInfo(data, type) {
			if (type === 2) {
				// 此时扫描的是箱号
				if (this.newMaterialList.length > 0) {
					for (let item of this.newMaterialList) {
						if (data.patchCode === item.patchCode) {
							uni.showModal({
								title: '提示',
								content: '已扫过此箱！',
								showCancel: false,
								confirmText: '确定'
							});
							return;
						}
					}
				}
				if (this.newMaterialList.length > 2) {
					uni.showModal({
						title: '提示',
						content: '只可录入两箱！',
						showCancel: false,
						confirmText: '确定'
					});
					return;
				}
				const checkData = {
					originalCode: data.originalCode
				};
				// 是否在库
				WarehoseApi.isExistedWarehouse(checkData).then((res) => {
					if (res.code !== 200 || !res.data) {
						uni.showModal({
							title: '提示',
							content: '货物异常或未入库！',
							showCancel: false,
							confirmText: '确定'
						});
						return;
					}
					this.newMaterialList.push(data);
					const searchInfoData = {
						patchCode: data.patchCode
					};
					// 获取解析结果
					WarehoseApi.getInfoByPatchCode(searchInfoData).then((res) => {
						if (res.code === 200) {
							this.packageInfo = res.data;
						} else {
							uni.showModal({
								title: '提示',
								content: '货物数据异常',
								showCancel: false,
								confirmText: '确定'
							});
							return;
						}
					});
				});
			}
		},
		modalConfirm() {
			let data = {
				packageList: this.newMaterialList,
				createBy: 'admin',
				secondNum: this.secondNum || 0
			};
			GoodsActionApi.doConsolidationGoods(data).then((res) => {
				if (res.code === 200) {
					uni.showModal({
						title: '提示',
						content: '拼箱成功！' + res.data.description,
						showCancel: false,
						confirmText: '确认'
					});
					this.modalShow = false;
					this.clear();
				} else {
					uni.showToast({
						icon: 'error',
						title: '拼箱失败！'
					});
					this.modalShow = false;
				}
			});
		},
		modalCancel() {
			this.modalShow = false;
			this.secondNum = 0;
		},
		// 点击拼箱
		handlerSubmit() {
			if (this.newMaterialList.length < 2) {
				uni.showModal({
					title: '提示',
					content: '需要主次两箱才能拼箱！',
					showCancel: false,
					confirmText: '确认'
				});
				return;
			}
			this.secondNum = this.newMaterialList[1].quantity * 1;
			this.modalShow = true;
		}
	}
};
</script>

<style scoped>
.title-box {
	margin-top: 54px;
	margin-bottom: 20px;
	height: 60px;
	font-size: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.warehoseInfo-box {
	font-size: 20px;
	width: 94%;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	background-color: aliceblue;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}

.warehoseInfo-box .row {
	display: flex;
	flex-direction: row;
}

.warehoseInfo-box .row .col {
	width: 50%;
}

.aciton-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.color1 {
	color: yellowgreen;
}

.color2 {
	color: orange;
}

.pda-search-box {
	margin-bottom: 5px;
}

.list-box {
	width: 100%;
}

.scroll-view-title {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scroll-view-box {
	width: 94%;
	margin: 0 auto;
	margin-top: 50px;
	height: 360px;
	padding: 10px;
	background-color: rgba(179, 179, 179, 0.7);
	border-radius: 5px;
}
.scroll-view-height {
	height: 300px;
}
.scroll-view-last {
	width: 100%;
	height: 60px;
	font-size: 20px;
	color: rgba(0, 9, 0, 0.7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 10px;
	background-color: white;
}

.button-box {
	width: 80%;
	margin: 10px auto;
	display: flex;
	flex-direction: row;
}

.changeInput {
	font-size: 20px;
	background-color: gainsboro;
	border: 1px solid grey;
}
</style>
