import React from 'react';
import Icon from '../Icon/index';
import { ILargeScreenSidebarProps } from '../../type/LargeScreenSidebar';

import './style.scss';

const LargeScreenSidebar: React.FC<ILargeScreenSidebarProps> = (props) => {
  const { sidebarList, sidebarEvent, pageList } = props;

  //点击事件
  const sidebarClick = (key: string | number) => {
    if (Array.isArray(pageList) && pageList && pageList.length > 0) {
      sidebarEvent(key);
    }
  };
  return (
    <div className="zl-large-screen-sidebar">
      {Array.isArray(sidebarList) &&
        sidebarList?.length > 0 &&
        sidebarList.map((item) => {
          if(item?.hidden){
            return <></>
          }else{
            return (
              <div
                key={item?.key}
                className="zl-large-screen-sidebar-element"
                onClick={() => {
                  sidebarClick(item?.key);
                }}
              >
                <div
                  className={`zl-large-screen-sidebar-element-content ${
                    item?.selected ? 'active-icon' : ''
                  } ${pageList.length <= 0 ? 'disable-icon' : ''}`}
                >
                  {typeof item?.icon === 'string' ? (
                    <Icon name={item?.icon} classname="zl-large-sidebar-icon" />
                  ) : (
                    item?.icon
                  )}
                  <span className="zl-large-sidebar-title">{item?.title}</span>
                </div>
              </div>
            );
          }
        })}
    </div>
  );
};

export default LargeScreenSidebar;