import { getColorByIndex } from '@/utils/ui';
import React, { useMemo } from 'react';
import styles from './index.less';

/** @name 侧边栏目录 */
const SidebarMenu: React.FC<{
  menuClickHandle: (params: any) => void;
  active: number;
  cqi: string,
  eventNum: number;
}> = (props) => {
  const { menuClickHandle, active, cqi, eventNum } = props;

  const menuList = useMemo(() => {
    return [
      {
        element: (
          <div>
            <div className={styles.cqi}>CQI</div>
            <div style={{ color: getColorByIndex(98.5) }}>{cqi}</div>
          </div>
        ),
      },
      {
        element: (
          <div>
            <div className={styles.num}>
              {eventNum}<span>件</span>
            </div>
            <div className={styles.desc}>城市问题</div>
          </div>
        ),
      },
    ]
  }, [cqi, eventNum])

  const menu = [
    // {
    //   element: (
    //     <div>
    //       <div className={styles.cqi}>CQI</div>
    //       <div style={{ color: getColorByIndex(98.5) }}>98.5</div>
    //     </div>
    //   ),
    // },
    // {
    //   element: (
    //     <div>
    //       <div className={styles.num}>
    //         6<span>件</span>
    //       </div>
    //       <div className={styles.desc}>城市问题</div>
    //     </div>
    //   ),
    // },
    // {
    //   element: (
    //     <div>
    //       <div className={styles.num}>
    //         6<span>件</span>
    //       </div>
    //       <div className={styles.desc}>城市风险</div>
    //     </div>
    //   ),
    // },
    // {
    //   element: (
    //     <div>
    //       <div className={styles.num}>
    //         12<span>个</span>
    //       </div>
    //       <div className={styles.desc}>城市部件</div>
    //     </div>
    //   ),
    // },
    // {
    //   element: (
    //     <div>
    //       <div className={styles.num}>
    //         12<span>个</span>
    //       </div>
    //       <div className={styles.desc}>感知源</div>
    //     </div>
    //   ),
    // },
    // {
    //   element: (
    //     <div className={styles.lastText}>
    //       <div>巡查</div>
    //       <div>覆盖</div>
    //     </div>
    //   ),
    // },
  ];

  return (
    <div className={styles.container}>
      {menuList.map((item, i) => (
        <div
          key={i}
          onClick={() => menuClickHandle(i)}
          style={i === active ? { backgroundColor: '#4787C3' } : {}}
        >
          <div className={styles.menuItem_title}>{item.element}</div>
        </div>
      ))}
    </div>
  );
};

export default SidebarMenu;
