import React from "react";
import styles from "./index.less";
import PanelBlock from "./components/PanelBlock";
import HeaderContent from "./components/HeadContent";
import WordCloud from "@/components/WordCloud";

class BigScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFullScreen: false,
      startTime: performance.now(),
    };
    this.resizeHandler = null;
    this.timer = null;
    this.htmlOverflow = null;
    this.bodyOverflow = null;
  }

  componentDidMount() {
    this.setScale();
    window.addEventListener("resize", this.debounceSetScale);

    this.showRenderTime();
    this.htmlOverflow = document.documentElement.style.overflow;
    this.bodyOverflow = document.body.style.overflow;

    document.documentElement.style.overflow = "hidden";
    document.body.style.overflow = "hidden";

    // 全屏事件监听
    [
      "fullscreenchange",
      "webkitfullscreenchange",
      "mozfullscreenchange",
      "MSFullscreenChange",
    ].forEach((event) =>
      document.addEventListener(event, this.onFullScreenChange)
    );
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.debounceSetScale);

    document.documentElement.style.overflow = this.htmlOverflow || "";
    document.body.style.overflow = this.bodyOverflow || "";

    [
      "fullscreenchange",
      "webkitfullscreenchange",
      "mozfullscreenchange",
      "MSFullscreenChange",
    ].forEach((event) =>
      document.removeEventListener(event, this.onFullScreenChange)
    );
  }

  // 全屏切换
  toggleFullScreen = () => {
    const elem = document.querySelector(`.${styles.screenWrapper}`);
    if (!this.state.isFullScreen) {
      if (elem.requestFullscreen) elem.requestFullscreen();
      else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
      else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
      else if (elem.msRequestFullscreen) elem.msRequestFullscreen();
    } else {
      if (document.exitFullscreen) document.exitFullscreen();
      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
      else if (document.msExitFullscreen) document.msExitFullscreen();
    }
  };

  onFullScreenChange = () => {
    this.setState({
      isFullScreen: !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      ),
    });
  };

  debounceSetScale = () => {
    clearTimeout(this.resizeHandler);
    this.resizeHandler = setTimeout(() => {
      this.setScale();
    }, 200);
  };

  setScale = () => {
    const baseWidth = 3840;
    const baseHeight = 2160;
    const wrapper = document.querySelector(`.${styles.screenWrapper}`);
    const ww = wrapper ? wrapper.clientWidth : window.innerWidth;
    const wh = wrapper ? wrapper.clientHeight : window.innerHeight;
    const scale = Math.min(ww / baseWidth, wh / baseHeight);

    const screenContainer = document.querySelector(
      `.${styles.screenContainer}`
    );
    if (screenContainer) {
      screenContainer.style.transform = `scale(${scale}) translate(-50%, -50%)`;
      screenContainer.style.transformOrigin = "0 0";
      screenContainer.style.left = "50%";
      screenContainer.style.top = "50%";
      screenContainer.style.margin = "0";
    }
  };

  showRenderTime = () => {
    const timeUsed = (performance.now() - this.state.startTime).toFixed(2);
    console.log(`页面渲染完成耗时：${timeUsed} ms`);
  };

  render() {
    const { isFullScreen } = this.state;

    return (
      <div className={styles.screenWrapper}>
        <button
          className={styles.fullscreenBtn}
          onClick={this.toggleFullScreen}
        >
          {isFullScreen ? "退出全屏" : "全屏"}
        </button>
        <div className={styles.screenContainer}>
          {/* 顶部 */}
          <div className={styles.headPanel}>
            <HeaderContent />
          </div>
          <div className={styles.contentPanel}>
            {/* 左侧 */}
            <div className={styles.contentPanelLeft}>
              {/* <PanelBlock height="200px" /> */}
              <PanelBlock />
              <PanelBlock />
              <PanelBlock height="400px" />
            </div>

            {/* 中间 */}
            <div className={styles.contentPanelCenter}>
              <PanelBlock height="350px" />
              <PanelBlock />
              <PanelBlock height="500px" flexDirection="row">
                <PanelBlock />
                <PanelBlock />
              </PanelBlock>
            </div>

            {/* 右侧 */}
            <div className={styles.contentPanelRight}>
              <PanelBlock title='sdsdsd'>
                <WordCloud />
              </PanelBlock>
              <PanelBlock />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default BigScreen;
