<template>
	<view>
		<view class="bg-white">
			<horizontal-goods-card :ifShowServArea="true" :product="product"></horizontal-goods-card>
			<view class="flex justify-between margin-lr-sm margin-tb-sm">
				<view v-for="(title, index) in columnTitleArr">{{title}}</view>
			</view>
			<view class="margin-bottom-lg certern-height-with-scroll">
				<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in pickedList"
					:key="item.id">
					<view class='cu-tag padding line-main-color'>{{item.name}}</view>
					<view v-if="columnTitleArr.length === 2">{{item.pickedNum}}</view>
					<view v-else-if="columnTitleArr.length === 3" class="flex justify-end">
						<view>{{item.pickedNum}}</view>
						<view>{{item.toServNum}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
	
	export default {
		name: "product-picked",
		props: {
			product: {
				type: Object,
				default: []
			},
			pickedList: {
				type: Array,
				default: []
			},
			columnTitleArr: {
				type: Array,
				default: []
			}
		},
		components: {
			horizontalGoodsCard
		}
	}
</script>

<style scoped>
	.certern-height-with-scroll {
		max-height: 300rpx;
		overflow: scroll;
	}
</style>
