import Taro from '@tarojs/taro'
import { React, useState, useEffect, useRef, useMemo } 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 MasonryLayout from '@/components/MasonryLayout';
import { getIndexType, getResourceList } from '@/services/home'
import { random } from '@/utils'
import Card from '../components/Card'
import './less/Recommend.less'
import { OfficialAccount } from '@tarojs/components'

const listStyle = { height: 'calc(100% - 145px)' }

export default (props) => {
  const { router, person, location } = props

  const listClass = useMemo(() => random('f'), [])
  const [activeTab, setActiveTab] = useState(0)
  const [typeList, setTypeList] = useState([])
  const listRef = useRef()

  const [queryParams, setQueryParams] = useState({ location, pageNum: 1, pageSize: 10, typeId: '' })
  const rfTimes = useRef(0)

  // 获取资源表信息
  // const [alllist, setAllList] = useState([])
  const [listData, setListData] = useState({ list: [], rfTimes: 0 })


  //分类标签
  const tabs = [{ title: '附近' }].concat(typeList.map(x => ({ ...x, title: x.typeName })))
  const details=(index,tab)=>{
    setActiveTab(index)
    setQueryParams({
      ...queryParams,
      typeId: tab
    })
  }
  //切换上面的标签
  const handleTabChange = (e) => {
    const { index } = e.detail
    details(index,tabs[index].typeId||'')
  }

  const handleDataChange = (value, e) => {
    if (e.paramsChanged) {
      rfTimes.current += 1

      //如果context有的话代表他滚动了   那么切换tab页就置顶
      if (listRef.current?.context) {
        listRef.current.context.scrollTo({ top: 0 })
      }
    }

    setListData({ list: value, rfTimes: rfTimes.current })
  }

  useEffect(() => {
    //查询分类标签表
    getIndexType({ pageSize: 20 }).then((res) => {
      setTypeList(res.records || [])
      details(1,res.records[0].typeId)

    })
  }, [])

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

  // useDidShow(() => {
  //   setQueryParams({ ...queryParams })
  // })

  return (
    <>
      <OfficialAccount>s21</OfficialAccount>
      <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>
      
        <List
          ref={listRef}
          style={listStyle}
          request={getResourceList}
          params={queryParams}
          refresherEnabled={false}
          onDataChange={handleDataChange}
        >
          <view style={{ padding: '30rpx 15rpx' }}>
            <MasonryLayout
              itemKey='resourceNo'
              listData={listData}
              render={(item, callback) => <Card item={item} onImageLoad={callback} />}
            />
          </view>
        </List>
      
    </>
  )
}