import { FC, useEffect, useState } from 'react';
import { history, useLocation } from "umi";
import styles from './index.less';

interface PageProps {
  data: Array<{
    // 名称
    name: string;
    // 路由
    url: string;
    // 图标
    img: any;
  }>
}

const LeftMenuCom: FC<PageProps> = ({ data }) => {

  const [list, setList] = useState<any>([]);
  const route = useLocation();

  useEffect(() => {
    setList([...data])
  }, [])

  return (
    <div>
      {list.map((item: any, index: number) => {
        return (
          <div className={styles.item1} key={index} onClick={() => history.push(item.url)}>
            <div className={styles.item1_img}></div>
            <div className={styles.item1_name} style={{color: (route.pathname == item.url ? 'red' : '')}}>
              {item.name}
            </div>
          </div>
        )
      })}
    </div>
  )
}

export default LeftMenuCom

