import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
import { useFullscreen } from "ahooks";
import { Button } from "antd";
import { useRef } from "react";

function Board() {
  const ref = useRef(null);
  const [isFullscreen, { toggleFullscreen, enterFullscreen, exitFullscreen }] =
    useFullscreen(ref);

  return (
    <div style={{ width: "100%", height: "100%", padding: "0 12px 12px 12px" }}>
      <div
        style={{
          width: "100%",
          height: "100%",
          borderRadius: 12,
          overflow: "hidden",
        }}
        ref={ref}
      >
        <Button
          type="link"
          size="large"
          icon={
            isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
          }
          style={{ position:"absolute",right:36,top:24 }}
          onClick={() => {
            toggleFullscreen();
          }}
        ></Button>
        <iframe
          src={`http://jmcl.nangaoyun.com/sy/#/dashboardC-cn?token=${localStorage.getItem("TOKENES")}`}
          frameborder="0"
          style={{ width: "100%", height: "100%", margin: 0 }}
        ></iframe>
      </div>
    </div>
  );
}

export default Board;
