import Modal from '@/components/HncyModal';
import IndustrySystem from '@/pages/Common/Sign/IndustrySystem';
import { DoubleRightOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import React, { useMemo, useState } from 'react';
import Advertisement from './components/Advertisement';
import Card from './components/Card';
import DigitalUrbanManagement from './components/DigitalUrbanManagement';
import GarbageSorting from './components/GarbageSorting';
import Illumination from './components/Illumination';
import LawEnforcement from './components/LawEnforcement';
import RaiseDust from './components/RaiseDust';
import RefuseDisposal from './components/RefuseDisposal';
import RoadAndBridge from './components/RoadAndBridge';
import styles from './index.less';

/** @module 行业运行情况  */
const IndustryOperation: React.FC = () => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '',
  });
  const views = useMemo(() => {
    return [
      {
        title: '数字城管',
        children: <DigitalUrbanManagement />,
      },
      {
        title: '城管执法',
        children: <LawEnforcement />,
      },
      {
        title: '市容广告',
        children: <Advertisement></Advertisement>,
      },
      {
        title: '道桥监管',
        children: <RoadAndBridge></RoadAndBridge>,
      },
      {
        title: '照明监管',
        children: <Illumination></Illumination>,
      },
      {
        title: '扬尘治理',
        children: <RaiseDust></RaiseDust>,
      },
      {
        title: '垃圾分类',
        children: <GarbageSorting></GarbageSorting>,
      },
      {
        title: '垃圾处置',
        children: <RefuseDisposal></RefuseDisposal>,
      },
    ];
  }, []);
  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center" className={styles.header}>
        <div>行业运行情况</div>
        <Space>
          <div
            className={styles.header_right_text}
            onClick={() =>
              setModalOpt({ open: true, title: ' 目前已接入16个行业系统' })
            }
          >
            目前已接入<span>16</span>个行业系统
          </div>
          <DoubleRightOutlined className={styles.header_right_icon} />
        </Space>
      </Flex>
      <div className={styles.content}>
        {views.map((item, index) => {
          return (
            <Card key={item.title} title={item.title}>
              {item.children}
            </Card>
          );
        })}
      </div>
      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '' })}
        width={1104}
        height={846}
      >
        <IndustrySystem />
      </Modal>
    </div>
  );
};

export default IndustryOperation;
