import Modal from '@/components/HncyModal';
import IndustrySystem from '@/pages/Common/Sign/IndustrySystem';
import services from '@/services';
import { DoubleRightOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex, Space, Spin } 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 Item1 from './components/NewChildrens/Item1';
import Item2 from './components/NewChildrens/Item2';
import Item3 from './components/NewChildrens/Item3';
import Item4 from './components/NewChildrens/Item4';
import Item5 from './components/NewChildrens/Item5';
import Item6 from './components/NewChildrens/Item6';
import Item7 from './components/NewChildrens/Item7';
import Item8 from './components/NewChildrens/Item8';
import RaiseDust from './components/RaiseDust';
import RefuseDisposal from './components/RefuseDisposal';
import RoadAndBridge from './components/RoadAndBridge';
import styles from './index.less';
export const IndustryContext = React.createContext(
  {} as {
    indutryIndexData: PhysicalsignApi.IndutryIndexInstanceDto[];
  },
);
/** @module 行业运行情况  */
const IndustryOperation: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '',
  });
  const { data: indutryIndexData, loading } = useRequest(() =>
    services.Physicalsign.getAllIndutryIndexInstance({
      physicalSignType: '1',
      objectId: areaId,
    }),
  );
  const views = useMemo(() => {
    return [
      {
        title: '数字城管',
        children: <DigitalUrbanManagement />,
        popverSystem: [
          {
            name: '成都市数字化城市管理信息系统',
            url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
          },
        ],
      },
      {
        title: '城管执法',
        children: <LawEnforcement />,
        popverSystem: [
          {
            name: '违法建设治理系统',
            url: 'https://wjzl.cdcgzfzd.cn:1234/',
          },
          // {
          //   name: '综合行政执法智慧服务平台',
          //   url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
          // },
        ],
      },
      {
        title: '市容广告',
        children: <Advertisement />,
      },
      {
        title: '道桥监管',
        children: <RoadAndBridge />,
        popverSystem: [
          {
            name: '桥梁水位监测系统',
            url: 'https://swjc.cddqgl.com:105/',
          },
          {
            name: '桥梁健康监测系统',
            url: 'https://jk.cddqgl.com/#/login',
          },
          {
            name: '成都市城市道路桥梁监控中心综合应用平台',
            url: 'https://yj.cddqgl.com:8008/DQCenter/',
          },
          {
            name: '成都市占用（挖掘）城市道路信息管理平台',
            url: 'https://gl.cdzdwj.com/',
          },
          {
            name: '成都市道路桥梁信息管理系统',
            url: 'https://www.cddqgl.com/',
          },
        ],
      },
      {
        title: '照明监管',
        children: <Illumination />,
        popverSystem: [
          {
            name: '成都市城市照明综合监管平台',
            url: 'https://service.cdzmjg.cn:8443/',
          },
          {
            name: '照明运维系统',
            url: 'https://service.cdzmjg.cn:8443/',
          },
        ],
      },
      {
        title: '扬尘治理',
        children: <RaiseDust />,
        popverSystem: [
          {
            name: '成都市工地扬尘监控及建筑垃圾运输处置信息和监管平台',
            url: 'http://221.237.182.174:8011/',
          },
        ],
      },
      {
        title: '垃圾分类',
        children: <GarbageSorting></GarbageSorting>,
      },
      {
        title: '垃圾处置',
        children: <RefuseDisposal />,
      },
    ];
  }, []);
  const viewsNew = useMemo(() => {
    return [
      {
        title: '数字城管',
        children: <Item1 />,
        popverSystem: [
          {
            name: '成都市数字化城市管理信息系统',
            url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
          },
        ],
      },
      {
        title: '城管执法',
        children: <Item2 />,
        popverSystem: [
          {
            name: '违法建设治理系统',
            url: 'https://wjzl.cdcgzfzd.cn:1234/',
          },
          // {
          //   name: '综合行政执法智慧服务平台',
          //   url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
          // },
        ],
      },
      {
        title: '市容广告',
        children: <Item3 />,
      },
      {
        title: '道桥监管',
        children: <Item4 />,
        popverSystem: [
          {
            name: '桥梁水位监测系统',
            url: 'https://swjc.cddqgl.com:105/',
          },
          {
            name: '桥梁健康监测系统',
            url: 'https://jk.cddqgl.com/#/login',
          },
          {
            name: '成都市城市道路桥梁监控中心综合应用平台',
            url: 'https://yj.cddqgl.com:8008/DQCenter/',
          },
          {
            name: '成都市占用（挖掘）城市道路信息管理平台',
            url: 'https://gl.cdzdwj.com/',
          },
          {
            name: '成都市道路桥梁信息管理系统',
            url: 'https://www.cddqgl.com/',
          },
        ],
      },
      {
        title: '照明监管',
        children: <Item5 />,
        popverSystem: [
          {
            name: '成都市城市照明综合监管平台',
            url: 'https://service.cdzmjg.cn:8443/',
          },
          {
            name: '照明运维系统',
            url: 'https://service.cdzmjg.cn:8443/',
          },
        ],
      },
      {
        title: '扬尘治理',
        children: <Item6 />,
        popverSystem: [
          {
            name: '成都市工地扬尘监控及建筑垃圾运输处置信息和监管平台',
            url: 'http://221.237.182.174:8011/',
          },
        ],
      },
      {
        title: '垃圾分类',
        children: <Item7 />,
      },
      {
        title: '垃圾处置',
        children: <Item8 />,
      },
    ];
  }, []);

  return (
    <IndustryContext.Provider
      value={{
        indutryIndexData:
          indutryIndexData?.data as PhysicalsignApi.IndutryIndexInstanceDto[],
      }}
    >
      <Spin spinning={loading}>
        <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: ' 行业系统接入清单' })
                }
              >
                目前已接入<span>10</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}
                  jumpSystem={item.popverSystem}
                >
                  {item.children}
                </Card>
              );
            })}
          </div> */}
          <div className={styles.content}>
            {viewsNew.map((item, index) => {
              return (
                <Card
                  key={item.title}
                  title={item.title}
                  jumpSystem={item.popverSystem}
                >
                  {item.children}
                </Card>
              );
            })}
          </div>
          <Modal
            open={modalOpt?.open}
            title={modalOpt?.title}
            onCancel={() => setModalOpt({ open: false, title: '' })}
            width={1104}
            height={846}
          >
            <IndustrySystem />
          </Modal>
        </div>
      </Spin>
    </IndustryContext.Provider>
  );
};

export default IndustryOperation;
