import React ,{FC} from "react";
import { TabBar } from 'antd-mobile'
import WidthUseNavigate from './../WidthUseNavigate/index'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
const tabs = [
  {
    key: '/home',
    title: '首页',
    icon: <AppOutline />,
    badge: '1',
  },
  {
    key: '/home/todo',
    title: '待办',
    icon: <UnorderedListOutline />,
    badge: '2',
  },
  {
    key: '/home/message',
    title: '消息',
    icon: <MessageOutline />,
    badge: '3',
  },
  {
    key: '/home/me',
    title: '我的',
    icon: <UserOutline />,
    badge: '4',
  },
]

class BottomInner extends React.Component{

    state = {
      // 默认选中的TabBar菜单项
      selectedTab: this.props.useLocation
    }

    // 组件接收到新的props（此处，实际上是路由信息）就会触发该钩子函数
    componentDidUpdate(prevProps) {
      // prevProps 上一次的props，此处也就是上一次的路由信息
      // this.props 当前最新的props，此处也就是最新的路由信息
      // 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
      if (prevProps.useLocation !== this.props.useLocation) {
        // 此时，就说明路由发生切换了
        this.setState({
          selectedTab: this.props.useLocation
        })
      }
    }
    setRouteActive = (value) => {
      this.props.to(value)
      this.setState({
        selectedTab: value
      })
    }


    render() {
      return <TabBar activeKey={this.state.selectedTab} onChange={value => this.setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge= {item.badge}/>
        ))}
      </TabBar>
    }
  }

  
  export function Todo() {
    return <div>待办</div>
  }
  
  export function Message() {
    return <div>消息</div>
  }
  
  export function PersonalCenter() {
    return <div>我的</div>
  }
  
// 使用高阶组件包裹当前类组件
const Bottom = WidthUseNavigate(BottomInner);
export default Bottom