<template>
	<view class="beerCard flex align-center" @click="onClick">
		<image :src="item.cover" class="beer-cover"></image>
		<view class="flex-1 beer-info">
			<view class="beer-name">{{item.beerName}}</view>
			<view class="beer-style">{{ item.beerStyles}}</view>
			<view class="brand-info flex align-center">
				<image :src="item.brandLogo" class="brand-logo"></image>
				<text class="brand-name">{{ item.brandName}}</text>
			</view>
			<view class="rating-info flex align-center">
				<text class="rating">
					<text class="cuIcon-favorfill"></text>
					{{ item.beerOverallRating}}
				</text>
				<text class="review-count">{{item.beerReviewsCount}} 条评论</text>
			</view>
		</view>
		<image src="@/static/right-arrow.png" class="arrow-icon"></image>
	</view>
</template>

<script>
	export default {
		name: 'BeerCard',
		props: {
			item: {
				type: Object,
				required: true
			}
		},
		methods: {
			onClick() {
				this.$emit('click', this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
.beerCard {
	border-radius: 12rpx;
	background: #FFFFFF;
	padding: 24rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.98);
	}
	
	.beer-cover {
		width: 144rpx;
		height: 204rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
		object-fit: cover;
	}
	
	.beer-info {
		.beer-name {
			font-size: 32rpx;
			color: #1E2019;
			font-weight: 500;
			margin-bottom: 12rpx;
		}

		.beer-style {
			font-size: 24rpx;
			color: rgba(30, 32, 25, 0.8);
			margin-bottom: 12rpx;
		}

		.brand-info {
			margin-bottom: 12rpx;

			.brand-logo {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
				border-radius: 50%;
			}
			
			.brand-name {
				font-size: 28rpx;
				color: #1E2019;
			}
		}

		.rating-info {
			.rating {
				background: #F5F5F5;
				padding: 8rpx 16rpx;
				border-radius: 16rpx;
				color: #5F5F63;
				font-size: 24rpx;
				margin-right: 16rpx;

				.cuIcon-favorfill {
					color: #FFBC11;
					font-size: 30rpx;
					margin-right: 4rpx;
				}
			}
			
			.review-count {
				color: #5F5F63;
				font-size: 24rpx;
			}
		}
	}

	.arrow-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
}
</style> 