import React, { useState, useEffect,useRef } from 'react'
import Taro from '@tarojs/taro'
import CustomNav from '@/components/CustomNav'
import logo from '@/assets/icons/comm/logo_small.png'
import withLayout from '@/layouts'
import tabList from './tabbar'
import Guide from './tabs/Guide'
import Mine from './tabs/Mine'
import Recommend from './tabs/Recommend'
import './index.less'
import { getLocation } from '@/utils/location'
import { getIndexType,  getResourceList } from '@/services/home'



export default withLayout((props) => {
  const { router, person } = props
  const { params, path } = router
  const { tab } = params || {}

  const [currentTab, setCurrentTab] = useState(0)

  const locRef = useRef()


  const handleTabChange = (e) => {
    const { index } = e.detail
    setCurrentTab(index)
  }

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


  useEffect(() => {
    getLocation().then((res) => {
      locRef.current = `${res.longitude},${res.latitude}`
      setQueryParams({
        ...queryParams,
        location: locRef.current
      })
    })  
  }, [])

  useEffect(() => {
    if (tab) {
      setCurrentTab(tab - 0)
    }
  }, [tab])
  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav logo={logo} title='十公里' />
      </view>
      <view className='index-container'>
        {currentTab === 0 && <Recommend loc={locRef} qp={queryParams}/>}
        {currentTab === 1 && <Guide person={person} router={router} />}
        {/* {currentTab === 2 && <Strategy />} */}
        {currentTab === 2 && <Mine person={person} />}
      </view>
      <view className='index-tabbar'>
        <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>
      </view>
    </view>

  )

})