<template>
	<view class="partList-box">
		<view class="partList-title flex align_center justify_between">
			<text>{{title}}</text>
			<view>{{list.length}}款，{{pageType=='shuntBackDetail'?'实退':'共'}}<text>{{totalNums}}</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" v-if="model == '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">
						<view class="pimgs" @click="checkChange({name:item.id})">
							<u-image :src="item.product&&item.product.productMsg?item.product.productMsg:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="pinfo">
							<view class="pname" @click="checkChange({name:item.id})">
								<text v-if="item.shelfPlaceCode">
									{{item.shelfPlaceCode}}
								</text>
							{{item.product&&item.product.name?item.product.name:'--'}}
							</view>
							<view class="ptxt flex align_center justify_between">
								<view>
									<text class="pcode">{{item.product&&item.product.code?item.product.code:'--'}}</text>
								</view>
								<view v-if="pageType=='replenishmentSign'||pageType=='manualPrint'||pageType=='scanCodePrint'">
									{{item.billState == 'FINISH'?'签收数量':'实发数量'}}：
									<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}{{item.product&&item.product.unit?item.product.unit:'--'}}</text>
								</view>
								<view v-if="pageType=='replenishmentOut'">
									x<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}</text>
								</view>
								<view v-if="pageType=='replenishmentDetail'">
									应发<text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}</text>
									实发<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}</text>
									签收<text class="pnums">{{item.putQty||item.putQty==0?item.putQty:'--'}}</text>
								</view>
								<view v-if="pageType=='sendOutGoods'">
									实发：<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}{{item.product&&item.product.unit?item.product.unit:'--'}}</text>
									/已扫：<text class="pnums">{{item.scanQty||item.scanQty==0?item.scanQty:'--'}}</text>
								</view>
								<view v-if="pageType=='replenishmentDetailc'">
									<text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}</text>
									{{item.product&&item.product.unit?item.product.unit:'--'}}
								</view>
								<view v-if="pageType=='recall'">
								  调回数量：<text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}</text>
									{{item.product&&item.product.unit?item.product.unit:'--'}}
								</view>
								<view v-if="pageType=='shuntBackDetail'">
									调回：<text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}{{item.product&&item.product.unit?item.product.unit:'--'}}</text>
									/实退：<text class="pnums">{{item.confirmQty||item.confirmQty==0?item.confirmQty:'--'}}</text>
								</view>
								<view v-if="pageType=='shuntBackDetailc'">
									<text class="pnums">{{item.qty||item.qty==0?item.qty:'--'}}</text>
									{{item.product&&item.product.unit?item.product.unit:'--'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 有复选框 -->
				<view v-if="model == 'checkbox'" class="ptools flex align_center justify_between">
					<view></view>
					<view class="pcurnums flex align_center" v-if="pageType=='recall'">
						<text>实退数量</text>
						<view class="u-ninput">
							<u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="item.confirmQty" :min="1" :max="item.qty"></u-number-box>
						</view>
					</view>
					<view class="pcurnums flex align_center" v-if="pageType=='manualPrint'">
						<text>打印数量</text>
						<view class="u-ninput">
							<u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="item.printQty" :min="1" :max="item.confirmQty"></u-number-box>
						</view>
					</view>
				</view>
				<!-- 无复选框 -->
				<view v-if="model == 'view'" class="ptools flex align_center justify_between">
					<view></view>
					<view class="pcurnums flex align_center" v-if="pageType=='replenishmentSign'">
						<text>入库数量</text>
						<view class="u-ninput">
							<u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="item.putQty" @change="numberChange" :min="0" :max="999999"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="list.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'
			},
			// 那个功能页面调用，展示不同的字段,recall: 调回退库，调回详情-已完成：shuntBackDetail，调回详情-已取消：shuntBackDetailc，replenishmentSign：补货签收，replenishmentOut：补货出库，manualPrint：手动打印，sendOutGoods：发货出库，replenishmentDetail：补货详情-已完成，replenishmentDetailc：补货详情-已取消，scanCodePrint：扫码打印
			fromPage: {
				type: String,
				default: ''
			}
		},
		watch: {
			list(newValue, oldValue) {
				const _this = this
				this.totalNums = 0
				this.pageType = this.fromPage
				newValue.map(item => {
					if(_this.pageType=='replenishmentSign'){  // 补货签收
						this.totalNums = this.totalNums + item.confirmQty
					}else if(_this.pageType=='replenishmentOut'){  // 补货出库
						this.totalNums = this.totalNums + item.confirmQty
					}else if(_this.pageType=='manualPrint'){  // 补货-手动打印
						this.totalNums = this.totalNums + item.confirmQty
						item.printQty = item.printQty ? item.printQty : 1
					}else if(_this.pageType=='scanCodePrint'){  // 补货-扫码打印
						this.totalNums = this.totalNums + item.confirmQty
						item.printQty = item.printQty ? item.printQty : 1
					}else if(_this.pageType=='replenishmentDetail'){  // 补货详情-已完成
						this.totalNums = this.totalNums + item.putQty
					}else if(_this.pageType=='replenishmentDetailc'){  // 补货详情-已取消
						this.totalNums = this.totalNums + item.qty
					}else if(_this.pageType=='shuntBackDetail'){  // 调回详情-已完成
						this.totalNums = this.totalNums + item.confirmQty
					}else{
						this.totalNums = this.totalNums + item.qty
					}
					item.checked = false
				})
				this.partList = JSON.parse(JSON.stringify(newValue))
			}
		},
		onLoad() {
			this.theme = getApp().globalData.theme
		},
		data() {
			return {
				partList: this.list,
				totalNums: 0,
				pageType: this.fromPage,
				theme: ''
			}
		},
		methods: {
			// 全选
			allSelect(val){
				this.partList.map(item => {
					item.checked = val
				})
				this.partList.splice()
			},
			checkChange(e){
				const row = this.partList.find(item => item.id == e.name)
				console.log(row.checked)
				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{
	.nodata{
		padding: 10vh 0;
	}
	.partList-title{
		padding: 20rpx 0;
		> text{
			font-size: 32rpx;
			color: #222222;
		}
		> view{
			font-size: 32rpx;
			text{
				color: red;
				margin: 0 5rpx;
			}
		}
	}
	.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{
					font-size: 32rpx;
					color: #191919;
					font-weight: bold;
					margin-bottom: 10rpx;
					text{
						font-weight: normal;
						margin-right: 6rpx;
						padding: 0 10rpx;
						background: rgba(3, 54, 146, 0.15);
						border-radius: 100rpx;
						color: #033692;
						font-size: 28rpx;
					}
				}
				.pno{
					background-color: rgba(3, 54, 146, 0.15);
					border-radius: 50rpx;
					padding: 0 20rpx;
					color: #033692;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
				.ptxt{
					font-size: 28rpx;
					color: #999;
					.pnums{
						color: #222;
						padding: 0 4upx;
					}
				}
			}
		}
		.ptools{
			margin-top: 30rpx;
			.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>
