<template>
	<view class="product-item flex justify-start">
		<view class="cu-avatar xxl-view" :style="'background-image:url(' + product.picUrl + ');'">
		</view>
		<view class="margin-left-sm product-content">
			<view>
				<view class="text-black">{{product.name}}</view>
				<view class="text-sm">{{product.comments}}</view>
			</view>
			<view class="text-price text-red text-bold text-xl" v-if="ifShowPrice">{{product.salePrice}}</view>
			<view v-if="ifShowServArea">
				<view class="cu-capsule">
					<view class='cu-tag bg-main-color sm'>
						<text class='cuIcon-locationfill'></text>
					</view>
					<view class="cu-tag line-main-color sm">
						服务区域
					</view>
				</view>
				<text class="margin-lr-xs text-xs" v-if="ifShowServArea">{{product.servArea}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'horizontal-goods-card',
		props: {
			ifShowServArea: {
				type: Boolean,
				default: false
			},
			ifShowPrice: {
				type: Boolean,
				default: true
			},
			product: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	.xxl-view {
		min-width: 230rpx;
		min-height: 230rpx;
	}

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