import _Select from "antd/es/select";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["ref", "style", "displayStyle", "notFoundContent", "labelInValue", "options", "status", "defaultValue", "hideSelected", "loading", "showArrow", "tokenSeparators", "optionLabelProp", "optionFilterProp", "firstOptions", "dropdownRender", "EndOptions", "autoFocus", "placement", "maxTagCount", "filterSort", "maxTagPlaceholder", "tagRender", "maxTagTextLength", "defaultOpen", "allowClear", "size", "bordered", "open", "value", "showSearch", "placeholder", "DropFfontSize", "disabled", "autoClearSearchValue", "mode", "DropbackgroundColor", "DropColor", "selectedStyle", "activeStyle", "disabledStyle"],
  _excluded2 = ["color", "fontSize", "fontWeight", "height", "lineHeight", "opacity", "textAlign"];
import * as React from 'react';
import { useState, useEffect } from 'react';
import "./index.less";
import Search from "./componments/search";
import TwoSelect from "./componments/twoSelect";
var antSelect = function antSelect(_ref) {
  var ref = _ref.ref,
    style = _ref.style,
    displayStyle = _ref.displayStyle,
    notFoundContent = _ref.notFoundContent,
    labelInValue = _ref.labelInValue,
    options = _ref.options,
    status = _ref.status,
    defaultValue = _ref.defaultValue,
    hideSelected = _ref.hideSelected,
    loading = _ref.loading,
    showArrow = _ref.showArrow,
    tokenSeparators = _ref.tokenSeparators,
    optionLabelProp = _ref.optionLabelProp,
    optionFilterProp = _ref.optionFilterProp,
    firstOptions = _ref.firstOptions,
    dropdownRender = _ref.dropdownRender,
    EndOptions = _ref.EndOptions,
    autoFocus = _ref.autoFocus,
    placement = _ref.placement,
    maxTagCount = _ref.maxTagCount,
    filterSort = _ref.filterSort,
    maxTagPlaceholder = _ref.maxTagPlaceholder,
    tagRender = _ref.tagRender,
    maxTagTextLength = _ref.maxTagTextLength,
    defaultOpen = _ref.defaultOpen,
    allowClear = _ref.allowClear,
    size = _ref.size,
    bordered = _ref.bordered,
    open = _ref.open,
    value = _ref.value,
    showSearch = _ref.showSearch,
    placeholder = _ref.placeholder,
    DropFfontSize = _ref.DropFfontSize,
    disabled = _ref.disabled,
    autoClearSearchValue = _ref.autoClearSearchValue,
    mode = _ref.mode,
    DropbackgroundColor = _ref.DropbackgroundColor,
    DropColor = _ref.DropColor,
    selectedStyle = _ref.selectedStyle,
    activeStyle = _ref.activeStyle,
    disabledStyle = _ref.disabledStyle,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(value || []),
    SelectValue = _useState[0],
    setSelectValue = _useState[1];
  var _useState2 = useState(false),
    showSearch01 = _useState2[0],
    setshowSearch01 = _useState2[1];
  var _useState3 = useState([]),
    filterOptions = _useState3[0],
    setFilterOptions = _useState3[1];
  var _useState4 = useState(''),
    ID = _useState4[0],
    setID = _useState4[1];
  var _useState5 = useState(false),
    opens = _useState5[0],
    setOpen = _useState5[1];
  var _style = style || {
    minWidth: '200px'
  };
  var _otherProps = _extends({}, otherProps);
  _otherProps.style = _style;
  var handleChange = function handleChange(value) {
    setSelectValue(value);
  };
  useEffect(function () {
    setSelectValue(value);
  }, [value]);
  useEffect(function () {
    if (mode == 'Search') {
      setshowSearch01(true);
    }
    if (hideSelected && ['multiple'].includes(mode)) {
      var filteredOptions = options.filter(function (o) {
        return !SelectValue.includes(o.value || o.label);
      });
      setFilterOptions(filteredOptions);
    }
  }, [hideSelected, options, SelectValue, mode]);
  useEffect(function () {
    setID("antSelect_" + uuid());
  }, []);
  useEffect(function () {
    ChangeSize();
    ChangeTextStyle();
    ChangeColorStyle();
    ChangeSelectedStyle();
  }, [ID, _otherProps.style]);
  function UtilsChangeStyle(name, params) {
    var _document;
    // if(name =='.ant-select-item'){
    //   console.log(params.fontSize,'---------fontSize-')
    // }

    var elems = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelectorAll(name);
    var index = 0,
      length = elems.length;
    for (; index < length; index++) {
      elems[index].style.backgroundColor = params.backgroundColor || "";
      elems[index].style.color = params.color || "";
      elems[index].style.fontSize = params.fontSize + 'px' || "14px";
    }
  }
  useEffect(function () {
    if (!opens) {
      //清空style的值
      UtilsChangeStyle('.ant-select-item', {
        color: DropColor,
        fontSize: DropFfontSize,
        backgroundColor: DropbackgroundColor
      });
      return;
    } else {
      ChangeSize();
    }
    //监听鼠标的移入移出

    function ChangeSize() {
      setTimeout(function () {
        //先清空
        UtilsChangeStyle('.ant-select-item-option', {
          backgroundColor: '',
          color: '',
          fontSize: DropFfontSize
        });
        setTimeout(function () {
          //鼠标移入，加载选中样式和移入样式
          UtilsChangeStyle('.ant-select-item', {
            color: DropColor,
            fontSize: DropFfontSize,
            backgroundColor: DropbackgroundColor
          });
          UtilsChangeStyle('.ant-select-item-option-disabled', disabledStyle);
          UtilsChangeStyle('.ant-select-item-option-active', activeStyle);
          UtilsChangeStyle('.ant-select-item-option-selected', selectedStyle);
        }, 0);
      }, 0);
    }
    document.getElementsByClassName('ant-select-dropdown')[0].addEventListener('mouseover', function (e) {
      if (e.target.className == "ant-select-item-option-content") {
        // console.log(e,'-----e')
        ChangeSize();
      }
    });
    //监听onclick事件
    document.getElementsByClassName('ant-select-dropdown')[0].addEventListener('click', function (e) {
      if (e.target.className == "ant-select-item-option-content") {
        ChangeTextStyle();
      }
    });
  }, [opens, DropbackgroundColor, DropColor, DropFfontSize, selectedStyle, activeStyle, disabledStyle]);
  var ChangeSize = function ChangeSize() {
    setTimeout(function () {
      if (ID) {
        var _ref2;
        // //1.控制下拉框的高度，选中组件设置高度后，应该拉高下拉框本身的高度。
        var elems = (_ref2 = document.getElementById(ID) || document) === null || _ref2 === void 0 ? void 0 : _ref2.querySelectorAll('.ant-select-selector,.ant-select');
        //  console.log(document.getElementById(ID).offsetParent.getBoundingClientRect().height,'-----------document.getElementById(ID).parentNode')
        //  console.log(document.getElementById(ID).scrollHeight,'-----------document.getElementById(ID).parentNode')
        //  console.log(_otherProps.style.height,'_otherProps.style.height')
        //父级高度
        //  const parentHeight= document.getElementById(ID).getBoundingClientRect().height +'px'
        var index = 0,
          length = elems.length;
        for (; index < length; index++) {
          elems[index].style.height = '100%' || ''; //高度
          elems[index].style.width = '100%'; //宽度
        }

        setTimeout(function () {
          var _ref3;
          var elems01 = (_ref3 = document.getElementById(ID) || document) === null || _ref3 === void 0 ? void 0 : _ref3.querySelectorAll('.ant-select-single .ant-select-selector .ant-select-selection-item, .ant-select-single .ant-select-selector .ant-select-selection-placeholder');
          var index01 = 0,
            length01 = elems01.length;
          for (; index01 < length01; index01++) {
            elems01[index01].style.lineHeight = _otherProps.style.height || ''; //高度
          }
        }, 0);
      }
    }, 0);
  };
  var ChangeTextStyle = function ChangeTextStyle() {
    //选中下拉框后，支持在右侧属性面板”样式”选项卡中文本属性：如字号、颜色等等：
    setTimeout(function () {
      var _ref4;
      var _otherProps$style = _otherProps.style,
        color = _otherProps$style.color,
        fontSize = _otherProps$style.fontSize,
        fontWeight = _otherProps$style.fontWeight,
        height = _otherProps$style.height,
        lineHeight = _otherProps$style.lineHeight,
        opacity = _otherProps$style.opacity,
        textAlign = _otherProps$style.textAlign,
        parentStyles = _objectWithoutPropertiesLoose(_otherProps$style, _excluded2);
      var elems = (_ref4 = document.getElementById(ID) || document) === null || _ref4 === void 0 ? void 0 : _ref4.querySelectorAll('.ant-select-selection-item ,.ant-select-selection-placeholder');
      var index = 0,
        length = elems.length;
      for (; index < length; index++) {
        elems[index].style.fontSize = fontSize || "14px";
        elems[index].style.color = color || "";
        elems[index].style.fontWeight = fontWeight || "100";
        elems[index].style.lineHeight = height || "";
        elems[index].style.opacity = opacity || "";
        elems[index].style.textAlign = textAlign || "";
      }
    }, 0);
  };
  var ChangeColorStyle = function ChangeColorStyle() {
    //选中下拉框后，支持在右侧属性面板”样式”选项卡中文本属性：如字号、颜色等等：

    setTimeout(function () {
      var _ref5;
      var _otherProps$style2 = _otherProps.style,
        backgroundColor = _otherProps$style2.backgroundColor,
        borderBottomColor = _otherProps$style2.borderBottomColor,
        borderRadius = _otherProps$style2.borderRadius,
        borderLeftColor = _otherProps$style2.borderLeftColor,
        borderRightColor = _otherProps$style2.borderRightColor,
        borderTopColor = _otherProps$style2.borderTopColor,
        borderBottomWidth = _otherProps$style2.borderBottomWidth,
        borderTopWidth = _otherProps$style2.borderTopWidth,
        borderLeftWidth = _otherProps$style2.borderLeftWidth,
        borderRightWidth = _otherProps$style2.borderRightWidth,
        borderBottomStyle = _otherProps$style2.borderBottomStyle,
        borderTopStyle = _otherProps$style2.borderTopStyle,
        borderLeftStyle = _otherProps$style2.borderLeftStyle,
        borderRightStyle = _otherProps$style2.borderRightStyle,
        borderColor = _otherProps$style2.borderColor,
        borderStyle = _otherProps$style2.borderStyle,
        borderWidth = _otherProps$style2.borderWidth;
      var elems = (_ref5 = document.getElementById(ID) || document) === null || _ref5 === void 0 ? void 0 : _ref5.querySelectorAll('.ant-select:not(.ant-select-customize-input) .ant-select-selector');
      var index = 0,
        length = elems.length;
      for (; index < length; index++) {
        elems[index].style.borderColor = borderColor || "";
        elems[index].style.borderStyle = borderStyle || "";
        elems[index].style.borderWidth = borderWidth || "";
        elems[index].style.backgroundColor = backgroundColor || "";
        elems[index].style.borderRadius = borderRadius || "";
        if (borderBottomColor && borderBottomWidth && borderBottomStyle) {
          elems[index].style.borderBottomColor = borderBottomColor || '';
          elems[index].style.borderBottomWidth = borderBottomWidth || '';
          elems[index].style.borderBottomStyle = borderBottomStyle || '';
        }
        if (borderLeftColor && borderLeftWidth && borderLeftStyle) {
          elems[index].style.borderLeftColor = borderLeftColor || '';
          elems[index].style.borderLeftWidth = borderLeftWidth || '';
          elems[index].style.borderLeftStyle = borderLeftStyle || '';
        }
        if (borderRightColor && borderRightWidth && borderRightStyle) {
          elems[index].style.borderRightColor = borderRightColor || '';
          elems[index].style.borderRightWidth = borderRightWidth || '';
          elems[index].style.borderRightStyle = borderRightStyle || '';
        }
        if (borderTopColor && borderTopWidth && borderTopStyle) {
          elems[index].style.borderTopColor = borderTopColor || '';
          elems[index].style.borderTopWidth = borderTopWidth || '';
          elems[index].style.borderTopStyle = borderTopStyle || '';
        }
      }
    }, 0);
  };
  var ChangeSelectedStyle = function ChangeSelectedStyle() {
    //选中下拉框后，支持在右侧属性面板”属性”选项卡设置下拉框的选中效果。（选中后的背景色及字体颜色
    function comment(name, params) {
      setTimeout(function () {
        //1.清空其他元素的背景style
        UtilsChangeStyle('.ant-select-item-option', {
          backgroundColor: '',
          color: '',
          fontSize: ''
        });
        setTimeout(function () {
          //2.添加样式
          UtilsChangeStyle(name, params);
        }, 0);
      }, 0);
    }

    //选中的样式
    comment('.ant-select-item-option-selected', selectedStyle);
    comment('.ant-select-item', {
      color: DropColor
    });
    comment('.ant-select-item-option-selected .ant-select-item-option-active:not(.ant-select-item-option-disabled)', activeStyle);
    comment('.ant-select-item-option-disabled', disabledStyle);
  };
  //修复删除默认字段会转成对象的问题
  function ChangeArray(data) {
    var newValue = [];
    if (Array.isArray(data)) {
      data.map(function (item) {
        if (typeof item === 'object') {
          var str = Object.values(item).join('');
          newValue.push(str);
        } else {
          newValue.push(item);
        }
      });
      return newValue;
    } else {
      return data;
    }
  }
  //------------------------------带搜索框的下拉框------------------------------------------
  var handleSearch = function handleSearch(value) {
    // console.log('search:', value);
  };
  var onDropdownVisibleChange = function onDropdownVisibleChange(value) {
    setOpen(value);
  };
  var RenderSelect = function RenderSelect() {
    //基本下拉框属性
    var defaultProps = _extends({
      // style: _otherProps.style,ant-select-selection-item
      disabled: disabled,
      status: status,
      autoFocus: autoFocus,
      bordered: bordered,
      placement: placement,
      dropdownMatchSelectWidth: false,
      // open,
      notFoundContent: notFoundContent,
      size: size,
      //defaultActiveFirstOption,
      allowClear: allowClear,
      loading: loading,
      placeholder: placeholder,
      labelInValue: labelInValue,
      dropdownRender: dropdownRender,
      onDropdownVisibleChange: onDropdownVisibleChange
    }, otherProps);
    function panduan() {
      if ((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) > 0 || allowClear) {
        defaultProps.defaultValue = ChangeArray(defaultValue);
      } else if (defaultValue == '') {
        delete defaultProps.defaultValue;
        defaultProps.value = SelectValue == '' && value == '' ? defaultProps.value : [].concat(ChangeArray(SelectValue == '' ? value : SelectValue));
      }
    }
    if (value == '' && SelectValue.length == 0) {
      panduan();
      defaultProps.value == "" ? delete defaultProps.value : null;
      // console.log(defaultProps,'---defaultProps')
    } else if (!value) {
      //value 为空
      panduan();
    } else {
      defaultProps.value = ChangeArray(SelectValue == '' ? value : SelectValue);
    }

    //下拉箭头showArrow 和loading 也互斥
    showArrow ? defaultProps.showArrow = showArrow : defaultProps.loading = loading;
    //open为false 会影响 allowClear
    // open ? defaultProps.open =open:defaultProps.defaultOpen =defaultOpen
    if (['Search'].includes(mode)) {
      var searchProps = _extends({
        showSearch: showSearch01,
        options: options,
        loading: loading,
        optionLabelProp: optionLabelProp,
        optionFilterProp: optionFilterProp,
        onChange: handleChange,
        onSearch: handleSearch,
        placeholder: placeholder
      }, defaultProps);

      // console.log(searchProps, '----------...searchProps');
      return /*#__PURE__*/React.createElement(Search, _extends({}, searchProps, {
        filterSort: function filterSort(optionA, optionB) {
          var _optionA$label, _optionB$label;
          return ((_optionA$label = optionA === null || optionA === void 0 ? void 0 : optionA.label) !== null && _optionA$label !== void 0 ? _optionA$label : '').toLowerCase().localeCompare(((_optionB$label = optionB === null || optionB === void 0 ? void 0 : optionB.label) !== null && _optionB$label !== void 0 ? _optionB$label : '').toLowerCase());
        }
      }));
    } else if (['multiple', 'tags'].includes(mode)) {
      //多选下拉框
      var modeProps = _extends({
        mode: mode,
        maxTagCount: maxTagCount,
        maxTagPlaceholder: maxTagPlaceholder,
        maxTagTextLength: maxTagTextLength,
        autoClearSearchValue: autoClearSearchValue,
        tokenSeparators: tokenSeparators,
        tagRender: tagRender,
        options: hideSelected ? filterOptions : options
      }, defaultProps);
      // console.log(modeProps, '----------...modeProps');
      return /*#__PURE__*/React.createElement(_Select, modeProps);
    } else if (['TwoSelect'].includes(mode)) {
      //联动下拉框
      var twoSelectProps = _extends({
        options: options
      }, defaultProps);
      // console.log(twoSelectProps, '----------...twoSelectProps');
      return /*#__PURE__*/React.createElement(TwoSelect, twoSelectProps);
    } else {
      defaultProps.options = options;
      // console.log(defaultProps,'----defaultProps')
      return /*#__PURE__*/React.createElement(_Select, _extends({}, defaultProps, {
        dropdownStyle: {
          backgroundColor: DropbackgroundColor
        }
      }));
    }
  };
  function autoSize(value1, value2) {
    var Value = value1;
    Value = "calc(" + (value1 || '200px') + " + " + (value2 || '0px') + ")";
    // console.log(Value);
    return Value;
  }
  var layoutStyle = _extends({}, style, {
    height: _otherProps.style.height,
    width: autoSize(_otherProps.style.width, _otherProps.style.paddingLeft),
    // width:_otherProps.style.width||'200px',
    display: _otherProps.style.display || displayStyle ? 'none' : 'inline-block' || '',
    alignItems: _otherProps.style.alignItems || '',
    flexDirection: _otherProps.style.flexDirection,
    flexWrap: _otherProps.style.flexWrap,
    justifyContent: _otherProps.style.justifyContent,
    marginBottom: _otherProps.style.marginBottom,
    marginRight: _otherProps.style.marginRight,
    marginTop: _otherProps.style.marginTop,
    marginLeft: _otherProps.style.marginLeft,
    paddingTop: _otherProps.style.paddingTop,
    paddingBottom: _otherProps.style.paddingBottom,
    paddingLeft: _otherProps.style.paddingLeft,
    paddingRight: _otherProps.style.paddingRight
  });
  return /*#__PURE__*/React.createElement("div", {
    id: ID,
    style: layoutStyle
  }, RenderSelect());
};
antSelect.displayName = 'antSelect';
export default antSelect;
export function uuid() {
  return (Math.random() * 1e6 >> 0).toString(36);
}