import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { DoubleRightOutlined } from '@ant-design/icons';
import { Flex, Space } 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';

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

  const cards = useMemo(
    () => [
      {
        title: '环境卫生',
        children: <EnvironmentalHealth />,
        popverSystem: [
          {
            name: '成都市环卫固废智慧监管服务平台市级项目(一期)',
            url: 'https://cdgfhw.cloudhw.cn:58083/',
          },
        ],
      },
      {
        title: '固废处置',
        children: <WasteDisposal />,
        popverSystem: [
          {
            name: '工地扬尘监控监管平台',
            url: 'http://221.237.182.174:8011/',
          },
        ],
      },
      {
        title: '城市照明',
        children: <CityLighting />,
        popverSystem: [
          {
            name: '城市照明监控系统',
            url: 'https://service.cdzmjg.cn:8443/',
          },
        ],
      },
      {
        title: '市容广告',
        children: <Advertisement />,
        popverSystem: [
          {
            name: '户外广告管理系统',
            url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
          },
        ],
      },
      {
        title: '市政设施',
        children: <MunicipalFacilities />,
        popverSystem: [
          {
            name: '城市桥梁健康监测系统',
            url: 'https://jk.cddqgl.com/#/login',
          },
          {
            name: '占用挖掘城市道路信息管理平台（一期）',
            url: 'https://gl.cdzdwj.com/',
          },
          {
            name: '城市道路桥梁管理系统',
            url: 'https://www.cddqgl.com/',
          },
        ],
      },
      {
        title: '城管执法',
        children: <LawEnforcement />,
        popverSystem: [
          {
            name: '违法建设治理系统',
            url: 'https://wjzl.cdcgzfzd.cn:1234/',
          },
        ],
      },
    ],
    [],
  );

  return (
    <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={20}>
          <Flex vertical gap={20}>
            {cards.slice(0, 3).map((card) => (
              <Card
                key={card.title}
                title={card.title}
                jumpSystem={card.popverSystem}
              >
                {card.children}
              </Card>
            ))}
          </Flex>
          <Flex vertical gap={20}>
            {cards.slice(3).map((card) => (
              <Card
                key={card.title}
                title={card.title}
                jumpSystem={card.popverSystem}
              >
                {card.children}
              </Card>
            ))}
          </Flex>
        </Flex>
      </div>
    </div>
  );
};

export default IndustryOperationV4;
