import React, { Suspense, useState } from 'react'
import tabList from './tabbar'
import './style.less'

const Demo1 = React.lazy(() => import('./Demo1'))
const Demo2 = React.lazy(() => import('./Demo2'))

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

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

  const Comp = currentTab === 1 ? Demo1 : Demo2

  return (
    <Suspense fallback='loading...'>
      <view className='main-layout'>
        <view className='main-navbar'></view>
        <view className='main-container'>
          <Comp />  
        </view>
        <view className='main-tabbar'>
          <mp-tabbar list={tabList} onChange={handleTabChange}></mp-tabbar>
        </view>
      </view>
    </Suspense>
  )
}