import { Link, Outlet, useLocation } from "umi";
import logo from "@/assets/shalu-new1.png";
import { Avatar, ConfigProvider, Button, Dropdown } from "antd";
import zhCN from "antd/locale/zh_CN";
import "dayjs/locale/zh-cn";
import { DownOutlined, UserOutlined } from "@ant-design/icons";
import { useModel } from "umi";
import { useEffect } from "react";
import "./index.less";

export default function Layout() {
  const location = useLocation();
  const { userInfo, handleLogout, checkUserInfo } = useModel("userModel");

  const handleLogin = () => {
    window.open(
      `/Views/Account/Index.html?ReturnUrl=${window.location.href}`,
      "_self"
    );
  };

  useEffect(() => {
    checkUserInfo();
  }, []);

  const handleToManagement = () => {
    window.open(`/Views/Home/Index.html`);
  };

  const handleToSchool = () => {
    const url =
      "https://college.shalu.com/Views/Account/SSOIndex.html?system=design&token=" +
      localStorage.getItem("token_a");
    window.open(url);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="relative">
        <div
          className="
        absolute 
        box-border
        left-0 
        top-0 
        w-full 
        header 
        h-56px 
        flex 
        items-center 
        justify-between 
        px-8
        z-10"
        >
          <img src={logo} alt="logo" className="h-48px w-170px" />

          {/* <ul className="menu flex items-center pl-0">
            <Link to="/" className="decoration-none">
              <li
                className={`nav-button ${location.pathname.includes("application") ? "nav-button-active" : ""} `}
              >
                <i className="iconfont icon-yingyong text-12px mr-4px" />
                应用市场
              </li>
            </Link>
            <Link to="/template" className="decoration-none">
              <li
                className={`nav-button ${location.pathname.includes("/template") ? "nav-button-active" : ""} `}
              >
                <i className="iconfont icon-mokuai text-12px mr-4px" />
                模版市场
              </li>
            </Link>
            <li className={`nav-button`} onClick={handleToSchool}>
              <i className="iconfont icon-shuben-book3 text-12px mr-4px" />
              沙鲁学院
            </li>
            <Link to="/ai" target="_blank" className="decoration-none">
              <li className={`nav-button`}>
                <i className="iconfont icon-AI1 text-12px mr-4px" />
                AI助手
              </li>
            </Link>
          </ul> */}

          <div className="right w-170px text-right">
            {userInfo ? (
              <Dropdown
                menu={{
                  items: [
                    {
                      key: "1",
                      label: <span>管理后台</span>,
                      onClick: handleToManagement,
                    },
                    {
                      key: "2",
                      label: <span>退出</span>,
                      onClick: handleLogout,
                    },
                  ],
                }}
                trigger={["click"]}
                placement="bottomRight"
                arrow
              >
                <span>
                  <Avatar size={32} icon={<UserOutlined />} />
                  <span className="ml-4px text-12px text-text-secondary cursor-pointer">
                    {userInfo.account}
                  </span>
                  <DownOutlined className="ml-4px text-12px text-text-secondary" />
                </span>
              </Dropdown>
            ) : (
              <Button
                className="ml-4px"
                size="small"
                onClick={handleLogin}
                shape="round"
              >
                登录
              </Button>
            )}
          </div>
        </div>

        <Outlet />
      </div>
    </ConfigProvider>
  );
}
