import React, { useState, useEffect } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import withLayout from '@/layouts'
import CustomNav from '@/components/CustomNav'
import { useModel } from '@/store'
import LoginModel from "@/components/LoginModel"

import tabList from './tabbar'
import Homes from './tabs/Homes'
import Orders from './tabs/Orders'
import Mine from './tabs/Mine'
import Information from './tabs/Information'

import './index.less'


export default withLayout((props) => {
  const { router } = props
  const { person } = useModel('userData')


  const { params, path } = router
  const { tab } = params || {}

  const [currentTab, setCurrentTab] = useState(0)

  const [isDidShow, setIsDidShow] = useState(0)

  const [isShow, setIsShow] = useState(false)


  useDidShow(() => {
    setIsDidShow(isDidShow + 1)
  })

  useEffect(() => {
    if (tab) {
      setCurrentTab(tab - 0)
    }
    // setIsShow(true)
  }, [tab,])


  const handleTabChange = (e) => {

    if (!person?.phone) {
      // Taro.navigateTo({ url: `/pages/UserLogin/index` })
      setIsShow(true)
    } else {
      const { index } = e.detail
      setCurrentTab(index)

    }

  }


  return (
    <view className='page-index'>
      <LoginModel isLoginVisible={isShow} />

      <view className='index-navbar'>

        <CustomNav title='首页' home />
      </view>
      <view className='index-container'>
        {currentTab === 0 && <Homes />}
        {currentTab === 1 && <Orders router={router} />}
        {currentTab === 2 && <Information router={router} />}

        {currentTab === 3 && <Mine isDidShow={isDidShow} router={router} />}
      </view>
      <view className='index-tabbar'>
        <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>
      </view>
    </view>
  )
})