<template>
	<view>
		<view class="goodsNumber">
			<span class="goodsNumberCode">商品条码</span>
			<u-input v-model="barCode" border placeholder="请输入或扫描商品条码" @input="searchByGoodNo"></u-input>
		</view>
		<view v-if="data">
			<view class="goodsInfo">
				<view class="goodsInfoItem">
					<span class="goodsItemLabel">单据编号</span>
					<span class="goodsItemValue">{{data.orderNo}}</span>
				</view>
				<view class="itemsContend">
					<view class="items">
						<span class="itemsLabel">业主名称</span>
						<span class="itemsValue">{{data.consignorName}}</span>
					</view>
					<view class="items">
						<span class="itemsLabel">供货单位</span>
						<span class="itemsValue">{{data.companyName}}</span>
					</view>
				</view>
				<view class="itemsContend">
					<view class="items">
						<span class="itemsLabel">待收品规</span>
						<span class="itemsValue">{{data.specificationsQty}}</span>
					</view>
					<view class="items">
						<span class="itemsLabel">待收条目</span>
						<span class="itemsValue">{{data.itemQty}}</span>
					</view>
				</view>
			</view>
			<view class="titleValue">
				<span class="title">商品编号：</span>
				<span class="value">{{data.businInOrderDVo.bgGoodNo || '-'}}</span>
			</view>
			<view class="titleValue">
				<span class="title">商品名称：</span>
				<span class="value">{{data.businInOrderDVo.bgGoodName || '-'}}</span>
			</view>
			<view class="titleValue">
				<span class="title">规 格：</span>
				<span class="value">{{data.businInOrderDVo.bgSpecifications || '-'}}</span>
			</view>
			<view class="titleValue">
				<span class="title">件装量：</span>
				<u-input v-model="dataForm.packageQty" border placeholder="请输入件装量" @click="choosePackage" disabled>
				</u-input>
			</view>
			<view class="titleValue">
				<span class="title">单 位：</span>
				<span class="value">{{ transUnit(data.businInOrderDVo.bpUnit) || 0'-'}}</span>
			</view>
			<view class="titleValue">
				<span class="title">厂 家：</span>
				<span class="value">{{data.businInOrderDVo.bpFactory || '-'}}</span>
			</view>
			<view class="titleValue">
				<span class="title">产 地：</span>
				<span class="value">{{data.businInOrderDVo.bpWaster || '-'}}</span>
			</view>
			<view class="titleValue">
				<span class="title">未收数量：</span>
				<span class="itemsValue" v-if="data">{{data.businInOrderDVo.ableQty}}</span>
				<span class="itemsValue" v-else></span>
			</view>
			<view class="titleValue">
				<span class="title">件 数：</span>
				<u-input v-model="dataForm.actualCaseQty" border placeholder="请输入件数" @input="sumActualQty"></u-input>
			</view>
		
			<view class="titleValue">
				<span class="title">零散数：</span>
				<u-input v-model="dataForm.actualPieceQty" border placeholder="请输入零散数" @input="changePiece"></u-input>
			</view>
      <view class="titleValue">
      	<span class="title">收货数量：</span>
      	<u-input v-model="dataForm.actualQty" border placeholder="请输入收货数量" disabled></u-input>
      </view>
			<!-- <view class="titleValue">
				<span class="title">批 号：</span>
				<u-input v-model="dataForm.batchNo" border placeholder="请输入批号"></u-input>
			</view>
			<view class="titleValue">
				<span class="title">生产日期：</span>
				<span @click="choosedStartDate">{{ dataForm.productionDate }}</span>
				<u-calendar v-model="starttime" max-date="2050-12-31" :mode="'date'" @change="changeProduct">
				</u-calendar>
			</view>
			<view class="titleValue">
				<span class="title">有效期至：</span>
				<span @click="choosedDate">{{ dataForm.expiredDate }}</span>
				<u-calendar v-model="endtime" max-date="2050-12-31" :mode="'date'" @change="changeExpire">
				</u-calendar>
			</view> -->
			<!-- <view class="titleValue">
				<span class="title">库别：</span>
				<u-input v-model="storageName" type="select" placeholder="请选择库别" class="u-input"
					placeholder-style="color:#000000" @click="kube = true" />
				<u-select v-model="kube" :list="storageList" @confirm="confirmKube"></u-select>
			</view>
			<view class="titleValue">
				<span class="title">收货结论：</span>
				<u-input v-model="receivingStatusValue" type="select" placeholder="请选择收货结论" class="u-input"
					placeholder-style="color:#000000" @click="receonclusion = true" />
				<u-select v-model="receonclusion" :list="recelist" @confirm="confirmClusion"></u-select>
			</view>
			<view class="titleValue">
				<span class="title">处理原因：</span>
				<u-input v-model="reasonValue" type="select" placeholder="请选择处理原因" class="u-input"
					placeholder-style="color:#000000" @click="resust = true" />
				<u-select v-model="resust" :list="resustlist" @confirm="confirmResult"></u-select>
			</view>
			<view class="titleValue">
				<span class="title">容器：</span>
				<u-input v-model="dataForm.containerCode" border placeholder="请输入或扫描容器"></u-input>
			</view> -->
			<view class="footer">
				<u-button type="primary" @click="confirmSave">确认收货</u-button>
			</view>
		</view>
		<u-modal v-model="showNearFuture" :show-cancel-button="true" :mask-close-able="true" content="该商品为近效期商品，请确认是否继续收货">
			
		</u-modal>
		<u-modal v-model="showOverdue" :show-cancel-button="true" :mask-close-able="true" content="该商品已过期，请确认是否继续收货">

		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showNearFuture: false,
				showOverdue: false,
				barCode: '',
				receivingStatusValue: '',
				reasonValue: '',
				dataForm: {
					packageQty: 0, //件装量
					actualQty: 0, //收货数量
					actualCaseQty: "", //整件数量
					batchNo: "", //批号
					actualPieceQty: 0, //零散数
					containerCode: "", //容器
					// productionDate: "请选择生产日期",
					// expiredDate: "请选择有效期",
					storageId: null, //库别id
					reason: "", //处理原因
					receivingStatus: "", //收货结论
				},
				goodId: "",
				storageName: "", //库别名称
				resust: false,
				receonclusion: false,
				kube: false,
				starttime: false,
				endtime: false,
				data: {
					businInOrderDVo: {
						ableQty: '',
					}
				}, //数据
				test: "",
				storageList: [], //库别下拉
				stockBasic: "", //库存基础信息
				dicOptions: [],
				packages: "", //包装数量
				recelist: [],
				resustlist: [],
				sid: '',
				detailId: '',
				toDay: null,
				dicOptions: []
			};
		},
		onLoad: function(option) {
			if (JSON.stringify(option) !== "{}") {
				if (option.packageQty !== null && option.packageQty !== undefined) {
					this.dataForm.packageQty = option.packageQty;
				} else {
					this.$u.vuex("vuex_sid", option.sid); //汇总id
					this.$u.vuex("vuex_detailId", option.detailId); //明细id
					// this.$u.vuex("vuex_detailIds", option.detailIds); //明细ids
				}
			}
			this.sid = option?.sid
			this.detailId = option?.detailId
			if (option.packageId) {
				this.dataForm.packageId = option.packageId
			}
			this.loadList();
			this.loadStorageList(); //加载库别列表
			this.getDic(); //获取字典
			// 收货结论
			this.getByDicReceivingStatus()
			// 处理原因
			this.getByDicAcceptanceReason()

		},
		methods: {
			getDays(strDateStart, strDateEnd) {
				var strSeparator = "-";
				//日期分隔符   
				var oDate1;   var oDate2;   
				var iDays;
				oDate1 = strDateStart.split(strSeparator);
				oDate2 = strDateEnd.split(strSeparator);
				var strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);
				var strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);
				iDays = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24)
				//把相差的毫秒数转换为天数   
				return iDays;
			},
			//收货结论
			getByDicReceivingStatus() {
				this.$u.api.getByDicReceivingStatus().then(res => {
					if (res.code === 200) {
						this.recelist = res.data.map((item) => ({
							label: item.dictLabel,
							value: item.dictValue
						}))
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			//处理原因
			getByDicAcceptanceReason() {
				this.$u.api.getByDicAcceptanceReason().then(res => {
					if (res.code === 200) {
						this.resustlist = res.data.map((item) => ({
							label: item.dictLabel,
							value: item.dictValue
						}))
					} else {
						this.$u.toast(res.msg);
					}
				});
			},

			loadList() {
				this.$u.api.recevie.getOrder({
					sid: this.vuex_sid || this.sid,
					did: this.vuex_detailId || this.detailId,
					barCode: this.barCode
				}).then(res => {
					if(res.code===200) {
						this.data = res.data;
						this.test = res.data;
						if (res.data !== null) {
							// //加载包装资料，如果只有一条，直接加载件装量数据，如果有多条，需要点击件装量，从多条包装资料中选取一条
							this.goodId = this.data.businInOrderDVo.goodId;
							// 包装id
							this.dataForm.packageId = this.data.businInOrderDVo.packageId
							// 件装量
							this.dataForm.packageQty = this.data.businInOrderDVo.packageQty
							this.loadPackage();
						}
					} else {
						this.$u.toast(res.msg)
					}
					
				});
			},
			loadPackage() {
				this.$u.api.recevie.queryBasPackageByGoodId({
					goodId: this.goodId
				}).then(res => {
					if(res.code===200) {
						this.packages = res.data.length;
					} else {
						this.$u.toast(res.msg)
					}
				});
			},
			loadStorageList() {
				this.storageList = [];
				this.$u.api.storageList().then(res => {
					let dataArry = res.data;
					for (var i = 0; i < dataArry.length; i++) {
						var obj = {
							value: dataArry[i].id,
							label: dataArry[i].storageName,
						};
						this.storageList.push(obj);
					}
				});
			},
			//点击件装量
			choosePackage() {
				console.log(this.packages)
				if (this.packages >= 2) {
					this.$u.route({
						url: 'pages/receive/choosePackaging/choosePackaging',
						type: 'navigateTo',
						params: {
							goodId: this.goodId
						}
					})
				} else {
					this.$u.toast('只有一个包装！')
				}
			},
			//计算收货数量 = 件装量 * 件数 + 零散量
			sumActualQty(val) {
				this.dataForm.actualQty = val * this.dataForm.packageQty + Number(this.dataForm.actualPieceQty ? this.dataForm.actualPieceQty : 0)
			},
			// 零散数改变
			changePiece(val) {
				this.dataForm.actualQty = this.dataForm.packageQty * this.dataForm.actualCaseQty + Number(val)
			},
			//输入或扫描商品条码
			searchByGoodNo(val) {
				this.loadList();
			},
			choosedStartDate() {
				this.starttime = true
			},
			
			// //生产日期
			// changeProduct(e) {
			// 	this.dataForm.productionDate = e.result
			// 	this.starttime = false
			// },
			// choosedDate() {
			// 	this.endtime = true
			// },
			// //有效期
			// changeExpire(e) {
			// 	this.dataForm.expiredDate = e.result
			// 	this.endtime = false
			// 	const date = new Date()
			// 	const year = date.getFullYear()
			// 	const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
			// 	const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			// 	this.toDay = year + '-' + month + '-' + day

			// 	console.log(this.toDay, e.result)
			// 	const days = this.getDays(this.toDay, e.result)
			// 	console.log(days)
			// 	if (this.toDay > e.result) {
			// 		this.showOverdue = true
			// 		return
			// 	}
			// 	if(days<180) {
			// 		this.showNearFuture = true
			// 	}
				
			// },
			confirmKube(e) {
				this.kube = false
				this.storageName = e[0].label;
				this.dataForm.storageId = e[0].value
			},
			confirmClusion(e) {
				this.receonclusion = false
				this.dataForm.receivingStatus = e[0].value
				this.receivingStatusValue = e[0].label
			},
			confirmResult(e) {
				this.resust = false
				this.reasonValue = e[0].label
				this.dataForm.reason = e[0].value
			},
			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;
					}
				}
			},
			//确认保存数据
			confirmSave() {
				// 0整散分开 1整散合一
				if(!this.dataForm.actualQty) {
					this.dataForm.actualQty = 0
				}
				if(!this.dataForm.pieceQty) {
					this.dataForm.pieceQty = 0
				}
				if (this.data.storageClassify === 1 && this.dataForm.actualQty === 0 && this.dataForm.pieceQty === 0) {
					this.$u.toast("整件和零散数不能同时为0");
					return;
				}
				if (this.data.storageClassify === 0 && this.dataForm.actualQty && this.dataForm.pieceQty) {
					this.$u.toast("整件和零散数不能同时录入");
					return;
				}
				if (this.dataForm.actualCaseQty === '') {
					this.$u.toast("请输入件数");
					return
				}
				if (this.dataForm.actualCaseQty <= 0) {
					this.$u.toast("请输入大于零的件数");
					return
				}
				// // 生产日期
				// if (this.dataForm.productionDate === '请选择生产日期') {
				// 	this.$u.toast("请选择生产日期");
				// 	return
				// }
				// // 有效期至
				// if (this.dataForm.productionDate === '请选择有效期') {
				// 	this.$u.toast("请选择有效期");
				// 	return
				// }
				// 库别
				// if (!this.dataForm.storageId) {
				// 	this.$u.toast("请选择库别");
				// 	return
				// }

				// 收货结论
				// if (this.receivingStatusValue === '拒收' && !this.dataForm.reason) {
				// 	this.$u.toast("请选择处理原因");
				// 	return
				// }
				// if (!this.dataForm.containerCode) {
				// 	this.$u.toast("请扫码或输入容器编号");
				// 	return
				// }

				this.$u.api.recevie.confirmReceiving({
					id: this.sid || this.vuex_sid,
					businInOrderDetailTransBo: {
						id: this.detailId || this.vuex_detailId,
						...this.dataForm
					}
				}).then((res) => {
					if (res.code === 200) {
						this.$u.toast('收货成功！');
						this.$u.route({
							url: 'pages/receive/index',
							type: 'navigateTo'
						})
					} else {
						this.$u.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.goodsNumber {
		padding: 20rpx 50rpx;
		display: flex;
		align-items: center;

		.goodsNumberCode {
			color: #333333;
			font-size: 36rpx;
			margin-right: 20rpx;
		}
	}

	.goodsInfo {
		width: 95%;
		margin: 0 auto;
		background-color: #f2f2f2;
		padding: 20rpx 30rpx;
		line-height: 40rpx;
		margin-bottom: 20rpx;

		.goodsInfoItem {
			display: flex;
			align-items: center;
			color: #333333;

			.goodsItemLabel {
				width: 120rpx;
				font-size: 24rpx;
			}

			.goodsItemValue {
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.itemsContend {
			display: flex;
			justify-content: space-between;

			.items {
				width: 50%;
				display: flex;
				font-size: 24rpx;
				color: #555555;

				.itemsLabel {
					width: 120rpx;
				}

				.itemsValue {}
			}
		}
	}

	.titleValue {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 0 50rpx;
		margin-bottom: 20rpx;

		.title {
			color: #555555;
			width: 160rpx;
			text-align: left;
		}

		.value {
			color: #666666;
		}
	}

	.footer {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
