<template>
	<view class="partList-box flex flex_column">
		<view class="partList-title flex align_center justify_between" v-if="partList.length">
			<text>{{title}}</text>
			<view class="heji">
				共 <text>{{partList.length}}</text> 产品
			</view>
		</view>
		<view class="partList-list">
			<view class="partList-list-box" v-for="item in partList" :key="item.id">
				<view class="product flex align_center">
					<view class="checkbox">
						<u-checkbox v-model="item.checked" :name="item.id" @change="checkChange" size="40" shape="circle"></u-checkbox>
					</view>
					<view class="flex align_center flex_1" @click="checkChange({name:item.id})">
						<view class="pimgs">
							<u-image :src="item.product&&item.product.images?item.product.images:`../../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.product.productName}}
							</view>
						</view>
					</view>
				</view>
				<!-- 有复选框 -->
				<view class="ptools flex align_center justify_between">
					<view class="ptxt">
					   本次上架：<text class="pnums">{{item.qty}}{{item.product&&item.product.unit}}</text>
					</view>
					<view class="pcurnums flex align_center">
						<text>打印数量</text>
						<view class="u-ninput">
							<u-number-box :input-height="60" color="#000" bg-color="#fff" v-model="item.printQty" :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.printQty = item.qty
					item.checked = false
				})
				this.partList = JSON.parse(JSON.stringify(list))
			},
			// 全选
			allSelect(val){
				this.partList.map(item => {
					item.checked = val
				})
				this.partList.splice()
			},
			checkChange(e){
				const row = this.partList.find(item => item.id == 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 && item.printQty)
			},
			// 获取所有数据
			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-title{
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		width: 100%;
		background-color: #fff;
		> text{
			font-size: 32rpx;
			color: #222222;
		}
		> view{
			font-size: 30rpx;
			text{
				color: red;
				margin: 0 5rpx;
			}
		}
	}
	.partList-list{
		flex-grow: 1;
	}
	.partList-list-box{
		padding: 10px 0;
		border-bottom: 2rpx solid #f5f5f5;
		&:last-child{
			border:0;
		}
		.product{
			flex-grow: 1;
			.checkbox{
				width: 60rpx;
			}
			.pinfo{
				flex-grow: 1;
				padding-left: 20rpx;
				.pname{
					color: #666;
					margin-bottom: 10rpx;
					text{
						font-weight: normal;
						margin-right: 6rpx;
						padding: 0 20rpx;
						background: rgba(3, 54, 146, 0.15);
						border-radius: 100rpx;
						color: #033692;
						font-size: 24rpx;
					}
				}
				.pname1{
					font-weight: bold;
					font-size: 30rpx;
				}
				.pno{
					background-color: rgba(3, 54, 146, 0.15);
					border-radius: 50rpx;
					padding: 0 20rpx;
					color: #033692;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
			}
		}
		.ptools{
			margin-top: 20rpx;
			.ptxt{
				font-size: 28rpx;
				color: #999;
				.pnums{
					color: #222;
					padding: 0 4upx;
				}
			}
			.pcurnums{
				> text{
					margin-right: 20rpx;
					font-size: 28rpx;
					color: #999;
				}
			}
			.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>
