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

/**
 * @description 基于配置式的路由，卡片位置大小由后台提供
 *
 *  */
const menu: MenuItemProps[] = [
  {
    title: '城市实况',
    unActiveIcon: require('@/assets/images/routeMenu/urbanSituation.png'),
    activeIcon: require('@/assets/images/routeMenu/urbanSituation_a.png'),
    path: '/home/urbanSituation',
    renderCard: () => {
      return <div className={styles.US_text}>城市实况</div>;
    },
  },
  {
    title: '老百姓投诉情况',
    unActiveIcon: require('@/assets/images/routeMenu/toushu.png'),
    activeIcon: require('@/assets/images/routeMenu/toushu_a.png'),
    path: '/home/peopleComplain',
    columns: [2, 3],
    rows: [1, 3],
    renderCard: () => {
      return (
        <div className={styles.PC_text}>
          <p>老百姓</p>
          <p>投诉情况</p>
        </div>
      );
    },
  },
  {
    title: '区(市)县运行情况',
    unActiveIcon: require('@/assets/images/routeMenu/qsxyxqk.png'),
    activeIcon: require('@/assets/images/routeMenu/qsxyxqk_a.png'),
    path: '/home/theOperationOfTheDistrictCityAndCounty',
    renderCard: () => {
      return <div className={styles.QS_text}>区(市)县运行情况</div>;
    },
  },
  {
    title: '城市感知',
    unActiveIcon: require('@/assets/images/routeMenu/bg4.png'),
    activeIcon: require('@/assets/images/routeMenu/bg4_a.png'),
    path: '/home/iot-platform-screen',
    renderCard: () => {
      return <div className={styles.DS_text}>城市感知</div>;
    },
  },
  {
    title: '道路实况(建设中)',
    unActiveIcon: require('@/assets/images/routeMenu/dlsk.png'),
    activeIcon: require('@/assets/images/routeMenu/dlsk_a.png'),
    path: '/home/developmentSignsIndex',
    renderCard: () => {
      return <div className={styles.DS_text}>道路实况</div>;
    },
  },
];
/** @name 左侧-侧边栏目录 */
export default function LeftSidebarMenu() {
  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]) => {
    if (item.path === '/home/developmentSignsIndex') {
      message.warning('系统正在抓紧建设中');
      return;
    }
    // 跳转城市感知
    if (item.path === '/home/iot-platform-screen') {
      const url = 'https://10.1.174.34:13200/iot-platform-screen'
      window.open(url, '_blank');
      return
    }
    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>
  );
}
