import CustomNav from '@/components/CustomNav'
import Taro from '@tarojs/taro'
import withLayout from '@/layouts'
import { getIndexSearch } from '@/services/home'
import { useEffect, useState } from 'react'
import SearchBar from '@/components/SearchBar'
import './search.less'


export default withLayout((props) => {
    const { router, person } = props    
    const [hotList, setHotList] = useState([])
    const hotSearch = (val) => {
        Taro.navigateTo({ url: `/pages/searchResult/searchResult?q=${val}` });
    }
    const onSearch = (e) => {
        if (e.detail.value !== '') {
            Taro.navigateTo({ url: `/pages/searchResult/searchResult?q=${e.detail.value}` });
        }
    }
    useEffect(() => {
        getIndexSearch().then((res) => {
            setHotList(res || [])
        })
    }, [])
    return (
        <view className='page-index'>
            <view className='index-navbar'>
                <CustomNav title='搜索' />
            </view>

            <SearchBar placeholder='请输入景区/城市搜索' onBlur={onSearch} />

            <view className='content'>
                <view className='hotSearch'>热门搜索</view>
                <view className='hotSearchtip'>
                    {
                        (hotList||[]).map((item) => <view onClick={()=>hotSearch(item.word)}>{item.word}</view>)
                    }
                </view>
            </view>

        </view>
    )
})