import React, { Suspense, useState, useEffect, lazy } from 'react'
import { useRouter } from '@tarojs/taro'
import CustomNav from '@/components/CustomNav'
import { useModel } from '@/store'
import logo from '@/assets/icons/comm/logo_small.png'
import withLayout from '@/layouts'
import tabList from './tabbar'
import './index.less'
import Guide from './tabs/Guide'
import Mine from './tabs/Mine'
import Recommend from './tabs/Recommend'
// import Strategy from './tabs/Strategy'

// const Recommend = lazy(() => import('./tabs/Recommend'))
// const Guide = lazy(() => import('./tabs/Guide'))
// const Strategy = lazy(() => import('./tabs/Strategy'))
// const Mine =  import'./tabs/Mine'


export default withLayout((props) => {
  const { params } = useRouter()
  const { tab } = params || {}

  const [person] = useModel('person')
  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 />}
      </view>
      <view className='index-tabbar'>
        <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>
      </view>
    </view>

  )

})
