<template>
	<view class="oddments-item">
		<view class="listItemTitle">
			<view class="item title">
				{{item.sapItemCode}}<br>{{item.itemName}}
				<u-button class="openBtn" size="mini" type="primary" plain @click="handleOpen()">
					均摊明细
				</u-button>
			</view>
			<view class="item input">退料数量:<uni-easyinput v-model="num" trim="all" type="number"
					@input="handleChange"></uni-easyinput>/PCS
			</view>
			<view class="item">申请数量:{{ batchNum }}/PCS</view>
		</view>
		<view class="listBottom">
			<view class="bottomTitle" @tap="show = !show">
				<view class="desc">退料批次明细</view>
				<view class="topIcons">
					<view v-if="!show">
						<u-icon name="arrow-down" color="#aaa" size="32"></u-icon>
						展开
					</view>
					<view v-else>
						<u-icon name="arrow-up" color="#aaa" size="32"></u-icon>
						收起
					</view>
				</view>
			</view>
			<view v-if="show" class="bottomBox">
				<view class="bottomItem" v-for="(ele, idx) in sapList">
					<view class="items">{{ ele.batchNo }}</view>
					<view class="items">{{ ele.sapItemCode }}<br>{{ele.itemName}}</view>
					<view class="items">PL号:<br>
						<view class="items" v-for="p in ele.plNum.split('|')">
							{{ p }}
						</view>
					</view>
					<view class="items">批次数量:{{ ele.backNum }}/PCS</view>
					<view class="items">生产日期:{{ ele.produceTime }}</view>
				</view>
			</view>
		</view>
		<u-popup class="oddments-popup" v-model="visible" mode="center" :mask-close-able="false">
			<scroll-view scroll-y="true" style="height: 600rpx;">
				<view class="content" v-for="(ele, idx) in pordList">
					<view class="item">生产单号:{{ ele.workorderCode }}</view>
					<view class="item">{{ ele.sapItemCode }}<br>{{ele.itemName}}</view>
					<view class="item">工单计划数:{{ ele.quantity }}/PCS</view>
					<view class="item">均摊数:{{ ele.ERFMG }}/PCS</view>
				</view>
			</scroll-view>
			<u-button class="btn" size="medium" type="primary" plain @click="handleClose()">
				关闭
			</u-button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			list: {
				typeof: Array,
				default: () => [{}]
			},
		},
		computed: {
			sapList() {
				let arr = [];
				this.list.forEach((item, index) => {
					if (item.sapItemCode == this.item.sapItemCode) {
						arr.push(item)
					}
				})
				return arr;
			},
			batchList() {
				const temp = this.sapList.filter((item, index, self) => {
					return self.findIndex(t => t.batchNo === item.batchNo) === index
				});
				const arr = JSON.parse(JSON.stringify(temp))
				arr.forEach((item, index) => {
					item.backNum = 0
					this.sapList.forEach((val, key) => {
						if (item.batchNo == val.batchNo) {
							item.backNum += val.backNum
						}
					})
				})
				return arr
			},
			batchNum() {
				let num = 0
				this.sapList.forEach((item, index) => {
					if (item.sapItemCode == this.item.sapItemCode) {
						num += item.backNum
					}
				});
				return num
			},
			pordList() {
				return this.sapList.filter((item, index, self) => {
					return self.findIndex(t => t.workorderCode === item.workorderCode) === index;
				});
			},
			totalNum() {
				let num = 0
				this.list.filter((item, index, self) => {
					if (self.findIndex(t => t.workorderCode === item.workorderCode) === index) {
						num += item.quantity
					}
				});
				return num
			}
		},
		data() {
			return {
				num: "",
				show: false,
				visible: false
			}
		},
		methods: {
			handleOpen() {
				this.visible = true
			},
			handleClose() {
				this.visible = false
			},
			handleChange(val) {
				if (val > this.batchNum) {
					this.$u.toast("退料数量不可以超过申请数量！");
				} else {
					this.sapList.forEach(ele => {
						ele.ERFMG = (val * (ele.quantity / this.totalNum)).toFixed(2);
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listItemTitle {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 2px solid #f8f8f8;

		.u-btn {
			width: 150rpx;
			margin: 0px;
			margin-top: 10rpx;
		}

		.item {
			line-height: 50rpx;
			color: #000;
			font-size: 28rpx;
			font-weight: 500;
			word-break: break-all;
		}

		.title {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}

		.input {
			width: 400rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}

	.listBottom {
		.bottomTitle {
			height: 80rpx;
			position: relative;

			.desc {
				color: #bbb;
				font-size: 24rpx;
				line-height: 80rpx;
				padding-left: 20rpx;
			}

			.topIcons {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: #aaa;
			}
		}

		.bottomBox {
			padding: 20rpx;

			.bottomItem {
				background: #f8f8f8;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.items {
					color: #333;
					font-size: 24rpx;
				}
			}
		}
	}

	/deep/ .u-sticky {
		top: 0 !important;
		background: #fff;
	}

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

		/deep/.u-btn {
			margin-right: 0 !important;
		}
	}

	.oddments-popup {
		/deep/.u-mode-center-box {
			padding: 12rpx;
			background-color: #f2f3f7;
			text-align: center;

			.uni-scroll-view {
				.content {
					background: #fff;
					margin-bottom: 8rpx;
					padding: 4rpx;
					border-radius: 8rpx;
					text-align: left;

					.item {
						color: #000;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}
		}

		.btn {
			margin-top: 12rpx;
		}
	}
</style>