import React, {useEffect, useState} from "react";
import less from "./HeadLayout.less";
import Flex from "../components/Flex";
import AppHelper from "@/utils/AppHelper";

const designWidth = 1280, designHeight = 720;

/**
 * 获取头部高度
 * @returns {number}
 */
export const getHeaderHeight = () => {
  return 60;
};

export default ({children, location}) => {
  const [screen, setScreen] = useState({width: designWidth, height: designHeight});
  const [scale, setScale] = useState(1);
  const [boxList, setBoxList] = useState([]);

  useEffect(() => {
    getList();
    windowScale()
  }, []);

  ///////////////////////////////////////// 逻辑方法

  const getList = () => {
    let tmpBoxList = [
      {id: "/home", name: "首页"},
      {id: "/vehicle", name: "智慧交通"},
    ]
    setBoxList(tmpBoxList);
  };

  /**
   * 屏幕比例适配
   */
  const windowScale = () => {
    let tmpWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let tmpHeight = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;

    let ratio = tmpWidth / designWidth;
    if (tmpWidth > tmpHeight) {
      setScreen({width: tmpWidth / ratio, height: tmpHeight / ratio});
    } else {
      setScreen({width: designWidth, height: designHeight});
    }
    setScale(ratio);
  };

  window.onresize = windowScale;

  ///////////////////////////////////////// 页面渲染

  return (
    <Flex className={less.body} direction={"column"}>
      <Flex
        className={less.container} direction={"column"} id={"headerContainer"}
        style={{
          width: screen.width, height: screen.height,
          transform: "scale(" + scale + ")",
        }}
      >
        <Flex className={less.header}>
          <img src={"./imgs/title.png"} className={less.logo}/>

          <Flex className={less.module} alignItems={"center"}>
            {boxList.map((it) => {
              return (
                <Flex
                  key={it.id} className={less.box}
                  justify={"center"} alignItems={"center"}
                  style={{
                    backgroundImage: it.id == location.pathname ? "url(./imgs/module_active.png)" : "url(./imgs/module_normal.png)",
                  }}
                  onClick={() => AppHelper.routerPush(it.id)}
                >
                  {it.name}
                </Flex>
              );
            })}
          </Flex>
        </Flex>

        <Flex itemGrow={1} className={less.content} direction={"column"}>{children}</Flex>

      </Flex>
    </Flex>
  );
};