import React, { useEffect } from 'react';
import { Row, Col } from 'antd';
import styles from './index.less';
import Icon from '@/tenants-ui/SgIcon';
import useMenuList, { menutype } from '@/hooks/useMenuList';
import { history, useModel, useLocation } from 'umi';

const NavMenu: React.FC = () => {
  const logo = require('@/assets/images/logo.png');
  const location = useLocation();
  const { closeMenu } = useModel('controller');
  const { menuList } = useMenuList();
  //debugger;
  const menuClick = (item: menutype) => {
    closeMenu();
    history.push(`/${item.id}`);
  };
  //   console.log('navMenu');
  useEffect(() => {
    console.log('location', location);
  }, [location]);
  return (
    <div className={styles.drawerDiv}>
      <div className={styles.title}>
        <img src={logo} style={{ height: 70 }}></img>
      </div>
      <div className={styles.menuList}>
        <Row gutter={[20, 20]}>
          {(menuList || []).map((item, index) => {
            return (
              <Col span={8} key={'col' + index}>
                <div
                  className={styles.menuItem}
                  onClick={() => {
                    menuClick(item);
                  }}
                >
                  <Icon className="" type={item.id} style={{ fontSize: 26 }}></Icon>
                  <div className={styles.name}>{item.name}</div>
                </div>
              </Col>
            );
          })}
        </Row>
      </div>
    </div>
  );
};
export default NavMenu;
