import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { Popover } from '../Popover/index.js';
import Down from '@iam-com/icons/Down';
import * as iconList from '@iam-com/icons';
import More from '@iam-com/icons/More';
import { UUID, DeepClone } from '@iam-com/lib';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { Button } from '../Button/index.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '../_verture/usePopupContainer-87febeb9.js';
import '../_verture/typeof-498dd2b1.js';
import '@iam-com/icons/LoadingF';
import '@iam-com/icons/Forbid';
import '../_verture/index-fac03ce3.js';
import 'rc-dropdown';
import 'dayjs';
import '../_verture/useFormatMessage-703f8b20.js';
import '@para-ui/core/GlobalContext';

/**
 * @description 处理菜单标签
 * 默认div,最后一级为a标签
 * */
var handMenuEle = function handMenuEle(children) {
  var Ele = 'div';
  var lastOne = !children || children.length === 0;
  if (lastOne) {
    Ele = 'a';
  }
  return Ele;
};
/**
 * 处理菜单href地址
 * */
var handHref = function handHref() {
  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var path = arguments.length > 1 ? arguments[1] : undefined;
  var href = arguments.length > 2 ? arguments[2] : undefined;
  var lastOne = !children || children.length === 0;
  if (lastOne) {
    return {
      href: href ? href : '#' + path
    };
  }
  return {};
};
// 弹出菜单
var MenuItemPopper = function MenuItemPopper(props) {
  var idMenuLast = props.idMenuLast,
    _props$selectMenu = props.selectMenu,
    selectMenu = _props$selectMenu === void 0 ? '' : _props$selectMenu,
    onClickMenu = props.onClickMenu,
    _props$list = props.list,
    list = _props$list === void 0 ? [] : _props$list,
    onMouseEnter = props.onMouseEnter,
    onMouseLeave = props.onMouseLeave,
    _props$level = props.level,
    level = _props$level === void 0 ? 1 : _props$level,
    className = props.className;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    openChild = _useState2[0],
    setOpenChild = _useState2[1];
  var _useState3 = useState(null),
    _useState4 = _slicedToArray(_useState3, 2),
    childPos = _useState4[0],
    setChildPos = _useState4[1];
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    childList = _useState6[0],
    setChildList = _useState6[1];
  var _useState7 = useState({}),
    _useState8 = _slicedToArray(_useState7, 1),
    timerJson = _useState8[0];
  useEffect(function () {
    return function () {
      clearTimeout(timerJson.leaveTimer);
    };
  }, []);
  /**
   * 移入
   * @param item {MenuChildrenProps} 移入当前项参数
   * @param index {number} 移入当前项下标
   * @param e 当前元素
   */
  var mouseEnterItem = function mouseEnterItem(item, index) {
    return function (e) {
      // 防止火狐浏览器一直重绘,死循环,不触发点击事件了
      /*if (timerJson.lastItem && timerJson.lastItem.path === item.path) {
          return;
      }
      timerJson.lastItem = item;*/
      (function (event) {
        clearTimeout(timerJson.leaveTimer);
        timerJson.leaveTimer = setTimeout(function () {
          var childListHand = [item];
          if (item.children && item.children.length > 0) {
            childListHand = item.children;
          }
          var target = event.target;
          setChildPos(target);
          setChildList(childListHand);
          setOpenChild(index);
        }, 50);
      })(e);
    };
  };
  /**
   * 移出
   * @param item {MenuChildrenProps} 移出当前项参数
   * @param index {number} 移入当前项下标
   * @param e 当前元素
   */
  var MouseLeaveItem = function MouseLeaveItem(item, index) {
    return function (e) {
      clearTimeout(timerJson.leaveTimer);
      timerJson.leaveTimer = setTimeout(function () {
        setOpenChild(null);
        setChildPos(null);
        setChildList([]);
      });
    };
  };
  /**
   * 点击菜单
   * @param item {MenuChildrenProps} 当前项参数
   * @param e 当前元素
   */
  var clickMenu = function clickMenu(item) {
    return function (e) {
      e.preventDefault();
      if (item.children && item.children.length > 0) return;
      onClickMenu && onClickMenu(item);
      onMouseLeave && onMouseLeave();
    };
  };
  /**
   * 处理icon
   * @param item {MenuChildrenProps} 当前项参数
   * @return {ReactNode} 返回图标元素
   */
  var handIcon = function handIcon(item) {
    var icon = item.icon;
    if (icon) {
      var iconCom = iconList[icon];
      if (iconCom) return iconCom();
      return icon;
    }
  };
  /**
   * 处理箭头
   * @param item {MenuChildrenProps} 当前项参数
   * @return {ReactNode} 返回图标元素
   */
  var handArrow = function handArrow(item) {
    var children = item.children;
    if (children && children.length > 0) return jsx(Down, {});
  };
  /**
   * 处理子菜单项class
   * @param item {MenuChildrenProps} 当前项参数
   * @return {string} 返回图标元素
   */
  var handItemClass = function handItemClass(item) {
    var str = 'menu-item-popper-content-item';
    var selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
    if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) {
      str += ' menu-item-popper-content-item-select';
    }
    return str;
  };
  /**
   * 处理MenuPopover样式类名
   * @return {string} class名
   */
  var handPopoverClass = function handPopoverClass() {
    var str = 'menu-item-popper';
    if (level !== 1) str += ' menu-item-popper-child';
    if (className) str += ' ' + className;
    return str;
  };
  /**
   * 子菜单
   * @param item {MenuChildrenProps} 当前项参数
   * @param index {number} 下标
   * @return {ReactNode} 节点内容
   */
  var ChildMenu = useCallback(function (item, index) {
    return jsx(Fragment, {
      children: item.children && item.children.length > 0 && openChild === index && jsx(MenuItemPopper, {
        open: openChild === index,
        anchorEl: childPos,
        list: childList,
        idMenuLast: idMenuLast,
        selectMenu: selectMenu,
        onClickMenu: onClickMenu,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
        level: level + 1
      })
    });
  }, [openChild, childPos, childList, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]);
  /** 内容 */
  var ContentMemo = useMemo(function () {
    return jsx("div", Object.assign({
      className: "menu-item-popper-content"
    }, {
      children: list.map(function (item, index) {
        var icon = handIcon(item);
        var arrow = handArrow(item);
        var Ele = handMenuEle(item.children);
        return jsx("div", Object.assign({
          className: handItemClass(item),
          onMouseLeave: MouseLeaveItem(),
          onMouseEnter: mouseEnterItem(item, index)
        }, {
          children: jsxs(Ele, Object.assign({
            className: "menu-item-popper-content-item-content",
            onClick: clickMenu(item)
          }, handHref(item.children, item.path, item.href), {
            children: [icon && jsx("span", Object.assign({
              className: "menu-item-icon"
            }, {
              children: icon
            })), jsx("span", Object.assign({
              className: "menu-item-label"
            }, {
              children: item.label
            })), arrow && jsx("span", Object.assign({
              className: "menu-item-arrow"
            }, {
              children: arrow
            })), ChildMenu(item, index)]
          }))
        }), index);
      })
    }));
  }, [list, onClickMenu, openChild, childPos, childList, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]);
  return jsx("div", Object.assign({
    className: handPopoverClass()
  }, {
    children: ContentMemo
  }));
};
var HorizontalMenu = function HorizontalMenu(props) {
  var list = props.list,
    _props$selectMenu2 = props.selectMenu,
    selectMenu = _props$selectMenu2 === void 0 ? '' : _props$selectMenu2,
    onClickMenu = props.onClickMenu,
    className = props.className,
    moreCustomize = props.moreCustomize;
  var _useState9 = useState(false),
    _useState10 = _slicedToArray(_useState9, 2),
    openChild = _useState10[0],
    setOpenChild = _useState10[1]; // 侧边展开子菜单
  var _useState11 = useState(null),
    _useState12 = _slicedToArray(_useState11, 2),
    openChildIndex = _useState12[0],
    setOpenChildIndex = _useState12[1]; // 侧边菜单第几项
  var _useState13 = useState(null),
    _useState14 = _slicedToArray(_useState13, 2),
    childPos = _useState14[0],
    setChildPos = _useState14[1]; // 侧边子菜单定位
  var _useState15 = useState([]),
    _useState16 = _slicedToArray(_useState15, 2),
    childList = _useState16[0],
    setChildList = _useState16[1]; // 侧边子菜单数据
  var _useState17 = useState(""),
    _useState18 = _slicedToArray(_useState17, 2),
    selectMenuCom = _useState18[0],
    setSelectMenuCom = _useState18[1]; // 当前选中菜单id
  var _useState19 = useState({}),
    _useState20 = _slicedToArray(_useState19, 2),
    idMenuLast = _useState20[0],
    setIdMenuLast = _useState20[1]; // 最后一级菜单所有层级id
  var _useState21 = useState({}),
    _useState22 = _slicedToArray(_useState21, 2),
    menuLevelMapping = _useState22[0],
    setMenuLevelMapping = _useState22[1]; // 菜单层级mapping
  var _useState23 = useState('horizontal-menu-list-' + UUID()),
    _useState24 = _slicedToArray(_useState23, 1),
    classOne = _useState24[0]; // 唯一class
  var _useState25 = useState(null),
    _useState26 = _slicedToArray(_useState25, 2),
    morePos = _useState26[0],
    setMorePos = _useState26[1]; // 超出在原始位置
  var _useState27 = useState({}),
    _useState28 = _slicedToArray(_useState27, 1),
    timerJson = _useState28[0];
  useEffect(function () {
    if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
  }, [selectMenu]);
  useEffect(function () {
    handList(list || []);
    changeSize();
    window.addEventListener("resize", changeSize);
    return function () {
      window.removeEventListener("resize", changeSize);
      clearTimeout(timerJson.timerResize);
    };
  }, [list]);
  /** 改变屏幕大小 */
  var changeSize = function changeSize() {
    clearTimeout(timerJson.timerResize);
    handleCloseMore();
    timerJson.timerResize = setTimeout(function () {
      setMorePos((list || []).length);
      handMultiline();
    }, 100);
  };
  /**
   * 不换行 计算
   * @param index 下标
   */
  var handMultiline = function handMultiline(index) {
    if (index === null || index === 0) return;
    if (index === undefined) index = (list || []).length;
    var boxDom = document.querySelector('.' + classOne);
    if (!boxDom) return;
    if (boxDom.scrollHeight > boxDom.clientHeight) {
      var num = Number(index) - 1;
      // 超出
      setMorePos(num);
      handMultiline(num);
    } else {
      // 一行
      if ((list || []).length <= index) handleCloseMore();
    }
  };
  // 关闭显示更多
  var handleCloseMore = function handleCloseMore() {
    //setOpenMoreCom(false);
  };
  /**
   * 处理菜单数据
   * @param dataArr {MenuChildrenProps} 当前菜单数据
   */
  var handList = function handList(dataArr) {
    var idMap = {}; // 所有id,层级map
    var idMapLast = {}; // 最后一层菜单,层级map
    var selectMenuLevelMapping = {}; // 菜单层级mapping
    var recurrenceFunc = function recurrenceFunc(daraChildArr, parent, level) {
      for (var i = 0, l = daraChildArr.length; i < l; i++) {
        var item = daraChildArr[i];
        var path = item.path;
        var levelCom = level === undefined ? i : level;
        if (parent) {
          var idList = DeepClone(idMap[parent.path] || []);
          idList.push(path);
          idMap[path] = _toConsumableArray(idList);
        } else {
          // 不存在parent,第一级
          idMap[path] = [path];
        }
        if (item.children && item.children.length > 0) {
          recurrenceFunc(item.children, item, levelCom);
        } else {
          // 不存在children,为点击菜单选项
          idMapLast[path] = idMap[path];
          selectMenuLevelMapping[path] = levelCom;
        }
      }
    };
    recurrenceFunc(dataArr);
    //setJsonMenu(json);
    setMenuLevelMapping(selectMenuLevelMapping);
    setIdMenuLast(idMapLast);
    //console.log(idMapLast, selectMenuLevelMapping)
  };
  /**
   * 鼠标移入
   * @param item {MenuChildrenProps} 移入当前项参数
   * @param index {number} 移入当前项下标
   * @param e 当前元素
   */
  var mouseOverFunc = function mouseOverFunc(item, index) {
    return function (e) {
      var childListHand = [];
      if (item.children && item.children.length > 0) {
        childListHand = item.children;
      }
      if (childListHand.length === 0) return leaveFunc();
      setOpenChildIndex(index);
      setChildPos(e.target);
      setChildList(childListHand);
      setOpenChild(true);
    };
  };
  /** 移出事件 */
  var leaveFunc = function leaveFunc() {
    setOpenChild(false);
    setChildPos(null);
    setChildList([]);
    setOpenChildIndex(null);
  };
  /** 移出子菜单 */
  var onMouseLeaveChild = function onMouseLeaveChild() {
    leaveFunc();
  };
  /**
   * 点击菜单
   * @param item {MenuChildrenProps | false} 当前项参数
   */
  var clickMenu = function clickMenu(item) {
    onClickMenu && onClickMenu(item);
  };
  /**
   * 处理classItem
   * @param item {MenuChildrenProps} 当前项参数
   * @param index {number} 下标
   */
  var handClassItem = function handClassItem(item, index) {
    var str = 'horizontal-menu-list-item';
    var selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
    if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) str += ' horizontal-menu-list-item-select';
    if (openChildIndex === index) str += ' horizontal-menu-list-item-hover';
    return str;
  };
  /**
   * 处理icon
   * @param item {MenuChildrenProps} 当前项参数
   */
  var handIcon = function handIcon(item) {
    var icon = item.icon;
    if (icon) {
      var iconCom = iconList[icon];
      if (iconCom) return iconCom();
      return icon;
    }
  };
  /**
   * 处理箭头
   * @param item {MenuChildrenProps} 当前项参数
   */
  var handArrow = function handArrow(item) {
    var children = item.children;
    if (children && children.length > 0) return jsx(Down, {});
  };
  /** 收缩弹出框菜单 */
  var MenuItemPopperMemo = useMemo(function () {
    return jsx(Fragment, {
      children: openChild && jsx(MenuItemPopper, {
        open: openChild,
        anchorEl: childPos,
        list: childList,
        idMenuLast: idMenuLast,
        selectMenu: selectMenuCom,
        onClickMenu: clickMenu,
        onMouseLeave: onMouseLeaveChild,
        level: 1
      })
    });
  }, [openChild, childPos, childList, idMenuLast, selectMenuCom, onClickMenu, timerJson]);
  /**
   * 处理class
   * @return class名
   */
  var handClass = function handClass() {
    var str = 'horizontal-menu-list';
    if (className) str += ' ' + className;
    if (classOne) str += ' ' + classOne;
    return str;
  };
  /**
   * 移入更多
   * @param e 元素
   */
  var mouseOverFuncMore = function mouseOverFuncMore(e) {
    clearTimeout(timerJson.leaveTimer);
    var childListHand = [];
    for (var i = Number(morePos), l = (list || []).length; i < l; i++) {
      childListHand.push((list || [])[i]);
    }
    setOpenChildIndex(morePos);
    setChildPos(e.target);
    setChildList(childListHand);
    setOpenChild(true);
  };
  /**
   * 处理class
   * @return class名
   */
  var handClassItemMore = function handClassItemMore() {
    var str = ' horizontal-menu-list-item';
    var selectMenuLevel = menuLevelMapping[selectMenuCom];
    if (morePos !== null && morePos <= selectMenuLevel) str += ' horizontal-menu-list-item-select';
    if (openChildIndex === morePos) str += ' horizontal-menu-list-item-hover';
    return str;
  };
  var onVisibleChange = function onVisibleChange(bol) {
    if (bol) return;
    leaveFunc();
  };
  return jsxs("div", Object.assign({
    className: handClass()
  }, {
    children: [(list || []).map(function (item, index) {
      if (morePos !== null && morePos <= index) return null;
      var icon = handIcon(item);
      var arrow = handArrow(item);
      var Ele = handMenuEle(item.children);
      return jsx(Popover, Object.assign({
        visible: openChildIndex === index,
        trigger: 'hover',
        placement: "bottom-start",
        content: MenuItemPopperMemo,
        overlayClassName: $prefixCls + '-horizontal-menu-popper',
        onVisibleChange: onVisibleChange
      }, {
        children: jsxs(Ele, Object.assign({
          onClick: function onClick(e) {
            e.preventDefault();
            if (!item.children || item.children.length === 0) {
              clickMenu(item);
            }
          },
          onMouseEnter: mouseOverFunc(item, index),
          className: handClassItem(item, index)
        }, handHref(item.children, item.path, item.href), {
          children: [icon && jsx("span", Object.assign({
            className: "menu-item-icon"
          }, {
            children: icon
          })), jsx("span", Object.assign({
            className: "menu-item-label"
          }, {
            children: item.label
          })), arrow && jsx("span", Object.assign({
            className: "menu-item-arrow"
          }, {
            children: arrow
          }))]
        }))
      }), index);
    }), function () {
      if (morePos !== null && (list || []).length > morePos) {
        return jsx(Popover, Object.assign({
          visible: openChildIndex === morePos,
          trigger: 'hover',
          placement: "bottom-start",
          content: MenuItemPopperMemo,
          overlayClassName: $prefixCls + '-horizontal-menu-popper',
          onVisibleChange: onVisibleChange
        }, {
          children: jsx("div", Object.assign({
            onMouseEnter: mouseOverFuncMore,
            className: handClassItemMore()
          }, {
            children: moreCustomize ? moreCustomize : jsx("span", Object.assign({
              className: "menu-item-icon"
            }, {
              children: jsx(More, {})
            }))
          }))
        }));
      }
    }()]
  }));
};

/* 返回自助服务 */
var BackSelfcare = function BackSelfcare(props) {
  var icon = props.icon,
    label = props.label,
    render = props.render,
    onClick = props.onClick,
    className = props.className;
  /**
   * 点击按钮
   * @param e 元素
   */
  var onClickCom = function onClickCom(e) {
    onClick && onClick(e);
  };
  /**
   * 处理内容
   * @return {ReactNode}
   */
  var handContent = function handContent() {
    return jsx(Button, Object.assign({
      startIcon: icon,
      variant: "contained",
      onClick: onClickCom
    }, {
      children: label
    }));
  };
  /**
   * 处理class
   * @return {string} class名
   */
  var handClass = function handClass() {
    var str = 'back-btn';
    if (className) str += ' ' + className;
    return str;
  };
  return jsx(Fragment, {
    children: render ? render : jsx("div", Object.assign({
      className: handClass()
    }, {
      children: handContent()
    }))
  });
};
/* 国际化 */
var Language = function Language(props) {
  var _props$language = props.language,
    language = _props$language === void 0 ? [] : _props$language,
    _props$selectLang = props.selectLang,
    selectLang = _props$selectLang === void 0 ? '' : _props$selectLang,
    onClick = props.onClick,
    className = props.className,
    render = props.render;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    langJson = _useState2[0],
    setLangJson = _useState2[1]; // 国际化
  var _useState3 = useState({}),
    _useState4 = _slicedToArray(_useState3, 2),
    selectItem = _useState4[0],
    setSelectItem = _useState4[1]; // 选中对象
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    showDialog = _useState6[0],
    setShowDialog = _useState6[1]; // 显示弹出菜单
  useEffect(function () {
    var item = langJson[selectLang] || {};
    setSelectItem(item);
  }, [selectLang, langJson]);
  useEffect(function () {
    var json = {};
    for (var i = 0, l = language.length; i < l; i++) {
      var item = language[i];
      if (item.value) json[item.value] = item;
    }
    setLangJson(json);
  }, [language]);
  /**
   * 点击语言下拉
   * @param item {LanguageItemProps} 当前项参数
   */
  var clickLangItem = function clickLangItem(item) {
    return function () {
      onClick && onClick(item.value, item);
      setShowDialog(false);
    };
  };
  /**
   * 处理class
   * @return class名
   */
  var handClass = function handClass() {
    var str = 'language';
    if (className) str += ' ' + className;
    if (showDialog) str += ' language-select';
    return str;
  };
  /**
   * 是否显示
   * @param bol
   */
  var onVisibleChange = function onVisibleChange(bol) {
    setShowDialog(bol);
  };
  /**
   * 下拉内容
   * */
  var selectPopover = function selectPopover() {
    /**
     * 处理每一项className
     * @param item {LanguageItemProps} 详情
     * @return class名
     */
    var handMenuClassItem = function handMenuClassItem(item) {
      var str = 'menu-popover-item';
      if (item.value === selectItem.value) str += ' menu-popover-item-select';
      return str;
    };
    return jsx("div", Object.assign({
      className: "menu-popover-box"
    }, {
      children: language.map(function (item, index) {
        return jsxs("div", Object.assign({
          className: handMenuClassItem(item),
          onClick: clickLangItem(item)
        }, {
          children: [item.icon && jsx("span", Object.assign({
            className: "icon"
          }, {
            children: item.icon
          })), item.label && jsx("span", Object.assign({
            className: "label",
            style: {
              marginLeft: '5px'
            }
          }, {
            children: item.label
          }))]
        }), index);
      })
    }));
  };
  /** 内容 */
  var itemLanguage = function itemLanguage() {
    /** 处理显示的内容 */
    var handContent = function handContent() {
      return jsxs(Fragment, {
        children: [selectItem.icon && jsx("span", Object.assign({
          className: "language-item-icon"
        }, {
          children: selectItem.icon
        })), selectItem.label && jsx("span", Object.assign({
          className: "language-item-label"
        }, {
          children: selectItem.label
        }))]
      });
    };
    return jsx(Popover, Object.assign({
      trigger: 'hover',
      visible: showDialog,
      placement: "bottom-start",
      content: selectPopover(),
      overlayClassName: $prefixCls + '-horizontal-meun-right-popover',
      onVisibleChange: onVisibleChange
    }, {
      children: jsx("div", Object.assign({
        className: "language-item"
      }, {
        children: handContent()
      }))
    }));
  };
  return jsx(Fragment, {
    children: render ? render : jsx("div", Object.assign({
      className: handClass()
    }, {
      children: itemLanguage()
    }))
  });
};
/* 按钮组 */
var BtnList = function BtnList(props) {
  var _props$list = props.list,
    list = _props$list === void 0 ? [] : _props$list,
    render = props.render,
    className = props.className,
    onClick = props.onClick;
  /**
   * 处理class
   * @return class名
   */
  var handClass = function handClass() {
    var str = 'btn-list';
    if (className) str += ' ' + className;
    return str;
  };
  /**
   * 点击按钮
   * @param item {BtnListItemProps} 详情
   * @param e 元素
   */
  var clickItem = function clickItem(item) {
    return function (e) {
      onClick && onClick(item, e);
    };
  };
  /** 内容 */
  var ContentMemo = useMemo(function () {
    /**
     * 处理显示的内容
     * @param item {BtnListItemProps} 详情
     * @return {ReactNode}
     */
    var handContent = function handContent(item) {
      return jsxs(Fragment, {
        children: [item.icon && jsx("span", Object.assign({
          className: "btn-list-item-icon"
        }, {
          children: item.icon
        })), item.label && jsx("span", Object.assign({
          className: "btn-list-item-label"
        }, {
          children: item.label
        }))]
      });
    };
    return jsx(Fragment, {
      children: list.map(function (item, index) {
        var str = 'btn-list-item';
        if (item.sign) str += ' btn-list-item-sign';
        return jsx("div", Object.assign({
          className: str,
          onClick: clickItem(item)
        }, {
          children: handContent(item)
        }), index);
      })
    });
  }, [list]);
  return jsx(Fragment, {
    children: render ? render : jsx("div", Object.assign({
      className: handClass()
    }, {
      children: ContentMemo
    }))
  });
};
/* 用户 */
var User = function User(props) {
  var img = props.img,
    imgRender = props.imgRender,
    label = props.label,
    render = props.render,
    className = props.className,
    list = props.list,
    onClick = props.onClick,
    onClickMenu = props.onClickMenu,
    selectValue = props.selectValue;
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    showDialog = _useState8[0],
    setShowDialog = _useState8[1]; // 显示弹出菜单
  var _useState9 = useState({}),
    _useState10 = _slicedToArray(_useState9, 1),
    timerJson = _useState10[0];
  var posDom = useRef();
  useEffect(function () {
    return function () {
      clearTimeout(timerJson.timer);
    };
  }, []);
  /**
   * 点击
   * @param e 元素
   */
  var onClickCom = function onClickCom(e) {
    onClick && onClick(e);
  };
  /**
   * 点击语言下拉
   * @param item {UserListProps} 当前项参数
   */
  var clickUserItem = function clickUserItem(item) {
    return function () {
      onClickMenu && onClickMenu(item.value, item);
      setShowDialog(false);
    };
  };
  /**
   * 是否显示
   * @param bol
   */
  var onVisibleChange = function onVisibleChange(bol) {
    setShowDialog(bol);
  };
  /**
   * 下拉内容
   * */
  var selectPopover = function selectPopover() {
    /**
     * 处理每一项className
     * @param item {LanguageItemProps} 详情
     * @return class名
     */
    var handMenuClassItem = function handMenuClassItem(item) {
      var str = 'menu-popover-item';
      if (item.value === selectValue) str += ' menu-popover-item-select';
      return str;
    };
    var handStyleWidth = function handStyleWidth() {
      var styleJson = {};
      if (posDom && posDom.current) {
        styleJson.width = posDom.current.getBoundingClientRect().width + 'px';
      }
      return styleJson;
    };
    return jsx("div", Object.assign({
      className: "menu-popover-box",
      style: handStyleWidth()
    }, {
      children: list && list.map(function (item, index) {
        return jsxs("div", Object.assign({
          className: handMenuClassItem(item),
          onClick: clickUserItem(item)
        }, {
          children: [item.icon && jsx("span", Object.assign({
            className: "icon",
            style: {
              marginRight: '5px'
            }
          }, {
            children: item.icon
          })), item.label && jsx("span", Object.assign({
            className: "label"
          }, {
            children: item.label
          }))]
        }), index);
      })
    }));
  };
  /**
   * 处理内容
   * @return {ReactNode}
   */
  var handContent = function handContent() {
    return jsxs(Fragment, {
      children: [imgRender ? imgRender : img && jsx("img", {
        src: img,
        alt: ""
      }), label && jsx("span", Object.assign({
        className: "label"
      }, {
        children: label
      })), list && list.length > 0 && jsx("span", Object.assign({
        className: "arrow"
      }, {
        children: jsx(Down, {})
      }))]
    });
  };
  /**
   * 处理class
   * @return class名
   */
  var handClass = function handClass() {
    var str = 'logo';
    if (className) str += ' ' + className;
    if (showDialog) str += ' logo-show-dialog';
    return str;
  };
  return jsx(Fragment, {
    children: render ? render : jsx(Popover, Object.assign({
      trigger: 'hover',
      visible: showDialog,
      placement: "bottom-start",
      content: selectPopover(),
      overlayClassName: $prefixCls + '-horizontal-meun-right-popover',
      onVisibleChange: onVisibleChange
    }, {
      children: jsx("div", Object.assign({
        className: handClass(),
        onClick: onClickCom,
        ref: posDom
      }, {
        children: handContent()
      }))
    }))
  });
};
var HorizontalMeunRight = function HorizontalMeunRight(props) {
  var _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    backSelfcareProps = props.backSelfcareProps,
    languageProps = props.languageProps,
    btnListProps = props.btnListProps,
    userProps = props.userProps,
    render = props.render;
  /**
   * 处理class
   * @return class名
   */
  var handClass = function handClass() {
    var str = 'horizontal-meun-right';
    if (className) str += ' ' + className;
    return str;
  };
  /** 返回自助服务 */
  var BackSelfcareMemo = useMemo(function () {
    return backSelfcareProps && jsx(BackSelfcare, Object.assign({}, backSelfcareProps));
  }, [backSelfcareProps]);
  /** language */
  var LanguageMemo = useMemo(function () {
    return languageProps && jsx(Language, Object.assign({}, languageProps));
  }, [languageProps]);
  /** 按钮组 */
  var BtnListMemo = useMemo(function () {
    return btnListProps && jsx(BtnList, Object.assign({}, btnListProps));
  }, [btnListProps]);
  /** UserMemo */
  var UserMemo = useMemo(function () {
    return userProps && jsx(User, Object.assign({}, userProps));
  }, [userProps]);
  return jsx(Fragment, {
    children: render ? render : jsxs("div", Object.assign({
      className: handClass()
    }, {
      children: [BackSelfcareMemo, LanguageMemo, BtnListMemo, UserMemo]
    }))
  });
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-page-header {\n  width: 100%;\n  height: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  justify-content: space-between;\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  padding: 0 16px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-page-header > .page-header-left {\n  white-space: nowrap;\n  display: flex;\n  justify-content: left;\n  align-items: center;\n}\n.paraui-v3-page-header > .menu-box {\n  width: 100%;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list {\n  width: 100%;\n  height: 100%;\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item {\n  padding: 0 20px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n  white-space: nowrap;\n  float: left;\n  cursor: pointer;\n  text-decoration: none;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-arrow {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item:hover > .menu-item-arrow svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n  margin-right: 5px;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-label {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  white-space: nowrap;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item > .menu-item-arrow > svg {\n  font-size: 18px;\n  transition: all 0.3s;\n  color: rgba(46, 55, 67, 0.7);\n  margin-left: 2px;\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-select > .menu-item-arrow svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-arrow {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header > .menu-box > .horizontal-menu-list > .horizontal-menu-list-item.horizontal-menu-list-item-hover > .menu-item-arrow svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right {\n  height: 100%;\n  display: flex;\n}\n.paraui-v3-page-header .horizontal-meun-right > .back-btn {\n  padding: 0 12px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-page-header .horizontal-meun-right > .back-btn > button {\n  width: 100%;\n  white-space: nowrap;\n  padding: 0 10px 0 14px;\n  line-height: 14px;\n  font-size: 14px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .back-btn > button svg {\n  color: white;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language {\n  height: 100%;\n  margin-right: 4px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item {\n  display: flex;\n  padding: 0 12px;\n  cursor: pointer;\n  align-items: center;\n  height: 100%;\n  position: relative;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover > .language-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover > .language-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item:hover > .language-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item > .language-item-icon {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item > .language-item-icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language .language-item > .language-item-label {\n  font-size: 14px;\n  line-height: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  white-space: nowrap;\n  margin-left: 5px;\n  display: inline-block;\n}\n.paraui-v3-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .language.language-select .language-item > .language-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list {\n  display: flex;\n  height: 100%;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item {\n  display: flex;\n  padding: 0 12px;\n  cursor: pointer;\n  align-items: center;\n  margin-right: 4px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon {\n  position: relative;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item.btn-list-item-sign > .btn-list-item-icon:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: rgb(235, 96, 84);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover > .btn-list-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item:hover > .btn-list-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n  position: relative;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-page-header .horizontal-meun-right > .btn-list > .btn-list-item > .btn-list-item-label {\n  font-size: 14px;\n  line-height: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  width: 100%;\n  white-space: nowrap;\n  margin-left: 5px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo {\n  display: flex;\n  padding: 0 12px;\n  align-items: center;\n  height: 100%;\n  cursor: pointer;\n  margin-left: 4px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo.logo-show-dialog {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo > img {\n  height: 36px;\n  width: 36px;\n  border-radius: 50%;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo > .label {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n  white-space: nowrap;\n  margin-left: 12px;\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo > .arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 5px;\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 18px;\n}\n.paraui-v3-page-header .horizontal-meun-right > .logo > .arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 18px;\n}\n\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 140px;\n  height: 40px;\n  line-height: 40px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 5px;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  font-size: 20px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  font-size: 20px;\n  transition: all 0.3s;\n  color: rgba(46, 55, 67, 0.7);\n  transform: rotate(270deg);\n  position: relative;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-popper, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-popper {\n  padding-left: 5px;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-horizontal-menu-popper.menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper-child {\n  position: absolute;\n  transform: none !important;\n  left: 100% !important;\n  top: 0;\n}\n.paraui-v3-horizontal-menu-popper .menu-item-popper-child > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  background-color: white;\n}\n\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item {\n  height: 36px;\n  line-height: 36px;\n  padding: 0 10px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover > .icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item:hover > .label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon > svg {\n  font-size: 18px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item > .label {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n  width: 100%;\n  white-space: nowrap;\n  text-align: left;\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-horizontal-meun-right-popover .menu-popover-box > .menu-popover-item.menu-popover-item-select > .label {\n  color: rgb(54, 102, 214);\n}";
styleInject(css_248z);

var PageHeader = function PageHeader(props) {
  var leftRender = props.leftRender,
    menuListProps = props.menuListProps,
    footerProps = props.footerProps,
    selectMenu = props.selectMenu,
    onClickMenu = props.onClickMenu,
    className = props.className,
    style = props.style;
  var LeftMemo = useMemo(function () {
    return leftRender && jsx("div", Object.assign({
      className: 'page-header-left'
    }, {
      children: leftRender
    }));
  }, [leftRender]);
  var MenuMemo = useMemo(function () {
    return props.menuListProps && jsx("div", Object.assign({
      className: 'menu-box'
    }, {
      children: jsx(HorizontalMenu, Object.assign({}, menuListProps, {
        selectMenu: selectMenu,
        onClickMenu: onClickMenu
      }))
    }));
  }, [menuListProps, selectMenu, onClickMenu]);
  var FooterMemo = useMemo(function () {
    return props.footerProps && jsx(HorizontalMeunRight, Object.assign({}, footerProps));
  }, [footerProps]);
  /**
   * 处理class
   */
  var handClass = function handClass() {
    var str = $prefixCls + '-page-header';
    if (className) str += ' ' + className;
    return str;
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style
  }, {
    children: [LeftMemo, MenuMemo, FooterMemo]
  }));
};

export { PageHeader, PageHeader as default };
