<template>
	<view class="partList-box">
		<view class="partList-title flex align_center justify_between">
			<text>配件列表</text>
			<view>
                  {{list.length}}款，共<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">
							<u-image width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="pinfo">
							<view class="pname">
								{{item.productName}}
							</view>
							<view class="ptxt flex align_center justify_between">
								<view>
									<text class="pcode">{{item.productCode}}</text>
								</view>
								<view v-if="pageType=''">
								  数量：<text class="pnums">{{item.qty}}个</text>
								</view>
								<view v-if="pageType='recall'">
								  调回数量：<text class="pnums">{{item.qty}}个</text>
								</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=''">
						<text>数量</text>
						<view class="u-ninput">
							<u-number-box color="#000" bg-color="#fff" v-model="item.retQty" :min="1" :max="item.qty"></u-number-box>
						</view>
					</view>
					<view class="pcurnums flex align_center" v-if="pageType='recall'">
						<text>实退数量</text>
						<view class="u-ninput">
							<u-number-box color="#000" bg-color="#fff" v-model="item.quitQty" :min="1" :max="item.qty"></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: 调回单，
			fromPage: {
				type: String,
				default: ''
			}
		},
		watch: {
			list(newValue, oldValue) {
				newValue.map(item => {
					this.totalNums = this.totalNums + item.qty
					item.quitQty = item.qty
					item.checked = false
				})
				this.partList = JSON.parse(JSON.stringify(newValue))
				this.pageType = this.fromPage
			}
		},
		data() {
			return {
				partList: this.list,
				totalNums: 0,
				pageType: this.fromPage
			}
		},
		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
			}
		}
	}
</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;
				}
				.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;
					}
				}
			}
		}
		.ptools{
			margin-top: 20rpx;
			.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>
