import Taro, { useDidShow } from '@tarojs/taro'
import { React, useState, useEffect, useRef } from 'react'
import { View } from '@tarojs/components';
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 NoData from '@/components/NoData'
import SpinBox from '@/components/Spin/SpinBox';
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 listRef = useRef()

  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: '' })
    }
    //如果context有的话代表他滚动了   那么切换tab页就置顶
    if (listRef.current?.context) {
      listRef.current.context.scrollTo({ top: 0 })
    }
  }
  useEffect(() => {
    //查询分类标签表
    getIndexType({ pageSize: 20 }).then((res) => {
      setTypeList(res.records || [])
    })
  }, [])



  const onSearch = () => {
    // 用绝对路径
    Taro.navigateTo({ url: '/pages/search/search' });
  }
  // 联动收藏
  const likeLook = () => {
    getResourceList().then(e => {
      setAllList(e.records)
    })

  }


  useDidShow(() => {
    likeLook()
  })



  return (
    // <view style={{ height: '100%', overflow: 'hidden',display:'flex',flexDirection:'column' }}>
    <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 scrollX>
          <mp-tabs
            tabClass='tabs-Unselected'
            swiperClass='tabs-swiper'
            activeClass='tabs-Selected'
            tabs={tabs}
            current={activeTab}
            onChange={handleTabChange}
            activeTab={activeTab}
          >
          </mp-tabs>
        </scroll-view>
      </view>
      {/* <View style={{ flex:'auto' }}> */}
        <List
          ref={listRef}
          style={{ height: 'calc(100% - 145px)' }}
          // style={{ flex: 'auto', height: '100%' }}
          request={getResourceList}
          params={queryParams}
          onDataChange={setAllList}
        >
          {/* <MasonryLayout
            className='waterfall'
            list={alllist}
            render={item => <Card item={item} />}
          /> */}

          {
            alllist.length == 0 ?
              <NoData /> :
              <view className='waterfall'>
                {
                  alllist.map((item) => <Card key={item.resourceNo} item={item} />)
                }
              </view>
          }
        </List>
      {/* </View> */}
    </view>
  )
}