import React from "react";
import { ConfigProvider, Layout, message, Menu, Dropdown } from "antd";
import { router } from "umi";
import zhCN from "antd/es/locale/zh_CN";
import enUS from "antd/es/locale/en_US";
import BaseHeader from "./components/BaseHeader";
import TopMenu from "./components/TopMenu";
import Footer from "./components/Footer";
// import headMenuData from "./menuData";
import yuyanImg from "../assets/icon_yuyan@3x.png";
import { getLocale } from "../utils";
import styles from "./BaseLayout.less";
import locale from "antd/lib/date-picker/locale/en_US";
// import zhCNConfig from "../locales/zh_CN";
// import enUSConfig from "../locales/en_US ";

const { Header, Content } = Layout;

const findPrefixSelectedKey = (topMenu, key = "") => {
  for (let i = 0; i < topMenu.length; i += 1) {
    const item = topMenu[i];
    if (item.key !== "/" && key.startsWith(item.key)) {
      return item.key;
    }
  }
  return key;
};

const localeConfig = getLocale();
class BaseLayout extends React.Component {
  state = {
    locale: localStorage.getItem("language") || "中文",
  };

  headMenuData = [
    {
      key: "/home",
      text: localeConfig.sy,
    },
    {
      key: "/about-us",
      text: localeConfig.footerMenu1,
    },
    {
      key: "/product-center",
      text: localeConfig.footerMenu2,
      children: [
        {
          key: `/product-center?tabCode=1`,
          text: localeConfig.cp1,
        },
        {
          key: `/product-center?tabCode=2`,
          text: localeConfig.cp2,
        },
        {
          key: `/product-center?tabCode=3`,
          text: localeConfig.cp3,
        },
        {
          key: `/product-center?tabCode=4`,
          text: localeConfig.cp4,
        },
        {
          key: `/product-center?tabCode=5`,
          text: localeConfig.cp5,
        },
      ],
    },
    {
      key: "/technical-support",
      text: localeConfig.footerMenu3,
    },
    {
      key: "/contact-us",
      text: localeConfig.footerMenu4,
    },
  ];

  handleLocaleChange = (val) => {
    if (val !== this.state.locale) {
      this.setState({ locale: val });
      localStorage.setItem("language", val);
      window.location.reload();
    }
  };

  localeMenu = (
    <Menu>
      <Menu.Item
        onClick={() => {
          this.handleLocaleChange("中文");
        }}
      >
        <span style={{ padding: "26px 50px" }}>中文</span>
      </Menu.Item>
      <Menu.Item
        onClick={() => {
          this.handleLocaleChange("English");
        }}
      >
        <span style={{ padding: "16px 50px" }}>English</span>
      </Menu.Item>
    </Menu>
  );
  handleSideMenuClick = (item) => {
    const { history } = this.props;
    if (item.key) {
      history.push(item.key);
    }
  };

  componentDidCatch(error) {
    if (process.env.NODE_ENV !== "development") {
      const { location } = this.props;
      message.error({
        content: `非常抱歉，您当前访问的页面:${location.pathname}因为意外的错误崩溃了`,
        duration: 2,
        key: "error",
      });
      router.replace("/exception/500");
      // eslint-disable-next-line no-console
      console.error(error);
    }
  }

  render() {
    const { children, location = {} } = this.props;
    const { pathname = "" } = location;
    const arr = ["/home"];
    const isInherit = arr.includes(pathname);
    const { locale } = this.state;
    // const localeConfig = locale === "中文" ? zhCNConfig : enUSConfig;
    const theme = {
      primaryColor: "#2bb2a8", // 品牌色
      // 你可以在这里添加更多的颜色配置
    };
    return (
      <ConfigProvider locale={locale === "中文" ? zhCN : enUS} theme={theme}>
        <Layout className={`${styles.root} ${isInherit ? styles.root2 : ""}`}>
          {/* 顶栏 */}
          <Header className={styles.header}>
            <BaseHeader>
              <div className={styles.headerTitle}>
                {/* <Logo /> */}
                <div>{localeConfig.headTitle}</div>
                <div>
                  <div className={styles.yuyanBox}>
                    {localeConfig.headTel}0523-86818628
                    <div>
                      <img src={yuyanImg} width="28" height="28" />
                      <Dropdown overlay={this.localeMenu}>
                        <span onClick={(e) => e.preventDefault()}>
                          {locale}
                        </span>
                      </Dropdown>
                    </div>
                  </div>
                </div>
              </div>
              <TopMenu
                selectedKeys={[
                  findPrefixSelectedKey(this.headMenuData, location.pathname),
                ]}
                data={this.headMenuData}
                onClick={this.handleSideMenuClick}
                isInherit={isInherit}
              />
            </BaseHeader>
          </Header>
          <Content>{children}</Content>
          <Footer localeConfig={localeConfig} />
        </Layout>
      </ConfigProvider>
    );
  }
}

export default BaseLayout;