import Modal from '@/components/HncyModal';
import IndustrySystem from '@/pages/Common/Sign/IndustrySystem';
import { DoubleRightOutlined } from '@ant-design/icons';
import { Space } from 'antd';
import React, { useState } 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 IndustryOperationNew: React.FC = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const cards = [
    {
      title: '环境卫生',
      children: <EnvironmentalHealth />,
      popverSystem: [
        {
          name: '成都市环卫固废智慧监管服务平台市级项目(一期)',
          url: 'https://cdgfhw.cloudhw.cn:58083/',
        },
      ],
    },
    {
      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: <WasteDisposal />,
      // popverSystem: [
      //   {
      //     name: '垃圾处理监管系统',
      //     url: 'http://xxx',
      //   },
      // ],
    },
    {
      title: '城市照明',
      children: <CityLighting />,
      popverSystem: [
        {
          name: '城市照明监控系统',
          url: 'https://service.cdzmjg.cn:8443/',
        },
      ],
    },
    {
      title: '城管执法',
      children: <LawEnforcement />,
      popverSystem: [
        {
          name: '违法建设治理系统',
          url: 'https://wjzl.cdcgzfzd.cn:1234/',
        },
      ],
    },
  ];
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '',
  });

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>行业运行情况</span>
        <Space
          className={styles.systemCount}
          align="center"
          onClick={() => setModalOpt({ open: true, title: '行业系统接入清单' })}
        >
          <div>
            目前已接入<span>10</span>个行业系统
          </div>
          <DoubleRightOutlined className={styles.header_right_icon} />
        </Space>
      </div>
      <div className={styles.content}>
        {cards.map((card) => (
          <Card
            key={card.title}
            title={card.title}
            jumpSystem={card.popverSystem}
          >
            {card.children}
          </Card>
        ))}
      </div>
      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '' })}
        width={1104}
        height={846}
      >
        <IndustrySystem />
      </Modal>
    </div>
  );
};

export default IndustryOperationNew;
