import Taro from '@tarojs/taro'
import { React, useState, useEffect } from 'react'
import iconsearch from '@/assets/icons/housemantj/search.png'
import locationimg from '@/assets/icons/housemantj/location.png'
import Tip from '@/components/tip'
import List from '@/components/List';
import { getIndexType,  getResourceList } from '@/services/home'
import Card from '../components/Card'
import './less/Recommend.less'


export default (props) => {
  const { router, person, location } = props
  const [activeTab, setActiveTab] = useState(0)
  const [typeList, setTypeList] = useState([])
  
  
  const [queryParams, setQueryParams] = useState({ location: location, pageNum: 1, pageSize: 10, typeId: '' })

  // 获取资源表信息
  const [alllist, setAllList] = useState([])
  //分类标签
  const tabs = [{ title: '附近' }].concat(typeList.map(x => ({ ...x, title: x.typeName })))
  //切换上面的标签
  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
    const tab = tabs[index].typeId
    setQueryParams({
      ...queryParams,
      typeId: tab
    })
    if (index == 0) {
      setQueryParams({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
    }
  }
  useEffect(() => {
    //查询分类标签表
    getIndexType({ pageSize: 20 }).then((res) => {
      setTypeList(res.records || [])
    })
  }, [])


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

  return (
    <view style={{ height: '100%', overflow: 'hidden' }}>
      <view className='search' onClick={onSearch}>
        <input className='searchInput' disabled />
        <image className='searchicon' src={iconsearch} />
        <view className='searchword'>搜索</view>
      </view>
      <Tip />
      <view className='index-tabs'>
        <view className='position'>
          <image className='location' src={locationimg} />
          <view className='city'>南京</view>
          <view className='line' />
        </view>
        <scroll-view scroll-x='true' scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll'>
          <mp-tabs
            tabClass='tabs-Unselected'
            swiperClass='tabs-swiper'
            activeClass='tabs-Selected'
            tabs={tabs}
            current={activeTab}
            onChange={handleTabChange}
            activeTab={activeTab}
          >
          </mp-tabs>
        </scroll-view>
      </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>
  )
}