import services from '@/services';
import { DoubleRightOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Flex, Space, Spin } from 'antd';
import React, { useMemo } from 'react';
import { IndustryContext } from '../IndustryOperation';
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';
import { useModel } from '@umijs/max';

/** @module 行业运行情况  */
const TheOperationOfCityOverall: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { data: indutryIndexData, loading } = useRequest(() =>
    services.Physicalsign.getCityRunIndutryIndexInstance({
      physicalSignType: '1',
      objectId: areaId,
    }),
  );
  const views = useMemo(() => {
    return [
      {
        title: '市容秩序',
        children: <RaiseDust indexId="205" />,
      },
      {
        title: '垃圾处置',
        children: <GarbageDisposal />,
      },
      {
        title: '城市照明',
        children: <RaiseDust indexId="203" />,
        popverSystem: [
          {
            name: '成都市城市照明综合监管平台',
            url: 'https://service.cdzmjg.cn:8443/',
          },
          {
            name: '照明运维系统',
            url: 'https://service.cdzmjg.cn:8443/',
          },
        ],
      },
      {
        title: '道路桥梁',
        children: <RaiseDust indexId="202" />,
      },
    ];
  }, []);
  return (
    <IndustryContext.Provider
      value={{
        indutryIndexData:
          indutryIndexData?.data as PhysicalsignApi.IndutryIndexInstanceDto[],
      }}
    >
      <div className={styles.container}>
        <Flex justify="space-between" align="center" className={styles.header}>
          <div>城市运行总体情况</div>
          <Space>
            <span className={styles.updateTime}>
              {indutryIndexData?.data?.[0]?.time} 更新
            </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}
                  jumpSystem={item.popverSystem}
                >
                  <Spin spinning={loading}> {item.children}</Spin>
                </Card>
              );
            })}
          </div>
        </Flex>
      </div>
    </IndustryContext.Provider>
  );
};

export default TheOperationOfCityOverall;
