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 { View, Image } from '@tarojs/components'

//分别是   首页  订单  资讯 我的
import HomesOFFImgaes from '@/assets/tabbar/HomesOFFImgaes.png'
import HomesNOImgaes from '@/assets/tabbar/HomesNOImgaes.png'
import OrdersOFFImgaes from '@/assets/tabbar/OrdersOFFImgaes.png'
import OrdersNOImgaes from '@/assets/tabbar/OrdersNOImgaes.png'
import newsONImages from '@/assets/tabbar/newsONImages.png'
import newsOFFImages from '@/assets/tabbar/newsOFFImages.png'
import MineOFFImgaes from '@/assets/tabbar/MineOFFImgaes.png'
import MineNOImgaes from '@/assets/tabbar/MineNOImgaes.png'


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 || {}


  console.log("🚀 ~ file: index.jsx ~ line 24 ~ withLayout ~ tab", tab)
  const [currentTab, setCurrentTab] = useState(0)



  // const [isShow, setIsShow] = useState(false)


  useDidShow(() => {
    console.log('useDidShow',);

    if (!person?.phone) {
      console.log('还是未登录',);
      setCurrentTab(0)
    }
  })

  useEffect(() => {
    // setCurrentTab(index)

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

  const handleClick = (index) => {
    // Taro.switchTab({
    //   url: '/pages/InformationPage/index'
    // })
    if (!person?.phone) {
      Taro.navigateTo({ url: `/pages/LoginPage/index?login=true&tab=${index}` })
      // setIsShow(true)
    } else {
      Taro.redirectTo({ url: `/pages/index/index?tab=${index}` });
      // setCurrentTab(index)
    }
  }


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

      <view className='index-navbar'>

        <CustomNav title={currentTab === 0 ? '首页' : currentTab === 1 ? '订单' : currentTab === 2 ? '资讯' : '我的'} home />
      </view>
      <view className='index-container'>
        {currentTab === 0 && <Homes />}
        {currentTab === 1 && <Orders router={router} />}
        {currentTab === 2 && <Information router={router} />}

        {currentTab === 3 && <Mine router={router} />}
      </view>
      <view className='index-tabbar'>
        <View
          className={['tabberItem', currentTab == 0 ? "activeTabber" : '']}
          onClick={() => handleClick(0)}
        >
          <Image className='tabberImg' src={currentTab == 0 ? HomesNOImgaes : HomesOFFImgaes}></Image>
          <View className='text'>首页</View>
        </View>
        <View
          className={['tabberItem', currentTab === 1 ? "activeTabber" : '']}
          onClick={() => handleClick(1)}
        >
          <Image className='tabberImg' src={currentTab == 1 ? OrdersNOImgaes : OrdersOFFImgaes}></Image>
          <View className='text'>订单</View>
        </View>
        <View
          className={['tabberItem', currentTab === 2 ? "activeTabber" : '']}
          onClick={() => handleClick(2)}
        >
          <Image className='tabberImg' src={currentTab == 2 ? newsOFFImages : newsONImages}></Image>
          <View className='text'>资讯</View>
        </View>
        <View
          className={['tabberItem', currentTab === 3 ? "activeTabber" : '']}
          onClick={() => handleClick(3)}
        >
          <Image className='tabberImg' src={currentTab == 3 ? MineNOImgaes : MineOFFImgaes}></Image>
          <View className='text'>我的</View>
        </View>
        {/* <mp-tabbar extClass='custom-tabbar' autoSelect={false} current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar> */}
      </view>
    </view>
  )
})