import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { Flex } from 'antd';
import React, { useMemo } from 'react';
import Advertisement from './components/Advertisement';
import Card from './components/Card';
import CityLighting from './components/CityLighting';
import EnvironmentalHealth from './components/EnvironmentalHealth';
import LawEnforcement from './components/LawEnforcement';
import MunicipalFacilities from './components/MunicipalFacilities';
import WasteDisposal from './components/WasteDisposal';
import styles from './index.less';
import HouseholdWaste from './components/HouseholdWaste';
import ConstructionWaste from './components/ConstructionWaste';

const IndustryOverview: React.FC = () => {
  const { dispatch } = useGlobalModalServices();

  const cards = useMemo(
    () => [
      {
        title: '环境卫生',
        children: <EnvironmentalHealth />,
        popverSystem: [
          {
            name: '成都市环卫固废智慧监管服务平台市级项目(一期)',
            url: 'https://cdgfhw.cloudhw.cn:58083/',
          },
        ],
      },
      {
        title: '市政设施',
        children: <MunicipalFacilities />,
        popverSystem: [
          {
            name: '城市桥梁健康监测系统',
            url: 'https://jk.cddqgl.com/#/login',
          },
          {
            name: '占用挖掘城市道路信息管理平台（一期）',
            url: 'https://gl.cdzdwj.com/',
          },
          {
            name: '成都市城市道路桥梁监控中心综合应用平台',
            url: 'https://zhyy.cddqgl.com:8082/',
          },
          {
            name: '成都市道路桥梁管理信息系统',
            url: 'https://www.cddqgl.com/enovia/toLogin',
          },
        ],
      },
      {
        title: '景观照明',
        children: <CityLighting />,
        popverSystem: [
          {
            name: '成都市城市照明综合监管平台',
            url: 'https://service.cdzmjg.cn:8443/?1736578151849#/login',
          },
        ],
      },
      {
        title: '执法管理',
        children: <LawEnforcement />,
        popverSystem: [
          {
            name: '综合行政执法智慧服务平台',
            url: 'https://zhzf.tfryb.com',
          },
          {
            name: '违法建设治理系统',
            url: 'https://wjzl.cdcgzfzd.cn:1234/',
          },
        ],
      },
      
      {
        title: '生活垃圾',
        children: <HouseholdWaste />,
        popverSystem: [
          {
            name: '成都市工地扬尘监控及建筑垃圾运输处置信息和监管平台',
            url: 'http://221.237.182.174:8011/',
          },
          // {
          //   name: '建筑垃圾处置系统',
          //   url: 'http://125.70.11.8:9000/ryl/#/login/',
          // },
        ],
      },
      {
        title: '建筑垃圾',
        children: <ConstructionWaste />,
        popverSystem: [
          {
            name: '成都市工地扬尘监控及建筑垃圾运输处置信息和监管平台',
            url: 'http://221.237.182.174:8011/',
          },
          // {
          //   name: '建筑垃圾处置系统',
          //   url: 'http://125.70.11.8:9000/ryl/#/login/',
          // },
        ],
      },
     
      {
        title: '市容秩序',
        children: <Advertisement />,
        // popverSystem: [
        //   {
        //     name: '户外广告管理系统',
        //     url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
        //   },
        // ],
      },
      
    
    ],
    [],
  );

  return (
    <div>
      {/* <div className={styles.container}> */}
      {/* <div className={styles.header}>
        <span className={styles.title}>行业运行情况</span>
        <Space
          className={styles.systemCount}
          align="center"
          onClick={() => {
            dispatch.push('IndustrySystem');
          }}
        >
          <div>行业系统</div>
          <DoubleRightOutlined className={styles.header_right_icon} />
        </Space>
      </div> */}

      <div className={styles.content}>
        <Flex gap={15} style={{marginBottom: 15}}>
          <Flex gap={15} wrap>
            {cards.slice(0, 4).map((card) => (
              <Card
                key={card.title}
                title={card.title}
                jumpSystem={card.popverSystem}
              >
                {card.children}
              </Card>
            ))}
          </Flex>
        </Flex>
        <Flex gap={15} >
          {cards.slice(4).map((card) => (
            <Card
              key={card.title}
              title={card.title}
              jumpSystem={card.popverSystem}
              style={{width:348}}
            >
              {card.children}
            </Card>
          ))}
        </Flex>
      </div>
    </div>
  );
};

export default IndustryOverview;
