<template>
	<view>
		<view class="flex justify-start">
			<view v-if="vCard.picUrl" class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.picUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
			</view>
			<view v-else-if="vCard.workerLogoUrl" class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.workerLogoUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
			</view>
			<view v-else-if="vCard.customerLogoUrl" class="cu-avatar" :class="avatarPubClass" :style="'background-image:url(' + vCard.customerLogoUrl + '); width: ' + avatarWidth + '; height: ' + avatarHeight + ';'">
			</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 v-if="item.name" class="margin-right-xs">{{item.name}}:</text>
						<text>{{item.desc}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="text-sm padding-top" v-if="vCard.rateInfo">
			<view class="flex justify-between">
				<text>{{vCard.rateInfo.rateTitle}}<text class="text-red text-xl margin-left-xs">{{vCard.rateInfo.totalScore}}</text> /{{vCard.rateInfo.maxRate}}分</text>
				<uni-rate :readonly="true" allow-half :value="vCard.rateInfo.totalScore" />
			</view>
			<view class="flex justify-between">
				<view>
					<text v-if="vCard.rateInfo.ratePoint" v-for="(ratePoint, index) in vCard.rateInfo.ratePoint">
						<text>{{ratePoint.name}}</text><text class="margin-lr-xs">{{ratePoint.score}}</text>
					</text>
				</view>
				<view class="text-sm" v-if="vCard.rateInfo.commentNum">评价({{vCard.rateInfo.commentNum}})<text
						class="text-bold text-gray cuIcon-right"></text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'horizontal-name-card',
		props: {
			vCard: {
				type: Object,
				default: {}
			},
			avatarWidth: {
				type: String,
				default: '150rpx'
			},
			avatarHeight: {
				type: String,
				default: '150rpx'
			},
			avatarPubClass: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	.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>
