import React, { useEffect } from 'react';
import { Row, Col, Image } 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';
import { homeImgMap } from '@/config/sagacare/sagacare_image.js';

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.setOut}>
        <img src={homeImgMap.set} />
      </div>
      {menuList?.map((group, fidx) => {
        return (
          <div className={styles.menuList} key={fidx}>
            {group.title && <div className={styles.groupTitle}>{group.title}</div>}
            <Row gutter={[20, 20]}>
              {(group.menus || []).map((item, index) => {
                return (
                  <Col span={8} key={'col' + index}>
                    <div
                      className={styles.menuItem}
                      onClick={() => {
                        menuClick(item);
                      }}
                    >
                      <Image width={36} preview={false} src={item.icon} />
                      <div className={styles.name}>{item.title}</div>
                    </div>
                  </Col>
                );
              })}
            </Row>
          </div>
        );
      })}
    </div>
  );
};
export default NavMenu;
