import React ,{FC} from "react";
import { NavBar, TabBar } from 'antd-mobile'
import {
  Route,Routes,
  useLocation,
  MemoryRouter as Router,
  useNavigate,
} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
export function Bottom (){
    const navigate = useNavigate();
    const location = useLocation()
    const { pathname } = location
  
    const setRouteActive = (value) => {
      navigate(value)
    }
  
    const tabs = [
      {
        key: '/home',
        title: '首页',
        icon: <AppOutline />,
      },
      {
        key: '/todo',
        title: '待办',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/message',
        title: '消息',
        icon: <MessageOutline />,
      },
      {
        key: '/me',
        title: '我的',
        icon: <UserOutline />,
      },
    ]
  
    return (
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    )
  }
  export function Home() {
    return <div>首页</div>
  }
  
  export function Todo() {
    return <div>待办</div>
  }
  
  export function Message() {
    return <div>消息</div>
  }
  
  export function PersonalCenter() {
    return <div>我的</div>
  }