import React, { Suspense, useState, lazy } from 'react'
import { View, Text } from '@tarojs/components'
import CustomNav from '@/components/CustomNav'
import logo from '@/assets/icons/comm/logo_small.png'
import tabList from './tabbar'
import './index.less'

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


export default (props) => {
  const [currentTab, setCurrentTab] = useState(0)

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

  return (
    <view className='page-index'>
      <view className='index-navbar'>
        <CustomNav logo={logo} title='十公里' />
      </view>
      <view className='index-container'>
        <Suspense fallback='loading...'>
          {currentTab === 0 && <Recommend />}
          {currentTab === 1 && <Guide />}
          {currentTab === 2 && <Strategy />}
          {currentTab === 3 && <Mine />}
        </Suspense>
      </view>
      <view className='index-tabbar'>
        <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>
      </view>
    </view>
  )
}