import React, { useState } from 'react';
import styles from './HomeLayout.less';
import { TabBar } from 'antd-mobile';
import router from 'umi/router';
import { getActiveMenu } from '@/utils';
const menus = [
  {
    title: '首页',
    key: 'exam',
    path: '/exam',
    icon: '/images/exam.png',
    selectedIcon: '/images/exam-inactive.png',
  },
  {
    title: '视频教程',
    key: 'video',
    path: '/video',
    icon: '/images/video.png',
    selectedIcon: '/images/video-inactive.png',
  },
  {
    title: '个人中心',
    key: 'profile',
    path: '/profile',

    icon: '/images/profile.png',
    selectedIcon: '/images/profile-inactive.png',
  },
];
const Index = ({ children, location: { pathname } }) => {
  console.log(pathname);
  const menu = getActiveMenu(menus, pathname);

  const [selectedTab, setSelectedTab] = useState((menu && menu.key) || 'home');

  const rendTabBarContent = () => {
    return menus.map(({ title, key, path, icon, selectedIcon }) => (
      <TabBar.Item
        title={title}
        key={key}
        icon={
          <div
            style={{
              width: '22px',
              height: '22px',
              background: `url(${selectedIcon}) center center /  21px 21px no-repeat`,
            }}
          />
        }
        selectedIcon={
          <div
            style={{
              width: '22px',
              height: '22px',
              background: `url(${icon}) center center /  21px 21px no-repeat`,
            }}
          />
        }
        selected={selectedTab === key}
        onPress={() => {
          setSelectedTab(key);
          router.push(path);
        }}
      >
        {children}
      </TabBar.Item>
    ));
  };
  return (
    <div className={styles.root}>
      <TabBar unselectedTintColor="#999999" tintColor="#176aff" barTintColor="white">
        {rendTabBarContent()}
      </TabBar>
    </div>
  );
};

export default Index;