<template>
	<scroll-view scroll-x="true" class="scroll-container">
		<view v-for="(it, index) in beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
			<view class="beer-box">
				<image :src="it.cover" class="cover"></image>
				<view class="title word-all">{{ it.beerName || ''}}</view>
				<view class="desc word-all">{{ it.beerStyles || '' }}</view>
				<view class="desc word-all">{{ it.brandName ||'' }}</view>
				<view class="flex align-center num">
					<image src="@/static/vector.png" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
					</image>
					{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）
				</view>
			</view>
		</view>
		
	</scroll-view>
</template>

<script>
	export default {
		name:"rowBeer",
		data() {
			return {
				
			};
		},
		props: {
			beers: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			// 跳转酒评页
			toReview(it) {
				uni.navigateTo({
					url: "/pages/index/review?beerId=" + it.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.scroll-container {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		min-height: 505rpx;
		// padding-bottom: 10rpx;
		margin-bottom: 32rpx;
		.row-box {
			&:nth-child(1) {
				margin-left: 32rpx;
			}
		}
		.beer-box {
			width: 208rpx;
			background: #FFFFFF;
			margin-right: 16rpx;
			margin-bottom: 36rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			

			.cover {
				width: 208rpx;
				height: 300rpx;
				border-radius: 12rpx;
				margin-bottom: 18rpx;
			}

			.title {
				font-size: 28rpx;
				color: #1E2019;
				margin-bottom: 12rpx;
				color: #19191B;
				min-height: 88rpx;
			}

			.desc {
				font-size: 24rpx;
				color: #A5A7B9;
				margin-bottom: 12rpx;
				color: #979797;
			}

			.num {

				font-size: 20rpx;
				color: #5F5F63;
			}
		}
	}
</style>