import { useLocation, useNavigate } from '@umijs/max';
import { useLayoutEffect, useState } from 'react';
import styles from './index.less';

/**
 * @description 基于配置式的路由，卡片位置大小由后台提供
 *
 *  */
const menu: MenuItemProps[] = [
  {
    title: '城市安全态势',
    unActiveIcon: require('@/assets/images/routeMenu/aqts.png'),
    activeIcon: require('@/assets/images/routeMenu/aqts_a.png'),
    path: '/home/urbanSecuritySituation',
    rows: [1, 3],
    renderCard: () => {
      return <div className={styles.USS_text}>城市安全态势</div>;
    },
  },
  {
    title: '城市管理运行总体情况',
    unActiveIcon: require('@/assets/images/routeMenu/glyxztqk.png'),
    activeIcon: require('@/assets/images/routeMenu/glyxztqk_a.png'),
    path: '/home/urbanManagementOperationOverallSituation',

    renderCard: () => {
      return (
        <div className={styles.DS_text}>
          城市管理运行<br></br>总体情况
        </div>
      );
    },
  },
  {
    title: '行业运行情况',
    unActiveIcon: require('@/assets/images/routeMenu/bg6.png'),
    activeIcon: require('@/assets/images/routeMenu/bg6_a.png'),
    path: '/home/industryOperation',

    renderCard: () => {
      return <div className={styles.DS_text}>行业运行情况</div>;
    },
  },
  {
    title: '城管资源要素',
    unActiveIcon: require('@/assets/images/routeMenu/bg7.png'),
    activeIcon: require('@/assets/images/routeMenu/bg7_a.png'),
    path: '/home/urbanManagementResourceElements',
    renderCard: () => {
      return <div className={styles.UMR_text}>城管资源要素</div>;
    },
  },
  {
    title: '综管平台 4+4服务体系',
    unActiveIcon: require('@/assets/images/routeMenu/4a4.png'),
    activeIcon: require('@/assets/images/routeMenu/4a4_a.png'),
    path: '/home/4+4Service',
    renderCard: () => {
      return (
        <div className={styles.FS_text}>
          <p>综管平台 4+4</p>
          <p>服务体系</p>
        </div>
      );
    },
  },
];
/** @name 右侧-侧边栏目录 */
export default function RightSidebarMenu() {
  const [active, setActive] = useState(-1);

  const location = useLocation();

  const navigation = useNavigate();

  useLayoutEffect(() => {
    const activeIndex = menu.findIndex(
      (item) => item.path === location.pathname,
    );

    if (activeIndex !== active) {
      setActive(activeIndex);
    }
  }, [location]);

  const menuClickHandle = (index: number, item: (typeof menu)[0]) => {
    setActive(index);
    navigation(item.path);
  };
  return (
    <div className={styles.container}>
      {menu.map((item, i) => (
        <div
          key={item.title}
          onClick={() => menuClickHandle(i, item)}
          style={{
            gridColumn: item.columns?.join('/'),
            gridRow: item.rows?.join('/'),
            backgroundImage: `url(${
              i === active ? item.activeIcon : item.unActiveIcon
            })`,
          }}
        >
          {item.renderCard?.()}
        </div>
      ))}
    </div>
  );
}
