<template>
	<view class="search-bar-wrapper">
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<uni-icons type="search" size="20" color="#A0AEC0" class="search-icon" />
				<input 
					class="search-input" 
					v-model="keyword"
					placeholder="搜索课程名称" 
					placeholder-class="input-placeholder"
					@confirm="handleSearch"
				/>
				<uni-icons 
					v-if="keyword" 
					type="closeempty" 
					size="16" 
					color="#A0AEC0" 
					class="clear-icon" 
					@click="clearSearch" 
				/>
			</view>
			<view class="search-btn" @click="handleSearch">搜索</view>
		</view>
		
		<!-- 热门关键词 -->
		<view class="hot-keywords">
			<text class="hot-label">热门搜索：</text>
			<view 
				v-for="(kw, index) in hotKeywords" 
				:key="index"
				:class="['hot-tag', { active: keyword === kw }]"
				@click="selectKeyword(kw)"
			>
				{{ kw }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
	modelValue: {
		type: String,
		default: ''
	},
	hotKeywords: {
		type: Array,
		default: () => ['燃脂', '瑜伽', '单车', '普拉提', '高强度']
	}
})

const emit = defineEmits(['update:modelValue', 'search'])

const keyword = ref(props.modelValue)

watch(() => props.modelValue, (val) => {
	keyword.value = val
})

const handleSearch = () => {
	console.log('[SearchBar] 搜索参数:', { keyword: keyword.value })
	emit('update:modelValue', keyword.value)
	emit('search', { keyword: keyword.value })
}

const clearSearch = () => {
	keyword.value = ''
	emit('update:modelValue', '')
	console.log('[SearchBar] 已清除搜索关键词')
}

const selectKeyword = (kw) => {
	keyword.value = kw
	handleSearch()
}

const getSearchParams = () => {
	console.log('[SearchBar] 获取搜索参数:', { keyword: keyword.value })
	return { keyword: keyword.value }
}

defineExpose({
	getSearchParams,
	clearSearch
})
</script>

<style lang="scss" scoped>
/* 搜索框 */
.search-bar {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 20rpx;
	
	.search-input-wrapper {
			flex: 1;
			display: flex;
			align-items: center;
			background: #F5F7FA;
			border-radius: 44rpx;
			padding: 0 24rpx;
			height: 72rpx;
			
			.search-icon {
				margin-right: 12rpx;
			}
			
			.search-input {
				flex: 1;
				font-size: 28rpx;
				color: #1a202c;
			}
			
			.input-placeholder {
				color: #A0AEC0;
			}
			
			.clear-icon {
				padding: 8rpx;
			}
		}

	.search-btn {
		padding: 0 32rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 44rpx;
	}
}

/* 热门关键词 */
.hot-keywords {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12rpx;
	
	.hot-label {
		font-size: 26rpx;
		color: #8A99B4;
	}
	
	.hot-tag {
		padding: 8rpx 20rpx;
		background: #F5F7FA;
		color: #5E6F8D;
		font-size: 24rpx;
		border-radius: 28rpx;
		transition: all 0.2s ease;
		
		&.active {
			background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
			color: #ffffff;
		}
	}
}
</style>