<template>
	<view class="product-item flex justify-start">
		<view class="cu-avatar xl-view" :style="'background-image:url(' + vCard.picUrl + ');'">
		</view>
		<view class="margin-left-sm product-content">
			<view>
				<view class="text-black text-xl">{{vCard.name}}</view>
				<view>
					<text v-if="vCard.comments.icon" :class="'cuIcon-' + vCard.comments.icon" class="margin-right-xs text-main-color"></text>
					<text>{{vCard.comments.desc}}</text>
				</view>
			</view>
			<view v-for="(item, index) in vCard.extraInfos">
				<view class="text-sm">
					<text v-if="item.icon" :class="'cuIcon-' + item.icon" class="margin-right-xs text-main-color"></text>
					<text>{{item.desc}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'horizontal-name-card',
		props: {
			vCard: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	.xl-view {
		min-width: 150rpx;
		min-height: 150rpx;
	}
	
	.product-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
		display: inline-block;
		margin-left: 0;
		height: 28rpx;
		font-size: 16rpx;
		line-height: 32rpx;
	}
</style>
