import { React, useState, useEffect, } from 'react'
// .就是当前路径
import iconsearch from '../../assets/icons/housemantj/search.png'
import CustomNav from '@/components/CustomNav'
import Taro from '@tarojs/taro'
import Card from '../index/components/Card'
import { getResourceList } from '@/services/home'
import List from '@/components/List';
import './searchResult.less'
import withLayout from '@/layouts'



export default withLayout((props) => {
  const { router, person, location } = props
  const { q } = props.router.params

  // 横向tab
  const [activeTab, setActiveTab] = useState(0)
  const [queryParams, setQueryParams] = useState({ q: q, location: location, pageNum: 1, pageSize: 10, typeId: '' })

  // 获取资源表信息
  const [alllist, setAllList] = useState([])
  const tabs = [
    {
      title: '全部',
    },
    {
      title: '美食',
    },
    {
      title: '景点',
    },
  ]
  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
    if (index == 0) {
      setQueryParams({ q: q, location: location, pageNum: 1, pageSize: 10, typeId: '' })
    }
    else if (index == 1) {
      setQueryParams({ q: q, targetType: 'shop', location: location, pageNum: 1, pageSize: 10, typeId: '' })
    }
    else {
      setQueryParams({ q: q, targetType: 'tourist', location: location, pageNum: 1, pageSize: 10, typeId: '' })
    }
  }



  const onSearch = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/search/search' });
  }




  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav title='搜索' />
      </view>
      <view className='index-container'>
        <view className='search'>
          <input className='searchInput' placeholder='请输入景区/城市搜索' disabled onClick={onSearch} />
          <image className='searchicon' src={iconsearch} />
          <view className='lineSearch'></view>
        </view><view className='index-tabs'>
          <mp-tabs
            tabClass='tabs-Unselected'
            swiperClass='tabs-swiper'
            activeClass='tabs-Selected'
            tabs={tabs}
            current={activeTab}
            onChange={handleTabChange}
            activeTab={activeTab}
          >
          </mp-tabs>
        </view>
        <List
          style={{ height: 'calc(100% - 160px)' }}
          request={getResourceList}
          params={queryParams}
          onDataChange={setAllList}
        >
          <view className='waterfall'>
            {
              alllist.map((item) => <Card key={item.resourceNo} item={item} />)
            }
          </view>
        </List>
      </view>
    </view>
  )
})