<template>
	<view>
		<view class="listItemTitle">
			<view>
				<view class="item">行号：{{ item.POSNR }}</view>
				<view class="item">物料编号：{{ item.MATNR }}</view>
				<view class="item">物料描述：{{ item.MAKTX }}</view>
				<view class="item">尺码：{{ item.ZSIZE }}</view>
				<view class="item">数量：{{ handleNum() }}/{{ item.ZINSNUM }}</view>
			</view>
			<view class="right">
				<!-- <checkbox-group class="checkedBox">
					<checkbox value="r1" :checked="item.checkedBox" disabled/>
				</checkbox-group> -->
				<!-- <text class="blue">{{ item.CLABS }}</text>
				<text class="line">/</text>
				<text class="">{{item.LFIMG}}pcs</text> -->
			</view>
		</view>
		<view class="listBottom">
			<view class="bottomTitle" @click="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 list" :key="ele.PLNR+idx" v-if="ele.ZSIZE === item.ZSIZE && ele.MATNR === item.MATNR && ele.PLNR">
					<view class="items">PL号：{{ ele.PLNR }}</view>
					<view class="items">物料批号：{{ ele.CHARG }}</view>
					<view class="items">库位：{{ ele.LGORT }} - {{ ele.LGOBE }}</view>
					<view class="items">仓位：{{ ele.NLPLA }}</view>
					<!-- <view class="items">{{ ele.MATNR }}</view> -->
					<view class="items inputItem">
						<!-- <u-row gutter="8"> -->
							数量：
							{{ele.PACMG}}
							<!-- <uni-easyinput v-model="ele.CLABS"></uni-easyinput> -->
							<!-- /
							{{ ele.LFIMG }} -->
						<!-- </u-row> -->
					</view>
				</view>
			</view>
		</view>
		<!-- <BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn> -->
	</view>
</template>

<script>
import StickyNavBar from '@/components/StickyNavBar/index.vue';
import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
import BottomBtn from '@/components/BottomBtn/index.vue';
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn
	},
	props: {
		item: {
			type: Object,
			default: function () {
				return {};
			}
		},
		list: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	data() {
		return {
			r1:'',
			number: 0,
			totalNum: 0,
			nlpla: '',
			wxparams: '',
			btnArr: [
				{
					style: '',
					type: 'warning',
					text: '返回',
					way: 'goBack'
				},
				{
					style: '',
					type: 'primary',
					text: '提交',
					way: 'goSubmit'
				}
			],
			isFocus: false,
			show: true,
		};
	},

	methods: {
		handleNum(){
			let num = 0
			this.list.forEach(ele => {
				if(ele.ZSIZE === this.item.ZSIZE && ele.MATNR === this.item.MATNR && ele.PLNR){
					num += (ele.PACMG-0)
				}
			});
			return num
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f8f8f8;
}
.headerTitle {
	padding: 20rpx;
	font-weight: 600;
	.items {
		line-height: 40rpx;
	}
}
.btn {
	padding: 20rpx;
	background: #fff;
	.topSearch {
		margin-bottom: 20rpx;
	}
}
.bottomBtn {
	position: sticky;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	background: #fff;
	bottom: 0rpx;
	margin-top: 20rpx;
	.u-btn {
		width: 300rpx;
	}
}
.blue {
	color: #3f9dcc;
}
.total {
	background: #fff;
	color: #000;
	padding: 0rpx 40rpx;
	display: flex;
	justify-content: space-between;
	font-size: 32rpx;
	.line {
		margin: 0px 10rpx;
	}
}
.listItemTitle {
	display: flex;
	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: #333;
		font-size: 28rpx;
		font-weight: 500;
		word-break: break-all;
		font-weight: 600;
	}
}
.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;
				line-height: 40rpx;
				/deep/ .uni-easyinput{
					width: 200rpx;
				}
			}
			.inputItem{
				display: inline-flex;
				// line-height: 76rpx;
			}
		}
	}
}
/deep/ .u-sticky {
	top: 0 !important;
	background: #fff;
}
.checkedBox{
	text-align: right;
}
/deep/ .uni-checkbox-input-disabled:before{
	color: #007aff !important;
}
</style>
