import { FC, useEffect, useState } from 'react';
import { history, useLocation, useParams } 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 urlParams = useParams();
  const location = useLocation();

  let urlStr = `${urlParams?.fileType}${location?.search}`;

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

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

export default LeftMenuCom

