import { Link, Outlet } from "umi";
import { Tooltip } from "antd";
import React, { useRef,useState } from "react";
import { useWebSocket, useFullscreen, useThrottle, useInterval } from "ahooks";
import {
  ShrinkOutlined,
  ArrowsAltOutlined,
  FieldTimeOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import styles from "./index.less";

export default function Layout() {
  const ref = useRef();
  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] =
    useFullscreen(ref);
  const [time, settime] = useState(dayjs().format("YYYY-MM-DD HH:mm:ss"));

  return (
    <div className={styles.navs} ref={ref}>
      <div
        className="img"
        style={{ backgroundImage: `url(${require("@/assets/head.jpg")})` }}
      >
        <span className="bgtext">
          智能车间看板{" "}
          <Tooltip
            placement="bottom"
            title={isFullscreen ? "退出全屏" : "全屏"}
          >
            {isFullscreen ? (
              <ShrinkOutlined
                style={{
                  color: "#77cde2",
                  fontSize: 20,
                  cursor: "pointer",
                  paddingLeft: 12,
                }}
                onClick={() => {
                  exitFullscreen();
                }}
              />
            ) : (
              <ArrowsAltOutlined
                style={{
                  color: "#77cde2",
                  fontSize: 20,
                  cursor: "pointer",
                  paddingLeft: 12,
                }}
                onClick={() => {
                  enterFullscreen();
                }}
              />
            )}
          </Tooltip>
        </span>
      </div>
      <div style={{ flex: 1, overflow: "hidden" }}>
        <Outlet />
      </div>
    </div>
  );
}