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, location } = props
  const { params, path } = router
  const { tab } = params || {}
  const [currentTab, setCurrentTab] = useState(0)
  const handleTabChange = (e) => {
    const { index } = e.detail
    setCurrentTab(index)
  }
  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 location={location} />}
        {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>
  )
})