import titlePng from '@/assets/images/SecurityServiceOverview/title.png';
import EmptySpace from '@/components/EmptySpace';
import {
  exitFullScreen,
  isFullscreenElement,
  requestFullScreen,
} from '@/utils/ui';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import { ConfigProvider, theme } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import autofit from 'autofit.js';

import { useEffect, useLayoutEffect, useState } from 'react';
import styles from './index.less';
import RegionSelect from './RegionSelect';
import SecurityState from './SecurityState';
/**
 * @description 安全服务一张图
 */

const SecurityServiceOverview = () => {
  const [fullScreen, setFullScreen] = useState(false);
  const [originResizeFunc, setOriginResizeFunc] = useState<any>(null);

  useLayoutEffect(() => {
    autofit.init({
      dw: 3840,
      dh: 1080,
      el: 'body',
      resize: true,
      /** 禁止地图缩放，缩放会导致全部的地图点击事件不可用 */
      ignore: ['#customMap'],
    });
  }, []);

  useEffect(() => {
    // 监听 键盘ESC 退出全屏(可以使用屏幕大小监听，触发对应的事件)
    if (window.addEventListener) {
      window.addEventListener('resize', onEscCancelFull, false);
    } else {
      setOriginResizeFunc(window.onresize);
      window.onresize = onEscCancelFull;
    }
    // 销毁清除事件
    return () => {
      if (window.removeEventListener) {
        window.removeEventListener('resize', onEscCancelFull, false);
      } else {
        window.onresize = originResizeFunc;
      }
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  function onEscCancelFull() {
    // 用于反显状态
    setFullScreen(isFullscreenElement());
  }
  const customizeRenderEmpty = () => (
    <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
  );
 
  return (
    <ConfigProvider
      locale={zhCN}
      renderEmpty={customizeRenderEmpty}
      theme={{
        algorithm: theme.darkAlgorithm,
      }}
    >
      <div className={styles.container}>
        <img src={titlePng} className={styles.title} alt=""></img>

        <div className={styles.content}>
          <div className={styles.btnWarp}>
            <RegionSelect />
            <div className={styles.rWarp}>
              <img
                src={require('@/assets/images/SecurityServiceOverview/backHome.png')}
                className={styles.backHome}
                alt=""
                onClick={() => {
                  history.push('/home/urbanSituation');
                }}
              ></img>
              {fullScreen ? (
                <FullscreenExitOutlined
                  onClick={() => {
                    exitFullScreen();
                  }}
                  style={{
                    fontSize: '24px',
                    marginLeft: '10px',
                    color: 'white',
                  }}
                />
              ) : (
                <FullscreenOutlined
                  onClick={() => {
                    requestFullScreen(document.body);
                  }}
                  style={{
                    fontSize: '24px',
                    marginLeft: '10px',
                    color: 'white',
                  }}
                />
              )}
            </div>
          </div>
          <div className={styles.warp}>
            {/* <SecuritySituation /> */}
            <SecurityState />
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default SecurityServiceOverview;
