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

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

  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}>
      {menu.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;
