import React, { useState, useEffect } 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'

export default withLayout((props) => {
  const { router, person } = 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 />}
        {currentTab === 1 && <Guide />}
        {/* {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>

  )

})
