<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"><u-checkbox size="40" shape="circle"></u-checkbox></view>
					<view class="flex align_center">
						<view class="pimgs">
							<u-image width="128" height="128" border-radius="10"></u-image>
						</view>
						<view class="pinfo">
							<view class="pname">
								箭牌机油滤清器 10 款进口大众途锐 5.0L V10
							</view>
							<view class="ptxt flex align_center justify_between">
								<view>
									<text class="pcode">JB-11066A</text>
								</view>
								<view>
								  调回数量：<text class="pnums">3个</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ptools flex align_center justify_between">
					<view></view>
					<view class="pcurnums">
						<text>实退数量</text>
						<u-number-box :min="1"></u-number-box>
					</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: '暂无配件'
			}
		},
		watch: {
			list(newValue, oldValue) {
				this.partList = newValue
			}
		},
		computed: {
			totalNums() {
				let ret = 0
				this.list.map(item => {
					ret = ret + item.qty
				})
				return ret
			}
		},
		data() {
			return {
				partList: this.list
			}
		},
		methods: {
			
		}
	}
</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;
			.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;
				}
			}
		}
	}
}
</style>
