import { DoubleRightOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import React, { useMemo } from 'react';
import Card from '../IndustryOperation/components/Card';
import GarbageDisposal from './components/GarbageDisposal';
import RaiseDust from './components/RaiseDust';
import Situation from './components/Situation';
import styles from './index.less';

/** @module 行业运行情况  */
const TheOperationOfCityOverall: React.FC = () => {
  const views = useMemo(() => {
    return [
      {
        title: '市容秩序',
        children: <RaiseDust />,
      },
      {
        title: '垃圾处置',
        children: <GarbageDisposal />,
      },
      {
        title: '城市照明',
        children: <RaiseDust />,
      },
      {
        title: '道路桥梁',
        children: <RaiseDust />,
      },
    ];
  }, []);
  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center" className={styles.header}>
        <Flex align="center" gap={30}>
          城市运行总体情况
          <span className={styles.time}>2024-10-28</span>
        </Flex>
        <Space>
          <span className={styles.updateTime}>2024-10-29 00:20 更新</span>
          <div className={styles.headerText}>城市管理运行日报</div>
          <DoubleRightOutlined className={styles.headerIcon} />
        </Space>
      </Flex>
      <Flex className={styles.contentWrap} gap={20}>
        <Situation />
        <div className={styles.content}>
          {views.map((item, index) => {
            return (
              <Card key={item.title} title={item.title}>
                {item.children}
              </Card>
            );
          })}
        </div>
      </Flex>
    </div>
  );
};

export default TheOperationOfCityOverall;
