<template>
	<view class="page">
		<!-- 筛选导航 -->
		<view class="filter-nav">
			<view 
				v-for="(item, index) in filterList" 
				:key="index"
				class="filter-item"
				:class="{'active': item.active}"
				@click="handleFilterClick(index)"
			>
				<text class="filter-text">{{ item.title }}</text>
				<image 
					class="filter-icon" 
					:src="item.active ? '/static/arrow-bottom@1x.png' : '/static/arrow-bottom@1x.png'"
					:style="{ transform: item.active ? 'rotate(180deg)' : 'rotate(0deg)' }"
					mode="aspectFit"
				/>
			</view>
		</view>

		<!-- 筛选弹出层 -->
		<view class="filter-popup" v-if="showPopup">
			<view class="popup-mask" @click="closePopup"></view>
			<view class="popup-content">
				<!-- 品牌筛选 -->
				<scroll-view 
					v-if="currentFilter === 0" 
					scroll-y 
					class="option-list"
				>
					<view 
						v-for="(brand, index) in filterOptions.brands" 
						:key="index"
						class="option-item"
						:class="{'active': selectedFilters.brandId === brand.value}"
						@click="selectOption('brandId', brand.value)"
					>
						{{ brand.label }}
					</view>
				</scroll-view>
				
				<!-- 风格筛选 -->
				<scroll-view 
					v-if="currentFilter === 1" 
					scroll-y 
					class="option-list"
				>
					<view 
						v-for="(style, index) in filterOptions.styles" 
						:key="index"
						class="option-item"
						:class="{'active': selectedFilters.styleId === style.value}"
						@click="selectOption('styleId', style.value)"
					>
						{{ style.label }}
					</view>
				</scroll-view>
				
				<!-- 价格筛选 -->
				<view v-if="currentFilter === 2" class="price-filter">
					<view class="price-range">
						<input 
							type="number" 
							v-model="selectedFilters.priceMin" 
							class="price-input" 
							placeholder="最低价"
						/>
						<text class="price-separator">-</text>
						<input 
							type="number" 
							v-model="selectedFilters.priceMax" 
							class="price-input" 
							placeholder="最高价"
						/>
					</view>
					<button class="confirm-btn" @click="confirmPrice">确定</button>
				</view>
				
				<!-- 排序筛选 -->
				<view v-if="currentFilter === 3" class="option-list">
					<view 
						v-for="(sort, index) in filterOptions.sortOptions" 
						:key="index"
						class="option-item"
						:class="{'active': selectedFilters.sortType === sort.value}"
						@click="selectOption('sortType', sort.value)"
					>
						{{ sort.label }}
					</view>
				</view>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="stats-bar">
			<text class="stats-text">共 {{totalBeers}} 款在售酒款</text>
		</view>

		<!-- 内容区域 -->
		<view class="content-container">
			<scroll-view 
				scroll-y 
				class="beer-list"
				@scrolltolower="loadMore"
				refresher-enabled
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh"
			>
				<view 
					class="beer-card"
					v-for="beer in beerList"
					:key="beer.id"
					@click="navigateToBeerDetail(beer)"
				>
					<beer-card :item="beer"></beer-card>
				</view>
				
				<!-- 加载状态 -->
				<template v-if="beerList.length === 0">
					<view class="empty-state">
						<text class="empty-text">暂无相关酒款</text>
					</view>
				</template>

				<view class="loading-status">
					<view v-if="loading" class="loading-wrapper">
						<text class="loading-text">加载中...</text>
					</view>
					<text v-else-if="!hasMore && beerList.length > 0" class="no-more">没有更多了</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getBreweries, getBeerList } from '@/api/bar.js'
import { popularStyle } from "@/api/platform.js"
import BeerCard from '@/components/BeerCard.vue'

export default {
	components: {
		BeerCard
	},
	data() {
		return {
			// 筛选相关
			showPopup: false,
			currentFilter: -1,
			filterList: [
				{ title: '品牌', active: false },
				{ title: '风格', active: false },
				{ title: '价格', active: false },
				{ title: '排序', active: false }
			],
			filterOptions: {
				brands: [],
				styles: [],
				sortOptions: [
					{ label: '综合排序', value: 'comprehensive' },
					{ label: '最新发布', value: 'latest' },
					{ label: '人气优先', value: 'popular' },
					{ label: '高分优先', value: 'rating' }
				]
			},
			selectedFilters: {
				brandId: '',
				styleId: '',
				priceMin: '',
				priceMax: '',
				sortType: 'comprehensive'
			},
			
			// 列表数据
			beerList: [],
			totalBeers: 0,
			loading: false,
			isRefreshing: false,
			hasMore: true,
			
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10
			}
		}
	},
	created() {
		this.initData()
	},
	methods: {
		// 初始化数据
		async initData() {
			try {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				
				await Promise.all([
					this.getBrandOptions(),
					this.getStyleOptions()
				])
				
				await this.getBeerList()
				
				uni.hideLoading()
			} catch (error) {
				console.error('初始化数据失败:', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			}
		},
		
		// 获取品牌选项
		async getBrandOptions() {
			try {
				const res = await getBreweries({
					pageSize: 100
				})
				if (res.code === 200 && res.data) {
					this.filterOptions.brands = (res.data.list || []).map(item => ({
						label: item.name,
						value: item.id
					}))
				}
			} catch (error) {
				console.error('获取品牌列表失败:', error)
			}
		},
		
		// 获取风格选项
		async getStyleOptions() {
			try {
				const res = await popularStyle()
				if (res.code === 200 && res.data) {
					this.filterOptions.styles = (res.data || []).map(item => ({
						label: item.name,
						value: item.id
					}))
				}
			} catch (error) {
				console.error('获取风格列表失败:', error)
			}
		},
		
		// 获取啤酒列表
		async getBeerList(isRefresh = false) {
			if (this.loading) return
			
			try {
				this.loading = true
				if (isRefresh) {
					this.queryParams.pageNum = 1
					this.beerList = []
				}

				const params = {
					...this.queryParams,
					...this.selectedFilters
				}

				const res = await getBeerList(params)
				if (res.code === 200) {
					const list = res.rows || []
					if (this.queryParams.pageNum === 1) {
						this.beerList = list
					} else {
						this.beerList = [...this.beerList, ...list]
					}
					this.totalBeers = res.total || 0
					this.hasMore = list.length >= this.queryParams.pageSize
				}
			} catch (error) {
				console.error('获取啤酒列表失败:', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
				this.isRefreshing = false
			}
		},
		
		// 筛选相关方法
		handleFilterClick(index) {
			if (this.currentFilter === index) {
				this.closePopup()
			} else {
				this.filterList.forEach((item, i) => {
					item.active = i === index
				})
				this.currentFilter = index
				this.showPopup = true
			}
		},
		
		closePopup() {
			this.showPopup = false
			this.filterList.forEach(item => {
				item.active = false
			})
			this.currentFilter = -1
		},
		
		selectOption(key, value) {
			if (this.selectedFilters[key] === value) {
				this.selectedFilters[key] = ''
			} else {
				this.selectedFilters[key] = value
			}
			this.closePopup()
			this.getBeerList(true)
		},
		
		confirmPrice() {
			this.closePopup()
			this.getBeerList(true)
		},
		
		// 列表相关方法
		loadMore() {
			if (!this.hasMore || this.loading) return
			this.queryParams.pageNum++
			this.getBeerList()
		},
		
		async onRefresh() {
			this.isRefreshing = true
			await this.getBeerList(true)
		},
		
		// 导航方法
		navigateToBeerDetail(beer) {
			uni.navigateTo({
				url: `/pages/index/review?beerId=${beer.id}`
			})
		}
	}
}
</script>

<style lang="scss">
.page {
	min-height: 100vh;
	background: #F9F9F9;
	display: flex;
	flex-direction: column;
	
	// 筛选导航
	.filter-nav {
		display: flex;
		align-items: center;
		height: 88rpx;
		background: #fff;
		padding: 24rpx 12rpx;
		
		.filter-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 64rpx;
			margin: 0 12rpx;
			padding: 0 20rpx;
			background: #F9F9F9;
			border-radius: 12rpx;
			transition: all 0.3s ease;
			margin-top: 12rpx;
			
			&:active {
				opacity: 0.8;
				transform: scale(0.98);
			}
			
			&.active {
				background: rgba(212, 46, 120, 0.05);
				
				.filter-text {
					color: #D42E78;
					font-weight: 500;
				}
				.filter-icon {
					transform: rotate(180deg);
				}
			}
			
			.filter-text {
				font-size: 24rpx;
				color: #606060;
				margin-right: 8rpx;
				transition: all 0.3s ease;
			}
			
			.filter-icon {
				width: 28rpx;
				height: 28rpx;
				transition: all 0.3s ease;
			}
		}
	}
	
	// 筛选弹出层
	.filter-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		
		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.3);
		}
		
		.popup-content {
			position: absolute;
			top: 124rpx;
			left: 0;
			right: 0;
			background: #fff;
			border-radius: 24rpx;
			padding: 24rpx;
			max-height: 60vh;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
			
			.option-list {
				max-height: 50vh;
				
				.option-item {
					height: 88rpx;
					line-height: 88rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #333;
					transition: all 0.3s ease;
					
					&:active {
						background: #F9F9F9;
					}
					
					&.active {
						color: #D42E78;
						font-weight: 500;
						background: rgba(212, 46, 120, 0.05);
					}
				}
			}
			
			.price-filter {
				padding: 24rpx;
				
				.price-range {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32rpx;
					
					.price-input {
						width: 240rpx;
						height: 80rpx;
						background: #F5F5F5;
						border-radius: 12rpx;
						padding: 0 24rpx;
						font-size: 28rpx;
						transition: all 0.3s ease;
						
						&:focus {
							background: #fff;
							box-shadow: 0 0 0 2rpx rgba(212, 46, 120, 0.2);
						}
					}
					
					.price-separator {
						font-size: 28rpx;
						color: #999;
						padding: 0 24rpx;
					}
				}
				
				.confirm-btn {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background: #D42E78;
					color: #fff;
					border-radius: 12rpx;
					font-size: 32rpx;
					transition: all 0.3s ease;
					
					&:active {
						opacity: 0.9;
						transform: scale(0.98);
					}
				}
			}
		}
	}
	
	// 统计信息
	.stats-bar {
		padding: 24rpx;
		background: #fff;
		border-bottom: 1rpx solid #F5F5F5;
		
		.stats-text {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	// 内容区域
	.content-container {
		flex: 1;
		overflow: hidden;
		
		.beer-list {
			height: 100%;
			padding: 24rpx;
			
			.beer-card {
				margin-bottom: 24rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
			
			.empty-state {
				padding: 48rpx 0;
				text-align: center;
				
				.empty-text {
					font-size: 28rpx;
					color: #999;
				}
			}
			
			.loading-status {
				padding: 24rpx 0;
				text-align: center;
				
				.loading-wrapper {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					
					.loading-text {
						font-size: 24rpx;
						color: #999;
						margin-left: 8rpx;
					}
				}
				
				.no-more {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>