import React, { useState, useEffect, useCallback } from 'react';
import { Nav } from '@alifd/next';
// import { withRouter, Link } from 'react-router-dom';
import FoundationSymbol from '@icedesign/foundation-symbol';
import IceImg from '@icedesign/img';
import Logo from '../Logo';
import styles from './index.module.scss';
import { ajax } from '@/utils';
const { Item, SubNav } = Nav;
function BasicLayout(props) {
  const [isLoading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const pathname = '/fff';

  useEffect(() => {
    if (!props.mockMenu) {
      fetchData();
    } else {
      setData(props.mockMenu.result);
    }
  }, []);

  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const responseData = await ajax({
        api: 'getLeftMenu',
        method: 'get'
      });

      await setLoading(false);
      if (responseData.success) {
        await setData(responseData.result);
      } else {
      }
    } catch (e) {}
  });
  return (
    <div className={styles.asideCustomMenu}>
      <Logo className={styles.menuLogo} />
      <div className={styles.userInfo}>
        <IceImg
          height={40}
          width={40}
          src="https://img.alicdn.com/tfs/TB1eyjzDkvoK1RjSZFDXXXY3pXa-600-600.png"
          className={styles.userAvatar}
        />
      </div>

      <Nav
        mode="inline"
        selectedKeys={[pathname]}
        className={styles.iceMenuCustom}
        activeDirection="right"
      >
        {Array.isArray(data) &&
          data.length > 0 &&
          data.map(nav => {
            if (nav.children && nav.children[0]) {
              return (
                <SubNav icon="account" label={nav.name} key={nav.id}>
                  {nav.children.map(item => {
                    const linkProps = {};
                    // if (item.external) {
                    if (item.newWindow) {
                      linkProps.target = '_blank';
                    }

                    linkProps.href = item.url;
                    return (
                      <Item key={item.id}>
                        <a {...linkProps}>
                          <span>{item.name}</span>
                        </a>
                      </Item>
                    );
                    // }
                  })}
                </SubNav>
              );
            }
            return (
              <Nav.Item key={nav.url}>
                <a href={nav.url} className={styles.iceMenuLink}>
                  {nav.icon ? (
                    <FoundationSymbol size="small" type={nav.icon} />
                  ) : null}
                  <span className={styles.iceMenuItemText}>{nav.name}</span>
                </a>
              </Nav.Item>
            );
          })}
      </Nav>
    </div>
  );
}

export default BasicLayout;