import Taro, { useDidShow } 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 { getNoteList } from '@/services/note'

import NoteCard from '../../components/NoteCard'

const listStyle = { height: '100%' }

export default (props) => {
  const { router, person, location, queryParamsSearch } = props
  const listClass = useMemo(() => random('f'), [])
  const [activeTab, setActiveTab] = useState(0)
  const listRef = useRef()

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

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


  //分类标签
  const tabs = [{ title: '地点' }, { title: '笔记' }]

  const details = (index, tab) => {

    // if (index === 1) {

    //   getNoteList({ location: location }).then(res => {

    //     setListData({ list: res.records })

    //   })
    // }

  }
  //切换上面的标签
  const handleTabChange = (e) => {
    const { index } = e.detail
    setActiveTab(index)
    setQueryParams({ ...queryParams })

    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 })
  }



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


  return (
    <view style={{ height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>

      <List
        ref={listRef}
        style={listStyle}
        request={getNoteList}
        params={queryParamsSearch || queryParams}
        refresherEnabled={false}
        onDataChange={handleDataChange}
      >
        <view style={{ padding: '30rpx 15rpx' }}>

          <MasonryLayout
            itemKey='noteId'
            listData={listData}
            render={(item) => <NoteCard key={item.noteId} item={item} />}
          />
        </view>
      </List>






    </view>
  )
}