<template>
    <view>
        <!-- 搜索框 -->
        <uni-search-bar v-model="searchText" @confirm="handleSearch" />

        <!-- <view v-if="showSuggestions" class="suggestions-list">
            <view 
                v-for="(item, index) in suggestions" 
                :key="index"
                class="suggestion-item"
                @click="selectSuggestion(item)"
            >
                {{ item }}
            </view>
        </view> -->

        <!-- 筛选条件 -->
        <view class="filter-container">
            <picker mode="selector" :range="categoryOptions" @change="handleCategoryChange">
                <view class="filter-item">{{ categoryText }}</view>
            </picker>
            <picker mode="selector" :range="sortOptions" @change="handleSortChange">
                <view class="filter-item">{{ sortText }}</view>
            </picker>
        </view>

        <!-- 搜索结果 -->
        <search-results :list="results" />
    </view>
</template>

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

// const suggestions = ref([])
// const showSuggestions = ref(false)

// const handleInput = debounce(async () => {
//   if (!searchText.value.trim()) {
//     showSuggestions.value = false
//     return
//   }
  
//   try {
//     const res = await getSuggestions(searchText.value)
//     suggestions.value = res
//     showSuggestions.value = true
//   } catch (error) {
//     console.error('获取搜索建议失败:', error)
//   }
// }, 300)

const searchText = ref('')
const category = ref(0)
const sort = ref(0)

const categoryOptions = ['全部类别', '电子产品', '服装', '食品']
const sortOptions = ['默认排序', '价格从低到高', '价格从高到低', '销量最高']

const categoryText = computed(() => categoryOptions[category.value])
const sortText = computed(() => sortOptions[sort.value])

const handleSearch = async () => {
    const params = {
        keyword: searchText.value,
        category: category.value,
        sort: sort.value
    }

    // 调用搜索API
    const res = await searchAPI(params)
    results.value = res.data
}

const handleCategoryChange = (e) => {
    category.value = e.detail.value
    handleSearch()
}

const handleSortChange = (e) => {
    sort.value = e.detail.value
    handleSearch()
}
</script>