import React, { useState, useEffect } from "react";
import { Row, Col, Button, Menu } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import './style/menu.less';

export const items = [
  {
    label: '首页',
    key: '/home',
  },
  {
    label: '产品',
    key: '/product',
  },
  {
    label: '解决方案',
    key: '/solution',
  },
  {
    label: '客户案例',
    key: '/case',
  },
  {
    label: '新闻资讯',
    key: '/news',
  },
  {
    label: '关于我们',
    key: '/about',
    children: [
      {
        label: '关于我们',
        key: '/about_us',
      },
      {
        label: '联系我们',
        key: '/contact_us',
      }
    ]
  }
]
export const sj_button = (props) => {
  return <Col span={4} style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'rgba(88,180,112,1)',
    fontSize: '28px',
    fontWeight: 'bolder',
    fontFamily: 'PMZDBiaoTi-regular',
    ...props,
  }}>赛久智能</Col>
}
export const ToForm = (props) => {
  const navigator = useNavigate();
  return <Button className={props.className} type="primary"  onClick={() => navigator('/contact_us_form')}>免费试用</Button>
}

const MenuHeader = () => {
  const location = useLocation();
  const navigator = useNavigate();
  const [current, setCurrent] = useState('/');
  const [show, setShow] = useState(true);
  useEffect(() => {
    setCurrent(location.pathname)
    if (location.pathname === '/contact_us_form')
      setShow(false);
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }, [location, location.pathname]);
  const ToHeader = (e) => {
    navigator(e.key);
  }
  return (
    <>
      <Row justify="space-around" style={{
        position: 'fixed',
        top: 0,
        width: 'calc(100% - 17px)',
        zIndex: 999,
        height: '55px',
        backgroundColor: 'rgba(138, 134, 132,.3)'
      }}>
        {sj_button()}
        <Col span={12}>
          <Menu onClick={ToHeader} selectedKeys={[current]} mode="horizontal" items={items}
            style={{
              fontSize: "16px",
              color: '#fff',
              background: 'transparent',
              alignItems:'center',
              height: '55px',
              borderBottom: 'none'
            }}
          />
        </Col>
        <Col span={4} style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
          {show && <ToForm />}
        </Col>
      </Row>
    </>
  );
};

export default MenuHeader;
