<template>
	<view>
		<view class="bg-img img-box bg-gray" :style="'background-image:url(' + product.goodsImgUrl + ');'"></view>
		<view class="padding bg-white card-text-container flex-column-around">
			<view class="flex justify-between align-center">
				<view v-if="product.goodsStandardList && product.goodsStandardList.length > 0">
					<view v-if="product.goodsStandardList[0].discountPrice" class="flex justify-start align-center">
						<text
							class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].discountPrice}}</text>
						<text class="text-del"
							v-if="product.goodsPrice">¥{{product.goodsStandardList[0].goodsPrice}}</text>
						<text>/</text>
						<text>{{product.goodsUnit}}</text>
					</view>
					<view v-else-if="product.goodsStandardList[0].goodsPrice" class="flex justify-start align-center">
						<text
							class="text-price text-red text-bold text-xl">{{product.goodsStandardList[0].goodsPrice}}</text>
						<text>/</text>
						<text>{{product.goodsUnit}}</text>
					</view>
				</view>
				<view v-if="product.deptGoodsCategoryName">
					<view class='cu-tag light bg-blue'>
						<text v-if="product.parGoodsCategoryName">
							{{product.parGoodsCategoryName}}
							<text>/</text>
						</text>
						<text>{{product.deptGoodsCategoryName}}</text>
					</view>
				</view>
			</view>
			<view class="text-black one-line-ellipsis">{{product.goodsName}}</view>
			<view class="text-sm two-line-ellipsis">{{product.goodsDesc}}</view>
			<view v-if="product.goodsAreaList && product.goodsAreaList.length" class="two-line-ellipsis">
				<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 v-for="(item,index) in product.goodsAreaList">
					<text class="margin-lr-xs text-sm">{{item.areaName}}<text
							v-if="index != product.goodsAreaList.length - 1">,</text></text>
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'flow-goods-card',
		props: {
			product: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {}
		}
	}
</script>

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

	.img-box {
		padding-bottom: 100%;
		width: 100%;
		height: 0;
	}

	.card-text-container {
		height: 270rpx;
	}
</style>
