import React from "react";
import { withRouter } from 'react-router-dom'
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Menu, Tooltip, Select, Divider, Button } from "antd";
import MenuBox from "./menu";
import "./style.less";

const { Option } = Select

function Header(props) {
  const {
    page,
    name,
    goToHome,
    userInfo,
    outLogin,
    platformName,
    changePage,
    helpPageUrl = '',
    menuData,
    appList,
    onAppIdChange,
    appValue,
    onCheckAll
  } = props;

  return (
    <div className="com-headerBox flex-center-between">
      <div className="logo-box flex-center-start">
        <img
          className="img-logo"
          src="//pt-starimg.didistatic.com/static/starimg/node/AYdog3q0TQ1612337938928.png"
          onClick={() => goToHome()}
        />
        <span className="menu">质惠·{name}</span>
        {appList &&
        <Select
          value={appValue || ''}
          className="headerSelectApp"
          dropdownRender={menu => (
            <div>
              {menu}
              <Divider style={{ margin: '4px 0' }} />
              <div
                style={{ padding: '4px 8px', cursor: 'pointer', textAlign: 'center' }}
                onMouseDown={e => e.preventDefault()}
                onClick={() => onCheckAll()}
              >
                全部应用
              </div>
            </div>
          )}
          onSelect={(e) => onAppIdChange(e)}
          // onChange={(e) => onAppIdChange(e)}
        >
          {
            appList?.map(t => <Option key={t.appId} value={`${t.appId}`} style={{ textAlign: 'center' }}>{t.appName}</Option>)
          }
        </Select>}
      </div>
      <div className="utils-box flex-center-end">
        <div className="item" id="DropdownPrent">
          <Dropdown
            // className={"DropdownPrent"}
            overlayClassName={"DropdownPrent"}
            // getPopupContainer={() => document.getElementById("DropdownPrent")}
            overlayStyle={{ right: 0, top: 0 }}
            placement="bottomLeft"
            overlay={
              <MenuBox
                key="menuBox"
                page={page}
                name={"menuBox"}
                menuData={menuData}
                changePage={(t) => changePage(t)}
                platformName={platformName}
              />
            }
          >
            <i className="iconfont icon">&#x11911;</i>
          </Dropdown>
        </div>
        {helpPageUrl && (
          <div className="item">
            <Tooltip title="用户指导手册">
              <a href={helpPageUrl} target="_blank">
                <i className="iconfont icon">&#x38382;</i>
              </a>
            </Tooltip>
          </div>
        )}
        <img className="img-avart item" src={userInfo?.phoneUrl || ""} />
        <Dropdown
          overlay={
            <Menu>
              <Menu.Item>
                <span onClick={() => outLogin()}>退出</span>
              </Menu.Item>
            </Menu>
          }
        >
          <span style={{ color: "#fff", cursor: "pointer" }}>
            {userInfo?.name} <DownOutlined />
          </span>
        </Dropdown>
      </div>
    </div>
  );
}

export default withRouter(Header)
