<template>
	<view class="page">
		<view class="top flex justify-start">
			<view class="tag" :class="{'active': queryForm.orderByColumn == 'beer_reviews_count'}" @click="changeTab(0)">人气蹿升</view>
			<view class="tag" @click="changeTab(1)">品牌筛选</view>
			<view class="tag" :class="{'active': queryForm.orderByColumn == 'create_time'}" @click="changeTab(2)">上市时间</view>
			<view class="tag" :class="{'active': queryForm.orderByColumn == 'beer_overall_rating'}" @click="changeTab(3)">评分</view>
		</view>
		<scroll-view scroll-y style="height: calc(100vh - 110rpx);width: 100%;padding: 24rpx 0;" @scrolltolower="pageChange">


			<view class="beerCard flex align-center" v-for="it in beers" @click="toBeer(it)">
				<image :src="it.cover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;border-radius: 12rpx;">
				</image>
				<view class="flex-1">

					<view class="word-all margin-bottom-sm" style="color:#1E2019">
						{{it.beerName}}
					</view>
					<view class="word-all margin-bottom-sm" style="font-size: 24rpx;color: rgba(30, 32, 25, 0.8);">
						{{ it.beerStyles}}
					</view>
					<view class="word-all margin-bottom-sm" style="color:#1E2019">
						<image :src="it.brandLogo" style="width: 30rpx;height: 30rpx;margin-right: 12rpx;">
						</image>
						{{ it.brandName}}
					</view>
					<!-- <view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.brandName}}</view> -->
					<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 16rpx;color: #5F5F63;">
						<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;"></text>
						{{ it.beerOverallRating}}
					</text>
					<text style="color: #5F5F63;margin-left: 16rpx;">{{it.beerReviewsCount}} 条评论</text>
				</view>
				<image src="@/static/right-arrow.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
				</image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getBeerByStyle,
	} from "@/api/platform.js"
	export default {
		data() {
			return {
				beerStyles: '',
				beers: [],
				total: 0,
				queryForm: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: 'beer_reviews_count',
					breweryId: '',
					style: ''
				}
			};
		},
		onLoad({
			beerStyles
		}) {
			this.queryForm.style = beerStyles
			this.searchByStyle()
		},
		methods: {
			changeTab(index) {
				this.queryForm.pageNum = 1
				this.beers = []
				
				switch (index){
					case 0:
						this.queryForm.orderByColumn = 'beer_reviews_count'
						break;
					case 1:
						this.queryForm.orderByColumn = ''
						break;
					case 2:
						this.queryForm.orderByColumn = 'create_time'
						break;
					case 3:
						this.queryForm.orderByColumn = 'beer_overall_rating'
						break;
					default:
						break;
				}
				this.searchByStyle()
			},
			searchByStyle() {
				getBeerByStyle(this.queryForm).then(res => {
					console.log(res)
					this.total = res.total
					this.beers = res.rows
				})
			},
			toBeer(item) {
				uni.navigateTo({
					url: '/pages/index/review?beerId=' + item.id
				})
			},
			pageChange() {
				if (this.beers.length < this.total) {
					this.queryForm.pageNum++
					this.searchByStyle()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		background: #F2F2F2;

		.top {
			width: 100%;
			background-color: #fff;
			padding: 16rpx 30rpx;
			.tag {
				color: #606060;
				border-radius: 12rpx;
				width: 134rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				font-size: 24rpx;
				background-color: #F9F9F9;
				margin-right: 16rpx;
			}

			.active {
				background-color: #39E5B1;
				color: #FFFFFF;
			}

			border-bottom:1px solid #E7E7E7;
		}



		.beerCard {
			border-radius: 12rpx;
			background: #FFFFFF;
			padding: 24rpx 24rpx;
			margin: 0 30rpx 24rpx;

		}

	}
</style>