import titlePng from '@/assets/images/SecurityServiceOverview/title.png';
import {
  exitFullScreen,
  isFullscreenElement,
  requestFullScreen,
} from '@/utils/ui';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import { useEffect, 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);

  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());
  }

  return (
    <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' }}
              />
            ) : (
              <FullscreenOutlined
                onClick={() => {
                  requestFullScreen(document.body);
                }}
                style={{ fontSize: '24px', marginLeft: '10px' }}
              />
            )}
          </div>
        </div>
        <div className={styles.warp}>
          {/* <SecuritySituation /> */}
          <SecurityState />
        </div>
      </div>
    </div>
  );
};

export default SecurityServiceOverview;
