<template>
	<view class="partList-box flex flex_column">
		<view class="partList-list">
			<view class="partList-list-box" v-for="item in partList" :key="item.productSn">
				<view class="product flex align_center">
					<view class="checkbox">
						<u-checkbox v-model="item.checked" :name="item.productSn" @change="checkChange" size="40" shape="circle"></u-checkbox>
					</view>
					<view class="flex align_center flex_1" @click="checkChange({name:item.productSn})">
						<view class="pimgs">
							<u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="pinfo">
							<view class="pname">
								<text>{{item.shelfPlaceCode}}</text>
								{{item.productCode}}
							</view>
							<view class="pname pname1">
								{{item.productName}}
							</view>
						</view>
					</view>
				</view>
				<view class="ptxt flex align_center justify_end">
					<view>
					最大库容：<text class="pnums">{{item.maxQty}}</text>
					当前库存：<text class="pnums">{{item.qty}}</text>
					补货在途：<text class="pnums">{{item.replenishBillQty||0}}</text>
					</view>
				</view>
				<view class="ptools flex align_center justify_between">
					<view class="flex align_center">
						<view v-if="item.replenishBillQty">
							补货在途：<text class="pnums">{{item.replenishBillQty||0}}</text>
						</view>
						<view v-if="item.recallBillQty">
							调回在途：<text class="pnums">{{item.recallBillQty||0}}</text>
						</view>
					</view>
					<view class="pcurnums flex align_center flex">
						<text>补货数量</text>
						<view class="u-ninput">
							<u-number-box color="#000" :long-press="false" :input-height="60" bg-color="#fff" v-model="item.replenishQty" :min="1"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="partList.length==0">
				<u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="120" :text="noDataText" img-width="120" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: function(){
					return []
				}
			},
			noDataText: {
				type: String,
				default: '暂无产品'
			},
			title: {
				type: String,
				default: '列表'
			},
			// model: checkbox 可选择模式，view 只显示
			model: {
				type: String,
				default: 'checkbox'
			},
		},
		data() {
			return {
				partList: [],
			}
		},
		methods: {
			setData(list){
				const _this = this
				list.map(item => {
					item.replenishQty = item.replenishBillWaitQty || 1
					item.checked = false
				})
				this.partList = list
			},
			// 全选
			allSelect(val){
				this.partList.map(item => {
					item.checked = val
				})
				this.partList.splice()
			},
			checkChange(e){
				const row = this.partList.find(item => item.productSn == e.name)
				if(row){
					row.checked = !row.checked
					this.partList.splice()
				}
				// 判断是否全选
				const isAllNoChecked = this.partList.filter(item => !item.checked)
				this.$emit('allChecked',isAllNoChecked.length == 0)
			},
			// 获取所有选择的
			getAllChecked(){
				return this.partList.filter(item => item.checked)
			},
			// 获取所有数据
			getAllData(){
				return this.partList
			},
			// 数量 change
			numberChange(value, index){
				this.$emit('numberChange', value, index)
			}
		}
	}
</script>

<style lang="less" scoped>
.partList-box{
	height: 100%;
	position: relative;
	.nodata{
		padding: 10vh 0;
	}
	.partList-list{
		flex-grow: 1;
	}
	.partList-list-box{
		padding: 10px 0;
		border-bottom: 2rpx solid #f5f5f5;
		.product{
			flex-grow: 1;
			.checkbox{
				width: 60rpx;
			}
			.pinfo{
				flex-grow: 1;
				padding-left: 20rpx;
				.pname{
					color: #191919;
					margin-bottom: 5rpx;
					text{
						font-weight: normal;
						margin-right: 10rpx;
						padding: 0 10rpx;
						background: rgba(3, 54, 146, 0.15);
						border-radius: 30rpx;
						color: #033692;
						font-size: 24rpx;
					}
				}
				.pname1{
					font-size: 26rpx;
				}
			}
		}
		.ptxt{
			font-size: 26rpx;
			color: #999;
			.pnums{
				color: #222;
				margin-right: 20upx;
			}
		}
		.ptools{
			font-size: 26rpx;
			margin-top: 20rpx;
			color: #999;
			.pnums{
				color: #ff5500;
				margin-right: 20upx;
			}
			.pcurnums{
				> text{
					margin-right: 20rpx;
				}
			}
			.u-ninput{
				border: 2rpx solid #eee;
				border-radius: 50rpx;
				padding: 0 6rpx;
			}
			/deep/ .u-icon-disabled{
				background: #fff!important;
			}
			/deep/ .u-number-input{
				margin: 0 0;
				border: 2rpx solid #eee;
				border-top: 0;
				border-bottom: 0;
			}
			/deep/ .u-icon-plus, /deep/ .u-icon-minus{
				border-radius: 50rpx;
			}
		}
	}
}
</style>
