import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import clsx from 'clsx';
import HelperText from '../HelperText/index.js';
import Label from '../Label/index.js';
import { D as Dropdown } from '../_verture/index-fac03ce3.js';
import Selector, { handFieldConfig } from '../Selector/index.js';
import AutoTips from '../AutoTips/index.js';
import { Popover } from '../Popover/index.js';
import CloseCircle from '@iam-com/icons/CloseCircle';
import Down from '@iam-com/icons/Down';
import CloseIcon from '@iam-com/icons/Close';
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/typeof-498dd2b1.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Help/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import '@iam-com/icons/Help';
import 'rc-dropdown';
import '../_verture/usePopupContainer-87febeb9.js';
import 'dayjs';
import '@iam-com/lib';
import '../_verture/index-beef914f.js';
import '../Radio/index.js';
import '../Checkbox/index.js';
import '../Loading/index.js';
import '@iam-com/icons/LoadingF';
import '../Search/index.js';
import '../TextField/index.js';
import '@iam-com/icons/PreviewClose';
import '@iam-com/icons/PreviewOpen';
import '../_verture/useGlobalProps-1b846a65.js';
import '@para-ui/core/GlobalContext';
import '../Button/index.js';
import '@iam-com/icons/Forbid';
import '@iam-com/icons/Search';
import '../Breadcrumbs/index.js';
import '@iam-com/icons/More';
import '@iam-com/icons/Return';
import '../Empty/index.js';
import '@iam-com/icons/Refresh';

var en = {
  selected: 'Selected',
  select: 'Please select'
};

var zh = {
  selected: '已选中',
  select: '请选择'
};

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

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-selector-picker {\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  width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 42px 0 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n  padding-right: 40px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  overflow: hidden;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  display: inline-block;\n  background-color: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  padding: 0 12px 0 12px;\n  color: rgb(46, 55, 67);\n  margin-right: 8px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n  max-width: none;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  color: rgb(46, 55, 67);\n  display: inline-block;\n  height: 100%;\n  vertical-align: top;\n  max-width: calc(100% - 20px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  cursor: pointer;\n  margin-left: 8px;\n  color: rgb(46, 55, 67);\n  font-size: 16px;\n  position: relative;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n  max-width: none;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  font-size: 14px;\n  line-height: 1.429;\n  color: rgb(46, 55, 67);\n  word-break: break-all;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  flex: 1;\n  color: rgba(46, 55, 67, 0.4);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  right: 12px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  width: 20px;\n  height: 20px;\n  transition: all 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n  font-size: 20px;\n  color: rgba(46, 55, 67, 0.7);\n  transition: all 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  right: 12px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  opacity: 0;\n  transition: all 0.3s;\n  width: 20px;\n  height: 20px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n  font-size: 16px;\n  color: rgba(46, 55, 67, 0.7);\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n  transform: rotate(180deg);\n  color: #3666d6;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgba(171, 176, 185, 0.12);\n  cursor: not-allowed;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  max-width: 100%;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 1;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 36px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 5px;\n  height: 100%;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 36px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 5px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 7px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 34px;\n  line-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 8px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n  top: 8px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 32px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 4px;\n  height: 100%;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 32px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 4px;\n  height: 22px;\n  line-height: 22px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 5px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 6px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n  top: 6px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n\n.paraui-v3-selector-picker-dropdown .paraui-v3-selector {\n  border: 0;\n}\n.paraui-v3-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}\n\n.paraui-v3-selector-more-popover {\n  padding-left: 16px;\n}\n.paraui-v3-selector-more-popover .select-more {\n  width: 300px;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-title {\n  font-size: 14px;\n  padding: 0 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content {\n  max-height: 300px;\n  overflow: auto;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 12px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n  width: calc(100% - 25px);\n  display: inline-block;\n  font-size: 14px;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 20px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-small .select-more > .select-more-title {\n  line-height: 28px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-small .select-more > .select-more-content > .select-more-content-item {\n  line-height: 28px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-medium .select-more > .select-more-title {\n  line-height: 32px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-medium .select-more > .select-more-content > .select-more-content-item {\n  line-height: 32px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-large .select-more > .select-more-title {\n  line-height: 36px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-large .select-more > .select-more-content > .select-more-content-item {\n  line-height: 36px;\n}";
styleInject(css_248z);

//下拉选择器
var SelectorPicker = function SelectorPicker(props) {
  var _a, _b, _c;
  var intl = useFormatMessage('SelectorPicker', localeJson);
  var className = props.className,
    label = props.label,
    value = props.value,
    defaultValue = props.defaultValue,
    _props$required = props.required,
    required = _props$required === void 0 ? false : _props$required,
    labelTooltip = props.labelTooltip,
    _props$error = props.error,
    error = _props$error === void 0 ? false : _props$error,
    hideErrorDom = props.hideErrorDom,
    helperText = props.helperText,
    _props$size = props.size,
    size = _props$size === void 0 ? 'large' : _props$size,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    style = props.style,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? intl('select') : _props$placeholder,
    _props$multiple = props.multiple,
    multiple = _props$multiple === void 0 ? false : _props$multiple,
    _props$allowClear = props.allowClear,
    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
    _props$overLine = props.overLine,
    overLine = _props$overLine === void 0 ? false : _props$overLine,
    selectorProps = props.selectorProps,
    onChange = props.onChange,
    onClear = props.onClear,
    tagRender = props.tagRender,
    morePopoverClassName = props.morePopoverClassName,
    getPopupContainer = props.getPopupContainer;
  var fieldConfigHand = handFieldConfig((_a = props.selectorProps) === null || _a === void 0 ? void 0 : _a.fieldConfig, ((_b = props.selectorProps) === null || _b === void 0 ? void 0 : _b.rowKey) || 'key'); // 字段配置,对应数据字段
  var selectorFieldConfigHand = Object.assign(Object.assign({}, fieldConfigHand), (_c = props.selectorProps) === null || _c === void 0 ? void 0 : _c.backDataFieldConfig); // 选中值字段配置,对应数据字段
  var _useState = useState(!defaultValue ? [] : defaultValue),
    _useState2 = _slicedToArray(_useState, 2),
    valueCom = _useState2[0],
    setValueCom = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    open = _useState4[0],
    setOpen = _useState4[1]; // 显示下拉
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    openMore = _useState6[0],
    setOpenMore = _useState6[1]; // 显示更多
  var _useState7 = useState(null),
    _useState8 = _slicedToArray(_useState7, 2),
    morePos = _useState8[0],
    setMorePos = _useState8[1]; // 超出在原始位置
  var refDom = useRef(null); // 容器
  var constData = useRef({
    list: []
  });
  var prefixCls = $prefixCls + '-selector-picker';
  constData.current.value = value;
  constData.current.valueCom = valueCom;
  /** 处理value,defaultValue */
  var handValue = function handValue() {
    if (constData.current.value !== undefined) return constData.current.value;
    return constData.current.valueCom;
  };
  /** 处理组件绑定的值 */
  var handComVal = function handComVal() {
    var val = handValue();
    var handVal = !val ? [] : [val];
    if (val instanceof Array) {
      handVal = _toConsumableArray(val);
    }
    return handVal;
  };
  constData.current.list = handComVal();
  useEffect(function () {
    if (!overLine && multiple) {
      window.addEventListener('resize', changeSize);
    } else {
      window.removeEventListener("resize", changeSize);
    }
    return function () {
      window.removeEventListener("resize", changeSize);
    };
  }, [overLine, multiple]);
  useEffect(function () {
    changeSize();
  }, [valueCom, value]);
  /**
   * 多选 不换行 计算
   * @param index 数组下标
   */
  var handMultiline = function handMultiline(index) {
    if (index === null || index === 0) return;
    if (index === undefined) index = constData.current.list.length;
    var refEle = refDom.current;
    if (!refEle) return;
    var boxDom = refEle.querySelector('.selector-picker-wrapper-content-check');
    if (!boxDom) return;
    if (boxDom.scrollHeight > boxDom.clientHeight) {
      var num = Number(index) - 1;
      // 超出
      setMorePos(num);
      handMultiline(num);
    } else {
      // 一行
      if (constData.current.list.length <= index) handleCloseMore();
    }
  };
  /** 改变屏幕大小 */
  var changeSize = function changeSize() {
    clearTimeout(constData.current.resizeTimer);
    constData.current.resizeTimer = setTimeout(function () {
      setMorePos(constData.current.list.length);
      handMultiline();
    }, 100);
  };
  //删除当前选中项
  var handleTagRemove = function handleTagRemove(opt, index, e) {
    e.stopPropagation();
    constData.current.list.splice(index, 1);
    onChangeCom(_toConsumableArray(constData.current.list), {}, {});
  };
  /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
  var onChangeCom = function onChangeCom(val, node, rowData) {
    onChange && onChange(val, node, rowData);
    if (!multiple) setOpen(false);
    if (value === undefined) {
      setValueCom(!val ? [] : val);
    }
  };
  /** 处理标题 */
  var renderLabel = function renderLabel() {
    if (label || required) {
      return jsx(Label, Object.assign({
        label: label,
        required: required
      }, labelTooltip));
    }
    return null;
  };
  /** 下拉浮层 */
  var renderOverlay = function renderOverlay() {
    var handSelectorProps = function handSelectorProps() {
      var obj = Object.assign({
        layout: 'list',
        disabled: disabled,
        selectMode: multiple ? 'check' : 'radio',
        value: handValue(),
        defaultValue: defaultValue,
        onChange: onChangeCom
      }, selectorProps);
      return obj;
    };
    return jsx("div", Object.assign({
      className: 'selector-picker-dropdown-content',
      style: {
        width: (refDom && refDom.current ? refDom.current.offsetWidth : 0) + 'px'
      }
    }, {
      children: jsx(Selector, Object.assign({}, handSelectorProps()))
    }));
  };
  /**
   * 点击显示更多
   * @param e 点击元素
   */
  var clickMore = function clickMore(e) {
    e.stopPropagation();
    setOpenMore(true);
    setOpen(false);
  };
  // 关闭显示更多
  var handleCloseMore = function handleCloseMore() {
    setOpenMore(false);
  };
  //全部清空
  var handleAllClear = function handleAllClear(e) {
    e.stopPropagation();
    setOpen(false);
    onClear === null || onClear === void 0 ? void 0 : onClear();
    onChangeCom(null, {}, {});
  };
  /** 显示下拉 */
  var onVisibleChange = function onVisibleChange(bol) {
    if (disabled) return;
    setOpen(bol);
  };
  /** 处理单/多选内容 */
  var handDetail = function handDetail() {
    var _a, _b;
    if (multiple) {
      // 多选
      return jsxs("div", Object.assign({
        className: 'selector-picker-wrapper-content-check'
      }, {
        children: [constData.current.list.map(function (item, index) {
          if (morePos !== null && morePos <= index) return null;
          var labelStr = selectorFieldConfigHand.mainTitle || '';
          var valKey = selectorFieldConfigHand.key || '';
          var val = item[labelStr] || item[valKey];
          var renderVal = tagRender && tagRender(item);
          var isClose = true;
          if (disabled === true) {
            isClose = false; // 禁用不显示×
          }

          return jsxs("div", Object.assign({
            className: isClose ? 'check-select-content-item' : 'check-select-content-item check-select-content-item-noclose'
          }, {
            children: [jsx("span", {
              children: jsx(AutoTips, {
                children: renderVal || val
              })
            }), isClose && jsx(CloseIcon, {
              onClick: function onClick(e) {
                return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
              }
            })]
          }), index);
        }), function () {
          if (morePos !== null && constData.current.list.length > morePos) {
            return jsx("div", Object.assign({
              className: "check-select-content-item check-select-content-item-more",
              onClick: clickMore
            }, {
              children: jsxs("span", {
                children: ["+", constData.current.list.length - morePos]
              })
            }));
          }
        }()]
      }));
    }
    // 单选
    var labelStr = selectorFieldConfigHand.mainTitle || '';
    var valKey = selectorFieldConfigHand.key || '';
    var val = ((_a = constData.current.list[0]) === null || _a === void 0 ? void 0 : _a[labelStr]) || ((_b = constData.current.list[0]) === null || _b === void 0 ? void 0 : _b[valKey]);
    var renderVal = tagRender && tagRender(constData.current.list[0]);
    var resultVal = renderVal || val;
    return jsx("div", Object.assign({
      className: 'selector-picker-wrapper-content-radio'
    }, {
      children: overLine ? resultVal : jsx(AutoTips, {
        children: resultVal
      })
    }));
  };
  /** 处理内容 */
  var renderTagContent = function renderTagContent() {
    if (!constData.current.list.length) return null;
    return jsx("div", Object.assign({
      className: 'selector-picker-wrapper-content'
    }, {
      children: handDetail()
    }));
  };
  /** dropdown 主体 */
  var renderAnchor = function renderAnchor() {
    return jsxs("div", Object.assign({
      className: "selector-picker-wrapper"
    }, {
      children: [renderTagContent(), !constData.current.list.length && jsx("span", Object.assign({
        className: 'selector-picker-placeholder'
      }, {
        children: placeholder
      })), jsx("span", Object.assign({
        className: 'selector-picker-arrow'
      }, {
        children: jsx(Down, {})
      })), allowClear && constData.current.list.length && !disabled ? jsx("span", Object.assign({
        className: "selector-picker-clear",
        onClick: handleAllClear
      }, {
        children: jsx(CloseCircle, {})
      })) : null]
    }));
  };
  /** 多选更多弹窗内容 */
  var morePopoverContent = function morePopoverContent() {
    return jsxs("div", Object.assign({
      className: "select-more"
    }, {
      children: [jsxs("div", Object.assign({
        className: "select-more-title"
      }, {
        children: [jsx("span", {
          children: intl({
            id: 'selected'
          })
        }), jsxs("span", {
          children: ["(", constData.current.list.length - Number(morePos), ")"]
        })]
      })), jsx("div", Object.assign({
        className: "select-more-content"
      }, {
        children: constData.current.list.map(function (item, index) {
          if (morePos !== null && morePos > index) return null;
          var labelStr = selectorFieldConfigHand.mainTitle || '';
          var valKey = selectorFieldConfigHand.key || '';
          var val = item[labelStr] || item[valKey];
          var renderVal = tagRender && tagRender(item);
          var isClose = true;
          if (disabled === true) {
            isClose = false; // 禁用不显示×
          }

          return jsxs("div", Object.assign({
            className: "select-more-content-item"
          }, {
            children: [jsx("span", {
              children: jsx(AutoTips, {
                children: renderVal || val
              })
            }), isClose && jsx(CloseIcon, {
              onClick: function onClick(e) {
                return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
              }
            })]
          }), index);
        })
      }))]
    }));
  };
  // 处理下拉框更多class
  var handleClassMorePopover = function handleClassMorePopover() {
    var str = "".concat($prefixCls, "-selector-more-popover ").concat($prefixCls, "-scrollbar-small");
    if (size) str += " ".concat($prefixCls, "-selector-more-popover-").concat(size);
    if (morePopoverClassName) str += ' ' + morePopoverClassName;
    return str;
  };
  /** 多选超出popover */
  var morePopover = function morePopover() {
    return jsx(Popover, Object.assign({
      placement: "rightTop",
      visible: openMore,
      content: morePopoverContent(),
      onVisibleChange: handleCloseMore,
      overlayClassName: handleClassMorePopover()
    }, {
      children: renderAnchor()
    }));
  };
  /** 处理内容 */
  var renderContent = function renderContent() {
    return jsx(Dropdown, Object.assign({
      visible: open,
      destroyPopupOnHide: true,
      overlay: renderOverlay(),
      placement: 'bottomLeft',
      trigger: ['click'],
      onVisibleChange: onVisibleChange,
      overlayClassName: $prefixCls + '-selector-picker-dropdown',
      getPopupContainer: getPopupContainer
    }, {
      children: morePopover()
    }));
  };
  /** 生成cls */
  var makeCls = function makeCls() {
    var _clsx;
    return clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-focused"), open), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_clsx, "".concat(prefixCls, "-error"), error), _defineProperty(_clsx, "".concat(prefixCls, "-clear"), allowClear && constData.current.list.length), _defineProperty(_clsx, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_clsx, "".concat(prefixCls, "-wrap"), overLine), _defineProperty(_clsx, "".concat(prefixCls, "-nowrap"), !overLine), _clsx));
  };
  return jsxs("div", Object.assign({
    className: makeCls(),
    style: style,
    ref: refDom
  }, {
    children: [renderLabel(), renderContent(), jsx(HelperText, {
      error: error,
      helperText: helperText,
      hideErrorDom: hideErrorDom
    })]
  }));
};

export { SelectorPicker as default };
