<template>
	<view class="page flex flex-col">
		<!-- 固定搜索框 -->
		<view class="fixed-search-box" style="background-color:#19367A;border-radius: 0rpx 0rpx 24rpx 24rpx;">
			<view class="search-box">
				<text class="cuIcon-loading" style="font-size: 40rpx;color: #A2A2A2;margin-right: 24rpx;padding-left: 20rpx;"
					@click="search" :class="{ 'rotate': isRotating }"></text>
				<input style="flex:1;" v-model="keyword" type="text" placeholder="搜索酒款名称，品牌名称，啤酒风格" @confirm="search" @input="changeSearch">
				<view class="searchs" @click="search" style="">
				  <uni-icons type="search" size="30" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 热门啤酒风格 -->
			<template v-if="!keyword">
				<view class="hot-title">热门啤酒风格</view>
				<view class="hot-box">
					<view v-for="(item, index) in popularStyleList" :key="index" class="hot-item flex justify-between align-center"
						@click="searchByStyle(item)" style="margin-bottom: 32rpx;">
						<view class="">
							<image src="@/static/bg/pc-1.png" style="width: 62rpx;height: 88rpx;"></image>	
						</view>
						<view class="flex-1">
							<view class="title ">{{ item.beerStyles}}</view>
							<!-- <view class="sub">全系列{{item.popular}}款产品在售</view> -->
						</view>
						<view class="">
						<image src="@/static/bg/deletes.svg" style="width: 48rpx;height: 48rpx;"></image>	
						</view>
						
					</view>
				</view>
			</template>
			<template v-else>
				<view>
					<view class=" flex justify-start margin-top:24rpx;">
						<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">最佳匹配</view>
						<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">酒款</view>
						<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">酒厂</view>
					</view>
				</view>
			</template>
			<template v-if="curTag == 0 && keyword ">
				<scroll-view v-if="commonBeer.length > 0" scroll-y="true" class="my-brandSide">
					<view class="brandSide-box" v-for="(item, index) in commonBeer" :key="index" @click="toBeer(item)">
						<view class="flex align-center justify-start">
							<image :src="item.cover" class="beerCover"></image>
							<view>
								<view class="title">{{ item.beerName }}</view>
								<view class="desc" style="margin-bottom: 10rpx;">{{item.beerStyles}}</view>
								<!-- <view class="desc flex align-center">
									<image :src="item.brandLogo" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
									</image>
								{{item.brandName}}</view> -->
							</view>
						</view>
						
						<view class="flex flex-col justify-between">
							<view class="desc margin-bottom-xs bg-beer">
								{{ item.beerOverallRating || 0 }}
								<text class="cuIcon-favorfill" style="font-size: 30rpx;margin-left: 10rpx;color:#FEE034"></text>
							</view>
							<!-- <view class="desc" style="text-align: right;">
								{{ item.beerReviewsCount || 0}}
								<text class="cuIcon-friend" style="font-size: 30rpx;margin-left: 10rpx;"></text>
							</view> -->
													
						</view>
					</view>
				</scroll-view>
				<scroll-view v-if="commonBreweries.length > 0" scroll-y="true" class="my-brandSide">
					<view class="brandSide-box" v-for="(item, index) in commonBreweries" :key="index" @click="toBrand(item)">
						<view class="flex align-center justify-start">
							<image :src="item.brandLogo" class="logo"></image>
							<view>
								<view class="title">{{ item.brandName }}</view>
								<view class="desc">全系列XXX款产品在售</view>
							</view>
						</view>
						<image src="@/static/right-arrow.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
				</scroll-view>
				
				<view v-if="commonBeer.length == 0 && commonBreweries.length == 0" style="flex:1;width: 100%;" class="flex justify-center align-center">
					<view style="color: #979797;font-size: 24rpx;">暂无结果</view>
					</view>
			</template>
			
			<!-- 酒款列表 -->
			<template v-if="curTag == 1 && keyword">
				<scroll-view v-if="beers.length > 0" scroll-y="true" class="my-brandSide" style="flex:1">
					<view class="brandSide-box" v-for="(item, index) in beers" :key="index" @click="toBeer(item)">
						<view class="flex align-center justify-start">
							<image :src="item.cover" class="beerCover"></image>
							<view>
								<view class="title">{{ item.beerName }}</view>
								<view class="desc" style="margin-bottom: 10rpx;">{{item.beerStyles}}</view>
								<!-- <view class="desc flex align-center">
									<image :src="item.brandLogo" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
									</image>
								{{item.brandName}}</view> -->
							</view>
						</view>
						
						<view class="flex flex-col justify-between">
							<view class="desc margin-bottom-xs bg-beer">
								{{ item.beerOverallRating || 0 }}
								<text class="cuIcon-favorfill" style="font-size: 30rpx;margin-left: 10rpx;color:#FEE034"></text>
							</view>
							<!-- <view class="desc" style="text-align: right;">
								{{ item.beerReviewsCount || 0}}
								<text class="cuIcon-friend" style="font-size: 30rpx;margin-left: 10rpx;"></text>
							</view> -->
													
						</view>
					</view>
				</scroll-view>
			
				<view v-else style="flex:1;width: 100%;" class="flex justify-center align-center">
					<view style="color: #979797;font-size: 24rpx;">暂无结果</view>
				</view>
			</template>
			<!-- 酒厂列表 -->
			<template v-if="curTag == 2 && keyword">
				<scroll-view v-if="breweries.length > 0" scroll-y="true" class="my-brandSide" style="flex:1">
					<view class="brandSide-box" v-for="(item, index) in breweries" :key="index" @click="toBrand(item)">
						<view class="flex align-center justify-start">
							<image :src="item.brandLogo" class="logo"></image>
							<view>
								<view class="title">{{ item.brandName }}</view>
								<view class="desc">全系列XXX款产品在售</view>
							</view>
						</view>
						<image src="@/static/right-arrow.png" style="width: 48rpx;height: 48rpx;"></image>
					</view>
				</scroll-view>
				<view v-else style="flex:1;width: 100%;" class="flex justify-center align-center">
					<view style="color: #979797;font-size: 24rpx;">暂无结果</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		commonSearch,
		popularStyle,
		getBeerByStyle,
		searchByBreweriesApi,
		getBeerList
	} from "@/api/platform.js"
	export default {
		components: {
			
		},
		data() {
			return {
				keyword: '',
				popularStyleList: [],
				curTag: 0,
				breweries: [], // 酒厂列表
				beers: [], // 酒款列表
				commonBeer:[],
				commonBreweries:[],
				timer: null,
				isRotating: false
			};
		},
		mounted() {
			this.getPopularStyle()
		},
		methods: {
			changeSearch() {
				this.commonBeer=[]
				this.commonBreweries=[]
			  if(this.keyword.length < 2) return
			 
			  // 节流搜索
			  if (this.timer) {
				  clearTimeout(this.timer)
				  this.timer = null
			  }
			  this.isRotating = true
			  this.timer = setTimeout(()=>{
				  if(this.keyword.length < 2) return
				  this.search()
			  },500)
			},
			search() {
				this.commonBeer=[]
				this.commonBreweries=[]
				commonSearch(this.keyword).then(res => {
					console.log(res)
					this.isRotating = false
					this.commonBeer = res.data.beers
					this.commonBreweries = res.data.breweries
				})
			},
			// 获取热门风格
			getPopularStyle() {
				popularStyle().then(res => {
					console.log(res)
					this.popularStyleList = res.data
				})
			},
			searchByStyle(item) {
				uni.navigateTo({
					url: '/pages/index/styleBeer?beerStyles=' + item.beerStyles
				})
			},
			// 切换标签
			changeTag(key) {
				this.curTag = key
				if (this.curTag == 2) {
					this.commonBeer=[]
					this.commonBreweries=[]
					this.searchByBreweries()
				} else if (this.curTag == 1) {
					this.commonBeer=[]
					this.commonBreweries=[]
					this.searchByBeer()
				} else if (this.curTag === 0) {
					this.commonBeer=[]
					this.commonBreweries=[]
					this.search()
				}
			},
			// 酒厂筛选
			searchByBreweries() {
				searchByBreweriesApi(this.keyword).then(res => {
					console.log(res)
					this.breweries = res.rows
				})
			},
			// 酒款筛选
			searchByBeer() {
				getBeerList(this.keyword).then(res => {
					console.log(res)
					this.beers = res.rows
				})
			},
			// 跳转酒厂详情
			toBrand(item) {
				uni.navigateTo({
					url: '/pages/index/brandHome?breweryId=' + item.id
				})
			},
			// 跳转酒款详情
			toBeer(item) {
				uni.navigateTo({
					url: '/pages/index/review?beerId=' + item.id
				})
			},
			startLoading() {
			  this.isLoading = true;
			},
			stopLoading() {
			  this.isLoading = false;
			}
		},
		watch: {
			keyword(newVal, oldVal) {
				console.log('关键词变化:', oldVal, '->', newVal);
				if(newVal.length<2){
					this.commonBeer = []
					this.commonBreweries = []
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #FFF;
		height: 100vh;
		padding-top: 120rpx; /* 为固定搜索框留出空间 */
		font-family: Roboto;
	}

	.fixed-search-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.content {
		padding: 0 38rpx;
		// margin-top: 120rpx; /* 为固定搜索框留出空间 */
	}

	.search-box {
		border-radius: 24rpx;
		box-sizing: border-box;
		height: 80rpx;
		background-color: #FFF;
		display: flex;
		align-items: center;
		margin: 20rpx 30rpx 20rpx 22rpx;
		
		.searchs {
			background: #D42E78;
			width: 80rpx;
			height: 80rpx;
			border-radius: 0 24rpx 24rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.hot-title {
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 600;
		color: #030303;
		margin: 36rpx 0 16rpx 0;
		// margin: 46rpx 22rpx 46rpx;
	}

	.hot-box {
		
		margin: 0 22rpx;
		background: #FEFEFE;
		box-sizing: border-box;
		padding-left: 12rpx;

		.hot-item {
			.title {
				font-family: Roboto;
				font-size: 28rpx;
				font-weight: 600;
				color: #0B0E26;
				padding-left: 24rpx;
			}

			.sub {
				font-family: Roboto;
				font-size: 24rpx;
				font-weight: 500;
				color: #5E5F60;
			}
		}
	}

	.tag {
		background-color: #F7F8FA;
		border-radius: 20rpx;
		padding: 16rpx 32rpx;
		margin-right: 40rpx;
		color: #606060;
	}

	.active-tag {
		background-color: #4E63E0;
		font-weight: 600;
		color: #FFFFFF;
	}

	.my-brandSide {
		padding: 28rpx 0rpx;

		.brandSide-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 30rpx 0;
			// border-bottom: 1rpx solid #F0F4F9;
			padding: 22rpx 0;

			.logo {
				width: 88rpx;
				height: 88rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
			}
			.beerCover {
				width: 88rpx;
				height: 124rpx;
				border-radius: 12rpx;
				margin-right: 28rpx;
			}
			.title {
				font-size: 28rpx;
				color: #19191B;
				margin-bottom: 16rpx;
			}

			.desc {
				font-size: 24rpx;
				color: #9C9BA6;
			}
			.bg-beer{
				padding: 8rpx 18rpx;
				background: #F7F8FA;
				border-radius: 12rpx;
			}
		}
	}
	.rotate {
	  animation: rotate 1s linear infinite;
	}
	
	@keyframes rotate {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}
</style>