import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
import { useState, useRef, useEffect, Fragment } from 'react';
import { Popover } from '../Popover/index.js';
import AutoTips from '../AutoTips/index.js';
import More from '@iam-com/icons/More';
import Return from '@iam-com/icons/Return';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.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 '@iam-com/lib';
import '@para-ui/core/GlobalContext';

var en = {
  back: 'Back'
};

var zh = {
  back: '返回'
};

var localeJson = {
  zh: zh,
  en: en
};

var css_248z = "@charset \"UTF-8\";\n/**\n * @author linhd\n * @date 2021年10月25日 14:58:12\n * @description 面包屑\n */\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-breadcrumbs {\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  height: 24px;\n  line-height: 24px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item {\n  padding: 0 4px;\n  border-radius: 2px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item .breadcrumbs-item-content {\n  white-space: nowrap;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item .breadcrumbs-item-content svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  margin-right: 4px;\n  vertical-align: -2px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click .breadcrumbs-item-content {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover .breadcrumbs-item-content {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover .breadcrumbs-item-content svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-current .breadcrumbs-item-content {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-current .breadcrumbs-item-content svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled .breadcrumbs-item-content {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled .breadcrumbs-item-content svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 4px;\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .separator {\n  color: rgba(171, 176, 185, 0.4);\n  margin: 0 4px;\n  position: relative;\n  top: -1px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .line {\n  display: inline-block;\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.2);\n  margin: 0 8px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  height: 100%;\n  color: rgba(46, 55, 67, 0.7);\n  padding: 0 4px;\n  border-radius: 2px;\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  margin-right: 4px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content span {\n  white-space: nowrap;\n}\n.paraui-v3-breadcrumbs.paraui-v3-breadcrumbs-calculation {\n  overflow: hidden;\n  opacity: 0;\n}\n\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content {\n  padding: 8px 0;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item {\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  height: 36px;\n  line-height: 36px;\n  padding: 0 12px;\n  color: rgb(46, 55, 67);\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item svg {\n  color: rgb(46, 55, 67);\n  margin-right: 4px;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-click {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-click:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-disabled {\n  cursor: not-allowed;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-disabled svg {\n  color: rgba(46, 55, 67, 0.4);\n}";
styleInject(css_248z);

var Breadcrumbs = function Breadcrumbs(props) {
  var _props$maxWidth = props.maxWidth,
    maxWidth = _props$maxWidth === void 0 ? '160px' : _props$maxWidth,
    className = props.className,
    list = props.list,
    _props$separator = props.separator,
    separator = _props$separator === void 0 ? '/' : _props$separator,
    popoverClassName = props.popoverClassName,
    _props$isShrink = props.isShrink,
    isShrink = _props$isShrink === void 0 ? true : _props$isShrink,
    _props$isBack = props.isBack,
    isBack = _props$isBack === void 0 ? false : _props$isBack,
    _props$minNum = props.minNum,
    minNum = _props$minNum === void 0 ? 2 : _props$minNum,
    _props$trigger = props.trigger,
    trigger = _props$trigger === void 0 ? 'hover' : _props$trigger,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
    backRender = props.backRender,
    onClickItem = props.onClickItem,
    onBack = props.onBack,
    style = props.style;
  var intl = useFormatMessage('Breadcrumbs', localeJson);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showMore = _useState2[0],
    setShowMore = _useState2[1]; // 是否显示更多按钮
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    hideArr = _useState4[0],
    setHideArr = _useState4[1]; // 是否隐藏面包屑
  var boxRef = useRef();
  var constData = useRef({
    minNum: minNum,
    isBack: isBack,
    isShrink: isShrink,
    timer: null,
    showMore: false,
    hideArr: [],
    hidePos: 0
  });
  constData.current.isBack = isBack;
  constData.current.showMore = showMore;
  constData.current.isShrink = isShrink;
  constData.current.minNum = minNum;
  useEffect(function () {
    window.addEventListener("resize", winResize);
    return function () {
      clearTimeout(constData.current.timer);
      window.removeEventListener("resize", winResize);
    };
  }, []);
  useEffect(function () {
    var arr = new Array(props.list.length).fill(false);
    constData.current.hideArr = arr;
    setHideArr(arr);
    changeSize();
  }, [list]);
  /** 点击面包屑 */
  var clickItem = function clickItem(item, index) {
    return function () {
      if (props.list.length - 1 === index || item.disabled) return;
      onClickItem && onClickItem(item);
    };
  };
  /** 点击返回, 又返回执行返回事件,否则默认返回上级 */
  var clickBack = function clickBack() {
    if (onBack) return onBack();
    if (props.list.length < 2) return;
    var item = props.list[props.list.length - 2];
    clickItem(item, props.list.length - 2)();
  };
  /** 改变屏幕 */
  var winResize = function winResize() {
    changeSize();
  };
  /** 去除遮罩 */
  var hideMask = function hideMask() {
    boxRef.current.classList.remove($prefixCls + '-breadcrumbs-calculation');
  };
  var changeSize = function changeSize(bol) {
    if (!constData.current.isShrink) return hideMask();
    // 不自动计算
    clearTimeout(constData.current.timer);
    // 恢复初始状态
    if (!bol) {
      constData.current.hidePos = 0;
      constData.current.showMore = false;
      var arr = new Array(props.list.length).fill(false);
      constData.current.hideArr = arr;
      setHideArr(arr);
      setShowMore(false);
    }
    if (props.list.length <= constData.current.minNum + 1) return hideMask();
    // 面包屑数组长度必须大于最少显示数
    if (constData.current.hidePos === props.list.length - constData.current.minNum - 1) return hideMask();
    // 隐藏到最小显示数,停止
    boxRef.current.classList.add($prefixCls + '-breadcrumbs-calculation');
    constData.current.timer = setTimeout(function () {
      var boxWidth = boxRef.current.clientWidth;
      var listWidth = boxRef.current.querySelector('.breadcrumbs-list').clientWidth;
      var backWidth = constData.current.isBack ? boxRef.current.querySelector('.breadcrumbs-back').clientWidth : 0;
      if (boxWidth > listWidth + backWidth) {
        // 没有超出
        hideMask();
      } else {
        constData.current.hidePos += 1;
        constData.current.hideArr[constData.current.hidePos] = true;
        setHideArr(_toConsumableArray(constData.current.hideArr));
        setShowMore(true);
        changeSize(true);
        /*// 超出
        if (constData.current.showMore) {
            // 超出情况下,在超出,继续减一个面包屑
        } else {
            // 没有超出-> 变超出
        }*/
      }
    }, 50);
  };
  /** 处理弹窗内容 */
  var handContent = function handContent() {
    return jsx("div", Object.assign({
      className: "breadcrumbs-popover-content"
    }, {
      children: list.map(function (item, index) {
        if (!hideArr[index]) return null;
        var str = 'breadcrumbs-popover-content-item';
        if (index !== list.length - 1 && !item.disabled) str += ' breadcrumbs-popover-content-item-click';
        if (index === list.length - 1) str += ' breadcrumbs-popover-content-item-current';
        if (item.disabled) str += ' breadcrumbs-popover-content-item-disabled';
        return jsx("div", Object.assign({
          className: str,
          onClick: clickItem(item, index)
        }, {
          children: item.label
        }), index);
      })
    }));
  };
  // 处理弹出框className
  var popoverHandClass = function popoverHandClass() {
    var str = $prefixCls + '-breadcrumbs-popover';
    if (popoverClassName) str += ' ' + popoverClassName;
    return str;
  };
  // 处理className
  var handClass = function handClass() {
    var str = $prefixCls + '-breadcrumbs';
    if (isShrink) str += " ".concat($prefixCls, "-breadcrumbs-shrink");
    if (className) str += ' ' + className;
    return str;
  };
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style,
    ref: boxRef
  }, {
    children: [jsx("ul", Object.assign({
      className: "breadcrumbs-list"
    }, {
      children: list.map(function (item, index) {
        if (hideArr[index]) return;
        var str = 'breadcrumbs-item';
        if (index === list.length - 1) str += ' breadcrumbs-item-current';
        if (index !== list.length - 1 && !item.disabled) str += ' breadcrumbs-item-click';
        if (item.disabled) str += ' breadcrumbs-item-disabled';
        return jsxs(Fragment, {
          children: [jsx("li", Object.assign({
            className: str,
            style: {
              maxWidth: item.maxWidth || maxWidth
            },
            onClick: clickItem(item, index)
          }, {
            children: jsx(AutoTips, {
              children: jsx("span", Object.assign({
                className: 'breadcrumbs-item-content'
              }, {
                children: item.label
              }))
            })
          })), index !== list.length - 1 && jsx("li", Object.assign({
            className: 'separator'
          }, {
            children: separator
          })), showMore && index === 0 && jsxs(Fragment$1, {
            children: [jsx(Popover, Object.assign({
              content: handContent(),
              overlayClassName: popoverHandClass(),
              trigger: trigger,
              placement: placement,
              destroyTooltipOnHide: true
            }, {
              children: jsx("li", Object.assign({
                className: 'breadcrumbs-item-more'
              }, {
                children: jsx(More, {})
              }))
            })), !hideArr[list.length - 1] && jsx("li", Object.assign({
              className: 'separator'
            }, {
              children: separator
            }))]
          })]
        }, index);
      })
    })), isBack && jsxs("div", Object.assign({
      className: 'breadcrumbs-back'
    }, {
      children: [jsx("span", {
        className: 'line'
      }), jsx("div", Object.assign({
        className: 'breadcrumbs-back-content',
        onClick: clickBack
      }, {
        children: backRender ? backRender : jsxs(Fragment$1, {
          children: [jsx(Return, {}), jsx("span", {
            children: intl({
              id: 'back'
            })
          })]
        })
      }))]
    }))]
  }));
};

export { Breadcrumbs, Breadcrumbs as default };
