<template>
	<view class="common-nav-container">

		<view class="title-box">
			<!-- <span class="title-text">出库</span> -->

			<view class="warehoseInfo-box">
				<!-- 扫码 -->
				<view>
					<view v-if="searchType === 3" class="color1 aciton-box">请扫出库单</view>
					<view v-if="searchType === 2" class="color2 aciton-box">请扫箱码</view>
					<!-- 扫描操作 -->
					<view class="pda-search-box">
						<PdaScanInput @getInfo="handleGetInfo" :type="searchType"></PdaScanInput>
					</view>
				</view>
				<!-- 出库单信息 -->
				<uni-card is-full :title="'出库单号:'+ outInfo.shipmentNum"
					:extra="'备注:'+ (outInfo.remarks?outInfo.remarks:'无')">
					<!-- <view class="row">
						<span class="col">库存货物数：{{ quantityTotal }}</span>
						<span class="col">库存箱数：{{ newMaterialList.length }}</span>
					</view> -->
					<view class="row">
						<span class="col">当前已扫货物数：{{ quantityTotal }}</span>
						<span class="col">当前已扫箱数：{{ newMaterialList.length }}</span>
					</view>
				</uni-card>
				<!-- 选择物料号 -->
				<u-input :value="'物料号:'+ material_id" color="#2979ff" fontSize="20px" readonly>
					<template slot="suffix">
						<u-button type="primary" size="mini" @click="show = true">选择物料号</u-button>
					</template>
				</u-input>

				<u-picker :show="show" :columns="columns" @cancel="pick_cancel" @confirm="pick_confirm"></u-picker>
				<!-- 查看出库计划 -->
				<u-button type="primary" size="mini" @click="showPopup = true"
					:disabled="!outInfo.shipmentNum">出库计划查看</u-button>
				<u-popup :customStyle="{padding:'10px'}" mode="center" round closeable safeAreaInsetTop
					:show="showPopup" @close="popupClose" @open="popupOpen">
					<view>
						<u-list width="300px" height="240px">
							<u-list-item v-for="(item, index) in outOrderPlanList" :key="index">
								<u-cell>
									<view slot="title">
										<u-row>
											<u-col span="9">
												<u--text size="40" bold
													:text="item.outOrder+' 计划批次号:\n'+item.packageCode"></u--text>
											</u-col>
											<u-col span="3">
												<u-tag v-if="item.isError" text="计划异常" size="mini" type="error"></u-tag>
												<u-tag v-if="item.isOver" text="已完成" size="mini" type="success"></u-tag>
												<u-tag v-if="!item.isOver" text="未完成" size="mini" type="info"></u-tag>
											</u-col>
										</u-row>
									</view>
									<view slot="label">
										<u--text size="30" :text="'物料号:'+item.partnumber"></u--text>
										<u--text size="30" type="info" :text="'描述:'+item.description"></u--text>
										<u--text size="30" type="primary" :text="'需求零件数:' + item.requireNum"></u--text>
										<u--text size="30" type="info"
											:text="'库存现有箱数:' + item.packageNum + '  库存现有零件数:' + item.partnumberNum"></u--text>
										<u--text size="30" type="warning"
											:text="'计划出库箱数:' + item.packagePlanNum + '  计划出库零件数:' + item.partnumberPlanNum"></u--text>
										<u--text size="30" type="success"
											:text="'该批次已出箱数:' + item.outPackageNum + '  该批次已出零件数:' + item.outPartnumberNum"></u--text>
									</view>
								</u-cell>
							</u-list-item>
						</u-list>
					</view>
				</u-popup>


				<!-- <view>出库单号：{{ outInfo.shipmentNum }}</view>
				<view class="row">
					<view>备注：{{ outInfo.remarks }}</view>
				</view>
				<view class="row">
					<span class="col">已扫货物数：{{ quantityTotal }}</span>
					<span class="col">已扫箱数：{{ newMaterialList.length }}</span>
				</view> -->

			</view>
		</view>
		<!-- 功能切换 -->
		<u-subsection :list="subsectionList" :current="subsectionCurrent" @change="subsectionChange"
			fontSize="36"></u-subsection>
		<!-- 货物列表 -->
		<view class="scroll-view-box" v-if="subsectionCurrent === 0">
			<view class="scroll-view-title">出库清单</view>
			<view v-if="newMaterialList.length === 1">
				<uni-card is-full :title="'批次号:'+newMaterialList[0].patchCode"
					:extra="'数量:'+newMaterialList[0].quantity" @click="handleDeleteItem(0)">
					<u--text size="26"
						:text="'描述:'+ (newMaterialList[0].productionDescribe?newMaterialList[0].productionDescribe:'无描述,请检查零件号是否对应')"></u--text>
				</uni-card>
			</view>
		</view>
		<view class="scroll-view-box" v-if="subsectionCurrent === 1">
			<view class="scroll-view-title">多箱出库清单</view>
			<view>
				<u-list height="260px">
					<u-list-item v-for="(item, index) in newMaterialList" :key="index">
						<uni-card is-full :title="'批次号:'+item.patchCode" :extra="'数量:'+item.quantity"
							@click="handleDeleteItem(index)">
							<u--text size="26"
								:text="'描述:'+ (item.productionDescribe?item.productionDescribe:'无描述,请检查零件号是否对应')"></u--text>
						</uni-card>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="button-box">
			<u-button style="width: 40%" type="primary" @click="handlerDoOut" :disabled="loading"
				:loading="loading">货物出库</u-button>
			<u-button style="width: 40%" type="success" @click="handlerSubmit" :disabled="loading"
				:loading="loading">出库单完成</u-button>
		</view>
	</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';
	// 入库
	export default {
		components: {
			materialItem,
			packageCard
		},
		data() {
			return {
				loading: false,
				showPopup: false,
				// 双击判定
				touchNum: 0,
				clearData: {},
				// 出货单信息
				outInfo: {
					id: '',
					// 出库单号
					shipmentNum: '',
					// 备注
					remarks: '',
					materialList: []
				},
				// 货物信息
				lastPackageInfo: {
					// 工单号
					workoderID: '',
					// 批次号(工单号+箱号+班组)
					patchCode: '',
					// 零件号
					partNumner: '',
					// 描述
					productionDescribe: '',
					// 出厂日期/生产日期
					productionTime: '',
					// 此箱数量
					quantity: 0
				},
				// 新录入货物信息
				newMaterialList: [],

				//工单计划
				outOrderPlanList: [],
				// 1-仓库扫码 2-货物扫码 3-出货单扫码
				searchType: 3,
				subsectionList: ['单箱出库', '多箱出库'],
				subsectionCurrent: 0,
				show: false,
				columns: [
					['无物料号']
				],
				material_id: '无物料号', //物料号
			};
		},
		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;
			}
		},
		methods: {
			init() {
				// 需要展示的参数：【零件号[物料号](35233201041) 描述(鲨鱼鳍)  箱号+班组(BNW240312023_18B1) 数量 时间 】
				// 初始化，并且清空数据
				this.clearData.outInfo = JSON.parse(JSON.stringify(this.outInfo));
				this.clearData.newMaterialList = JSON.parse(JSON.stringify(this.newMaterialList));
				this.clearData.outOrderPlanList = JSON.parse(JSON.stringify(this.outOrderPlanList));
				this.searchType = 3;
			},
			clear() {
				this.outInfo = JSON.parse(JSON.stringify(this.clearData.outInfo));
				this.newMaterialList = JSON.parse(JSON.stringify(this.clearData.newMaterialList));
				this.outOrderPlanList = JSON.parse(JSON.stringify(this.clearData.outOrderPlanList));
				this.searchType = 3;
			},
			// 扫码信息录入
			handleGetInfo(data, type) {
				if (type === 3) {
					// 出货单扫完后是扫箱号
					this.searchType = 2;
					this.outInfo = data;
					this.newMaterialList = [];
					let arry = [];
					this.columns = [];
					this.outInfo.materialList.forEach((item) => {
						arry.push(item.partnumber);
					});
					if (arry.length > 0) {
						this.columns.push(arry);
						this.material_id = this.outInfo.materialList[0].partnumber;
					} else {
						this.columns.push(['无物料号']);
					}

				} else if (type === 2) {
					if (this.subsectionCurrent === 0 && this.newMaterialList.length > 0) {
						uni.showModal({
							title: '提示',
							content: '当前货物未确认出库，请先点击下方出库按钮，出库当前货物！',
							showCancel: false,
							confirmText: '确定'
						});
						return;
					}
					if (this.subsectionCurrent === 1 && this.newMaterialList.length > 0) {
						if (this.newMaterialList.length > 50) {
							uni.showModal({
								title: '提示',
								content: '批量出库数量已达到50箱，请先出库此50箱！',
								showCancel: false,
								confirmText: '确定'
							});
							return;
						}
						for (let item of this.newMaterialList) {
							if (item.patchCode === data.patchCode) {
								uni.showModal({
									title: '提示',
									content: '此货物已录入过!',
									showCancel: false,
									confirmText: '确定'
								});
								return;
							}
						}
					}
					const checkData = {
						production_packcode: data.originalCode,
						shipment_num: this.outInfo.shipmentNum,
						partnumber: this.material_id
					};
					//检查是否可以出货
					WarehoseApi.checkProductionOut(checkData).then((res) => {
						if (res.code === 200 && res.data) {
							this.newMaterialList.push(data);
						} else {
							uni.showModal({
								title: '提示',
								content: '不可出库:' + res.msg,
								showCancel: false,
								confirmText: '确定'
							});
						}
					});
					// 此时扫描的是箱号
					// TODO 检查扫描的箱号零件号是否在此工单下
					// let flag = false;
					// let list = JSON.parse(JSON.stringify(this.outOrderPlan));
					// for(let item of list){
					// 	// 扫描箱的工单号与计划中的批次号对比，数字是否在其中
					// 	if(!item.Patchcode){
					// 		continue;
					// 	}
					// 	if(item.Patchcode.includes(data.workoderID)){
					// 		flag = true;
					// 		break;
					// 	}
					// }
					// if(!flag){
					// 	// 此箱号不在计划内
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '当前货物不在出库单计划内，请扫其他货物！',
					// 		showCancel: false,
					// 		confirmText: '确定'
					// 	});
					// 	return;
					// }
					// TODO 箱出库，并关联到此出库单下
				}
			},
			// 货物出库
			handlerDoOut() {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
				}, 30000)
				if (this.searchType === 3) {
					uni.showModal({
						title: '提示',
						content: '请先扫出库单！',
						showCancel: false,
						confirmText: '确定'
					});
					this.loading = false;
					return;
				}
				const length = this.newMaterialList.length;
				if (length === 0) {
					uni.showModal({
						title: '提示',
						content: '当前未扫描货物！',
						showCancel: false,
						confirmText: '确定'
					});
					this.loading = false;
					return;
				}
				uni.showModal({
					title: '操作',
					content: '当前已扫描：' + length + '箱货物，是否确认执行出库操作?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认出库',
					success: (res) => {
						if (res.confirm) {
							let data = {
								shipmentNum: this.outInfo.shipmentNum,
								patchCode: []
							};
							if (this.subsectionCurrent === 0) {
								data.patchCode = [this.newMaterialList[0].patchCode];
							} else if (this.subsectionCurrent === 1) {
								// 提取货物patchCode
								let patchCodeList = uni.$u.deepClone(this.newMaterialList);
								let newPatchCodeList = [];
								for (let item of patchCodeList) {
									if (item.patchCode === "" || item.patchCode === null) {
										uni.showModal({
											title: '提示',
											content: '箱数据有异常：' + item.originalCode,
											showCancel: false,
											confirmText: '确认'
										});
										this.loading = false;
										return;
									} else {
										newPatchCodeList.push(item.patchCode)
									}

								}
								data.patchCode = newPatchCodeList;
							}
							if (data.patchCode.length === 0) {
								uni.showModal({
									title: '提示',
									content: '无出库箱，不可出库！',
									showCancel: false,
									confirmText: '确认'
								});
								this.loading = false;
								return;
							}
							WarehoseApi.doMaterialOut(data).then((res) => {
								if (res.code !== 200) {
									uni.showModal({
										title: '提示',
										content: '出库异常',
										showCancel: false,
										confirmText: '确认'
									});
									this.loading = false;
									return;
								} else {
									if (res.data.item1 == 100) {
										uni.showModal({
											title: '提示',
											content: '此物料已经出库完成，不可以再出库',
											showCancel: false,
											confirmText: '确认'
										});
										this.newMaterialList = [];
										this.loading = false;
									} else if (res.data.item2 == 200) {
										uni.showModal({
											title: '提示',
											content: '不是此物料最早批次，无法出库',
											showCancel: false,
											confirmText: '确认'
										});
										this.newMaterialList = [];
										this.loading = false;
									} else {
										uni.showModal({
											title: '提示',
											content: '出库成功！已成功出库' + res.data.item2 + '箱',
											showCancel: false,
											confirmText: '确认'
										});
										this.newMaterialList = [];
										this.loading = false;
									}
								}
							});
						}
					}
				});
			},
			// 出库单完成
			handlerSubmit() {
				uni.showModal({
					title: '操作',
					content: '是否确认执行出库单完成操作?完成后将不可继续出库！',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认出库单完成',
					success: (res) => {
						if (res.confirm) {
							//TODO 变更出库单状态
							const data = {
								shipmentNum: this.outInfo.shipmentNum
							};
							WarehoseApi.doOverOutorderplan(data).then((res) => {
								if (res.code === 200) {
									uni.showModal({
										title: '提示',
										content: '此出库单已完成',
										showCancel: false,
										confirmText: '确认'
									});
									this.clear();
								} else {
									uni.showModal({
										title: '提示',
										content: '出库单完成异常！',
										showCancel: false,
										confirmText: '确认'
									});
								}
							});
						}
					}
				});
			},
			//取消
			pick_cancel() {
				this.show = false;
			},
			// 确认
			pick_confirm(e) {
				console.log(e.value);
				this.material_id = e.value[0];
				console.log(this.material_id);
				this.show = false;
			},
			// 长按弹出删除
			handleDeleteItem(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);
			},
			subsectionChange(index) {
				if (this.newMaterialList.length > 0) {
					uni.showModal({
						title: '提示',
						content: '当前货物列表有货物！可双击删除对应货物，全删除后可切换！',
						showCancel: false,
						confirmText: '确认'
					});
					return;
				}
				this.subsectionCurrent = index;
			},
			// 弹窗打开
			popupOpen() {
				this.getPlan();
			},
			// 弹窗关闭
			popupClose() {
				this.showPopup = false;
			},
			// 获取计划
			getPlan() {
				this.outOrderPlanList = [];
				const data = {
					shipment_num: this.outInfo.shipmentNum,
					partnumber: this.material_id
				}
				WarehoseApi.getOutOrderPlanAndOutProductionNum(data).then(res => {
					if (res.code === 200) {
						this.outOrderPlanList = res.data;
					}
				})
			}
		}
	};
</script>

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

	.warehoseInfo-box {
		width: 100%;
		font-size: 20px;
	}

	.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;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-view-box {
		width: 98%;
		margin: 0 auto;
		margin-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		height: 300px;
		background-color: rgba(179, 179, 179, 0.3);
		border-radius: 5px;
	}

	.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;
	}
</style>