@beisen/recruit-auto-tree/lib/index.js

import "core-js/modules/es6.object.assign";
import "core-js/modules/es7.array.includes";
import "core-js/modules/es6.string.includes";
import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es6.function.name";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import React, { Component } from 'react';
import ReactDom, { findDOMNode } from 'react-dom';
import './index.css';
import Tree from '@beisen-platform/tree';
import CommonMount from '@beisen-platform/common-mount';
import debounce from '@beisen/es6-promise-debounce';
import { getSearchData, getCommonInputData, getHightLightData, setRealNode, getSysVersion, setMaskStyle, renderAutoUl, pushLi, getElByClass, renderTree } from './constant';
import SearchFilters from './search_Filters.js';
import AutoFormInput from './autoForm_Input.js';
import FindAllpop from './FindAll_pop.js';
import Loading from '@beisen-platform/loading';
import Search from '@beisen-platform/search';
import Tip from "@beisen-platform/platform-tip";
import CommonLabel from '@beisen-platform/common-label';
var offset = {};
window.autoId;

var AutoTree =
/*#__PURE__*/
function (_Component) {
  _inherits(AutoTree, _Component);

  function AutoTree(props) {
    var _this;

    _classCallCheck(this, AutoTree);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(AutoTree).call(this, props));

    _this.returnAutoLi = function (bool) {
      var _this$state = _this.state,
          index = _this$state.index,
          isFocus = _this$state.isFocus,
          inputValue = _this$state.inputValue,
          searchValue = _this$state.searchValue,
          showTree = _this$state.showTree,
          autoTreeItems = _this$state.autoTreeItems,
          hasClick = _this$state.hasClick;
      var _this$props = _this.props,
          autoTreeData = _this$props.autoTreeData,
          componentId = _this$props.componentId,
          sync = _this$props.sync,
          sideTip = _this$props.sideTip,
          hiddenTip = _this$props.hiddenTip,
          single = _this$props.single,
          status = _this$props.status;

      var sessionData = _this.getSessionData(componentId);

      var dataResult = sync ? autoTreeItems : autoTreeData;

      if (dataResult != undefined && dataResult.length != 0) {
        _this.renderParents_Node = dataResult[0].pname == undefined ? false : true;
      }

      var itemClass = _this.renderParents_Node ? "auto-tree__item " : "auto-tree__item_notShow ";
      var ifbool = dataResult == undefined || dataResult.length == 0 && isFocus == true && sessionData != null && sessionData.length > 0;
      var autoLi = [];
      if (bool) ifbool = (dataResult == undefined || dataResult.length == 0) && !single && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == true || inputValue == '' && isFocus == true && sessionData != null && !single && sessionData.length > 0 && hasClick == false;

      if (ifbool) {
        for (var i = 0; i < sessionData.length; i++) {
          var holdon_class = i == index ? 'li-hold-on' : '';
          pushLi(autoLi, itemClass, holdon_class, i, sessionData[i].id, sessionData[i].name, sideTip, hiddenTip, -1, {}, {}, {}, _this.renderParents_Node, sessionData[i].pname, _this.props);
        }
      } else if (dataResult != undefined) {
        //searchValue输入框搜索的值,text返回的值
        var searchInputValue = status == 'search' ? searchValue : single ? inputValue : showTree ? searchValue : inputValue;

        for (var _i = 0; _i < dataResult.length; _i++) {
          autoLi = getHightLightData(index, dataResult[_i], searchInputValue, autoLi, _i, _this.renderParents_Node, sideTip, hiddenTip, _this.props);
        }
      }

      _this.autoLi = autoLi;
      return autoLi;
    };

    _this.clearResultsData = function (index) {
      var _resultsData = _this.state.resultsData;
      var _hasCount = _this.state.hasCount;
      if (_hasCount == 0) return;

      if (index == undefined) {
        var _tempArr = _this._tempClosed.concat(_resultsData);

        _this._tempClosed = _tempArr;
        _resultsData.length = 0;
        _hasCount = 0;
      } else {
        _this._tempClosed.push(_resultsData[index]);

        _resultsData.splice(index, 1);

        _hasCount = _hasCount - 1;
      }

      _this.setState({
        resultsData: _resultsData,
        hasCount: _hasCount
      });
    };

    _this.handlerOver = function (event) {
      var dom = findDOMNode(_this.refs.autoForm_ref.refs.mouseIconClose);

      if (dom && dom.style.display == 'block' || _this.state.isFocus || !_this.state.inputValue || _this.props.disabled) {
        return;
      } else {
        _this.setState({
          isShowMouseOverIcon: true
        });
      }
    };

    _this.handlerOut = function (event) {
      var node = event.target;

      if (node && node.nodeName.toLowerCase() == 'span' || _this.props.disabled) {
        return;
      } else {
        _this.setState({
          isShowMouseOverIcon: false
        });
      }
    };

    _this.findAll_submit = function () {
      var _this$props2 = _this.props,
          treeData = _this$props2.treeData,
          submitCallBack = _this$props2.submitCallBack;

      _this.unmountMask();

      if (_this.state.resultsData.length === 0) {
        _this.setState({
          searchValue: '',
          defaultPlaceholder: '请选择'
        }); //清空打开弹窗后已选项

      } else {
        _this.setState({
          searchValue: '',
          defaultPlaceholder: ''
        }); //清空打开弹窗后已选项

      } //清空打开弹窗后已选项


      _this._tempSeleted = [];
      _this._tempClosed = [];
      treeData.clearTreeData && treeData.clearTreeData();
      submitCallBack && submitCallBack(_this.state.resultsData);
    };

    _this.findAll_cancle = function () {
      var self = _assertThisInitialized(_assertThisInitialized(_this));

      var _this$props3 = _this.props,
          treeData = _this$props3.treeData,
          cancelCallBack = _this$props3.cancelCallBack;
      var resultsData = _this.state.resultsData;
      var _resultsData = [];
      var _temLength = self._tempSeleted.length;
      var _tempClosed = self._tempClosed;

      _this.unmountMask();

      _this.setState({
        searchValue: ''
      }); //将在弹窗内删除的加入到已选数据中


      var _tempArr = resultsData.concat(_tempClosed);

      resultsData = _tempArr;
      var _resLength = resultsData.length; //将在弹窗内选择的从已选数据中删除

      for (var i = 0; i < _resLength; i++) {
        var flag = false;
        var it = resultsData[i];

        for (var j = 0; j < _temLength; j++) {
          var item = self._tempSeleted[j];

          if (it.id == item) {
            flag = true;
          }
        }

        if (!flag) _resultsData.push(it);

        if (_resultsData.length === 0) {
          _this.setState({
            defaultPlaceholder: '请选择'
          });
        }
      } //清空打开弹窗后已选项


      self._tempClosed = [];
      treeData.clearTreeData && treeData.clearTreeData();

      _this.setState({
        resultsData: _resultsData,
        hasCount: _resultsData.length
      });

      cancelCallBack && cancelCallBack(_resultsData);
    };

    _this.renderMask = function () {
      var _this$state2 = _this.state,
          searchValue = _this$state2.searchValue,
          autoTreeItems = _this$state2.autoTreeItems,
          single = _this$state2.single;
      var _this$props4 = _this.props,
          treeData = _this$props4.treeData,
          autoTreeData = _this$props4.autoTreeData,
          sync = _this$props4.sync;
      var dataResult = sync ? autoTreeItems : autoTreeData;

      var autoLi = _this.returnAutoLi();

      var popResult_style = single ? {
        'width': '100%'
      } : {};

      var _showTree = searchValue.length != 0 && dataResult != undefined && dataResult.length > 0;

      var popUl = _showTree ? React.createElement("ul", {
        className: "pop-auto-result",
        style: popResult_style,
        onClick: _this.itemClick
      }, autoLi) : React.createElement(Tree, _extends({}, treeData, {
        onClick: _this.treeItemClick
      }));
      var findAll_Data = {
        self: _assertThisInitialized(_assertThisInitialized(_this)),
        popUl: popUl,
        findAll_cancle: _this.findAll_cancle,
        findAll_submit: _this.findAll_submit,
        single: single
      };
      var autoTreeMask = React.createElement("div", null, React.createElement(FindAllpop, findAll_Data), React.createElement("div", {
        className: "AutoTree-mask "
      }));
      ReactDom.render(React.createElement("div", null, autoTreeMask), document.getElementById('AutoTree_Mask'));
    };

    _this.addClass = function (event) {
      // debugger
      _this.findAll();

      var isIE11 = /Trident\/7\./.test(navigator.userAgent);
      var _this$props5 = _this.props,
          focusCallBack = _this$props5.focusCallBack,
          componentId = _this$props5.componentId,
          disabled = _this$props5.disabled;
      var single = _this.state.single;
      _this.clickScroll = true;
      if (disabled || _this.state.isFocus == true) return;

      var self = _assertThisInitialized(_assertThisInitialized(_this));

      self.tar = single ? self.refs.autoForm_ref.refs.autoTreeInput : self.refs.autoForm_ref.refs.autoTree_commonInput;
      window.autoId = componentId;
      if (!single) self.addAndRemoveListen(true, true);
      document.addEventListener('mousedown', self.handelOnMouseDown);
      self.setState({
        isActive: true,
        isFocus: isIE11 ? false : true,
        isShow: false,
        autoTreeItems: [],
        showPanel: false
      });
      self['domState' + componentId] = self.state.isFocus == false ? true : false;
      focusCallBack && focusCallBack(event);
    };

    _this.editInput_focus = function () {
      var edit_input = _this.props.single ? _this.refs.autoForm_ref.refs.autoTreeInput : _this.refs.autoForm_ref.refs.autoTree_commonInput;
      var isIE11 = /Trident\/7\./.test(navigator.userAgent);

      _this.setState({
        isFocus: isIE11 ? false : true
      });

      _this.addClass(edit_input);
    };

    _this.handelOnMouseDown = function (event) {
      var _this$props6 = _this.props,
          status = _this$props6.status,
          single = _this$props6.single,
          componentId = _this$props6.componentId,
          treeData = _this$props6.treeData,
          isSearchAutoTreeEdit = _this$props6.isSearchAutoTreeEdit;

      var self = _assertThisInitialized(_assertThisInitialized(_this));

      var result_ul = status == 'edit' ? single ? getElByClass('autotree__tree-panel') : getElByClass('auto-result-container') : getElByClass('auto-result-container-search');
      var inputDom = _this.refs.AutoTree;
      _this.clickScroll = result_ul && result_ul.contains(event.target) || inputDom && inputDom.contains(event.target) && !inputDom.querySelector(".form-item__title").contains(event.target) ? false : true;

      if (event.target.className.indexOf("icon-foldup") != -1) {
        setTimeout(function () {
          self['domState' + componentId] = true;
        }, 100);
      }

      if (status == 'edit' && single) {
        if (_this.clickScroll) {
          _this['domState' + componentId] = false;

          _this.unmountComponent(componentId);

          if (single && !isSearchAutoTreeEdit) {
            treeData.clearTreeData && treeData.clearTreeData();
          }

          document.removeEventListener('mousedown', _this.handelOnMouseDown);
          setTimeout(function () {
            self._tempCleared = false;
            self.setState({
              isActive: false,
              isFocus: false
            });
          }, 300);
        }
      }
    };

    _this.removeClass = function (event) {
      var self = _assertThisInitialized(_assertThisInitialized(_this));

      var _this$props7 = _this.props,
          componentId = _this$props7.componentId,
          blurCallBack = _this$props7.blurCallBack;
      var _this$state3 = _this.state,
          status = _this$state3.status,
          single = _this$state3.single;
      setTimeout(function () {
        if (self._tempCleared) return;
        var isShow_Value = single ? false : true;
        if (!single) self['domState' + componentId] = false;
        self.setState({
          isActive: false,
          isFocus: false,
          isShow: isShow_Value
        });

        if (single && window.autoId == componentId && self.clickScroll) {
          self.unmountComponent(componentId);
          document.removeEventListener('mousedown', self.handelOnMouseDown);
        }

        if (single && self.clickScroll) self.addAndRemoveListen(true, false); // if (self.state.hasClick==false) self.setState({inputValue: ''});
      }, 300);
      if (status == 'edit' && single) _this['domState' + componentId] = false;
      blurCallBack && blurCallBack(event);
    };

    _this.addAndRemoveListen = function (remove, add) {
      if (remove) document.removeEventListener('click', _this.onClose);
      if (add) document.addEventListener('click', _this.onClose);
    };

    _this.filterData = function (filterCondition) {
      var autoTreeItems = _this.props.autoTreeData;
      var filterData = filterCondition == '' ? [] : autoTreeItems.filter(function (item) {
        return item.name.includes(filterCondition);
      });
      filterData.length > 0 ? _this.setState({
        autoTreeItems: filterData
      }) : _this.setState({
        autoTreeItems: []
      });
    };

    _this.handleChange = function (val) {
      var _this$props8 = _this.props,
          getAutoTreeDataAPI = _this$props8.getAutoTreeDataAPI,
          sync = _this$props8.sync,
          getAutoTreeData = _this$props8.getAutoTreeData,
          componentId = _this$props8.componentId,
          findAllSearch = _this$props8.findAllSearch;
      var filters = _this.state.filters;

      _this.setState({
        index: -1,
        showTreeResult: true,
        searchValue: val.value
      });

      findAllSearch && findAllSearch(val.value);
      if (val.value == '') return;
      _this['domState' + componentId] = true; // sync ? this.filterData(val.value) : getAutoTreeData && getAutoTreeData(getAutoTreeDataAPI,val.value,filters) ;
    };

    _this.changeFilter = function (event, target, val) {
      var _this$props9 = _this.props,
          autoTreeSearchCallBack = _this$props9.autoTreeSearchCallBack,
          componentId = _this$props9.componentId,
          defaultValueObj = _this$props9.defaultValueObj;
      var _this$state4 = _this.state,
          hasClick = _this$state4.hasClick,
          single = _this$state4.single,
          resultsData = _this$state4.resultsData;
      var temp_val = val == '' ? val : val.text;

      _this.setState({
        filters: temp_val
      });

      if (_this['val' + componentId] == null || hasClick == false) {
        _this['val' + componentId] = {
          id: defaultValueObj && defaultValueObj.id || '',
          name: defaultValueObj && defaultValueObj.name || '',
          path: defaultValueObj && defaultValueObj.path || '',
          level: defaultValueObj && defaultValueObj.level || '',
          filters: temp_val
        };
      } else if (hasClick == true) {
        _this['val' + componentId]['filters'] = temp_val;
      }

      if (!single && resultsData.length != 0) {
        for (var i = 0; i < resultsData.length; i++) {
          resultsData[i]['filters'] = temp_val;
        }

        _this.setState({
          resultsData: resultsData
        });
      }

      autoTreeSearchCallBack && autoTreeSearchCallBack(single ? _this['val' + componentId] : resultsData, temp_val);
    };

    _this.findAll = function () {
      var _this$props10 = _this.props,
          clearAutoTreeData = _this$props10.clearAutoTreeData,
          showPopCallback = _this$props10.showPopCallback,
          componentId = _this$props10.componentId;
      clearAutoTreeData();
      setMaskStyle();
      _this['domState' + componentId] = true;

      _this.setState({
        isShow: false,
        showTree: true
      });

      _this.renderMask();

      _this.unmountComponent(componentId);

      _this.addAndRemoveListen(true, false);

      showPopCallback && showPopCallback();
    };

    _this.setSessionData = function (self, componentId) {
      sessionStorage.setItem('search' + componentId, JSON.stringify(self['temp' + componentId]));
      _this.props.setSessionCallBack && _this.props.setSessionCallBack();
    };

    _this.getSessionData = function (componentId) {
      return JSON.parse(sessionStorage.getItem('search' + componentId));
    };

    _this.itemClick = function (event) {
      var _this$props11 = _this.props,
          componentId = _this$props11.componentId,
          autoTreeData = _this$props11.autoTreeData,
          itemCallBack = _this$props11.itemCallBack;
      var single = _this.state.single;
      var node = setRealNode(event);

      if (node) {
        var nodeId = node.getAttribute('data-index');
        if (!single) _this.renderDom();

        _this.commonClick_Callback(false, nodeId, componentId, autoTreeData, itemCallBack);
      }
    };

    _this.handleKeyDown = function (e) {
      var _this$props12 = _this.props,
          componentId = _this$props12.componentId,
          autoTreeData = _this$props12.autoTreeData,
          itemCallBack = _this$props12.itemCallBack,
          sync = _this$props12.sync;
      var _this$state5 = _this.state,
          index = _this$state5.index,
          showTree = _this$state5.showTree,
          autoTreeItems = _this$state5.autoTreeItems,
          isFocus = _this$state5.isFocus,
          hasClick = _this$state5.hasClick,
          inputValue = _this$state5.inputValue;
      var trueIndex = index;
      var popAutoResult = getElByClass('pop-auto-result');
      var popAutoResult_ClientHeight, maxLength, tempLength, autoResult;
      var ItemHeight = _this.renderParents_Node ? 54 : 30;

      if (popAutoResult != undefined) {
        popAutoResult_ClientHeight = popAutoResult.offsetHeight - 10;
        maxLength = parseInt(popAutoResult_ClientHeight / ItemHeight);
      }

      tempLength = showTree ? maxLength : _this.renderParents_Node ? 5 : 8;

      var sessionData = _this.getSessionData(componentId);

      var dataResult = sync ? autoTreeItems : autoTreeData;
      var ifBool = (dataResult == undefined || dataResult.length == 0) && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == true || inputValue == '' && isFocus == true && sessionData != null && sessionData.length > 0 && hasClick == false;
      dataResult = ifBool ? sessionData : dataResult;
      autoResult = getElByClass('auto-result');
      autoResult = showTree == true && popAutoResult != undefined ? popAutoResult : autoResult;

      switch (e.keyCode) {
        case 38:
          //up
          if (_this.state.index <= 0) {
            return;
          } else {
            trueIndex = --_this.state.index % _this.autoLi.length;
          }

          if (trueIndex >= tempLength - 1) {
            autoResult.scrollTop = trueIndex == tempLength - 1 ? autoResult.scrollTop - ItemHeight : (trueIndex - (tempLength - 1)) * ItemHeight;
          }

          _this.setState({
            index: trueIndex
          });

          break;

        case 40:
          //down
          if (_this.state.index == dataResult.length - 1) return;
          trueIndex = index < 0 ? 0 : ++index % _this.autoLi.length;

          if (trueIndex >= tempLength) {
            autoResult.scrollTop = dataResult.length - 1 == trueIndex ? (trueIndex - (tempLength - 1)) * ItemHeight + 44 : (trueIndex - (tempLength - 1)) * ItemHeight;
          }

          _this.setState({
            index: trueIndex
          });

          break;

        case 13:
          //enter
          if (index == -1) return;
          var nodeId = index;

          _this.commonClick_Callback(true, nodeId, componentId, dataResult, itemCallBack);

          if (_this.refs.autoForm_ref.refs.autoTreeInput) _this.refs.autoForm_ref.refs.autoTreeInput.blur();
          break;

        default:
          break;
      }
    };

    _this.clearDom = function () {
      var dom_1 = getElByClass('');
      var dom_2 = getElByClass('-arrow');

      if (dom_1 && dom_2) {
        var parNode = dom_1.parentNode;
        parNode.removeChild(dom_1);
        parNode.removeChild(dom_2);
      }
    };

    _this.commonClick_Callback = function (type, nodeId, componentId, dataResult, func) {
      // debugger
      var _this$props13 = _this.props,
          isSearchAutoTreeEdit = _this$props13.isSearchAutoTreeEdit,
          single = _this$props13.single,
          status = _this$props13.status,
          showDropDown = _this$props13.showDropDown,
          removeComponent = _this$props13.removeComponent,
          totalCount = _this$props13.totalCount;
      _this['domState' + componentId] = true;
      var _resultsData = _this.state.resultsData;

      var sessionData = _this.getSessionData(componentId);

      var autoTreeList = dataResult != undefined && dataResult.length > 0 ? dataResult : sessionData;

      _this.clearDom();

      for (var i = 0; i < autoTreeList.length; i++) {
        var real_Id = type == true ? i : autoTreeList[i].id;
        if (real_Id == nodeId) _this['val' + componentId] = autoTreeList[i];
      }

      if ((!isSearchAutoTreeEdit || status == 'edit' && single) && !showDropDown) _this.unmountMask();

      _this.setClickData(_this['val' + componentId].name, Object.assign({}, _this['val' + componentId]), sessionData);

      _this['val' + componentId]['filters'] = _this.state.filters; //无法点击重复选项

      var temp_resultsData = _resultsData.filter(function (child) {
        return _this['val' + componentId].id == child.id;
      });

      if (temp_resultsData.length == 0 && _resultsData.length < totalCount) _resultsData.push(_this['val' + componentId]);

      var _inputValue = _this.props.status == 'search' || _this.state.single ? _this['val' + componentId].name : '';

      _this.setState({
        inputValue: _inputValue,
        // searchValue:'',
        isFocus: false,
        itemId: nodeId,
        hasClick: true,
        resultsData: _resultsData,
        hasCount: _resultsData.length,
        showPanel: false,
        searchChange: false
      });

      if (!showDropDown) removeComponent && removeComponent();
      if (single) _this.setState({
        searchValue: _inputValue
      });
      if (_this.state.showTree) _this._tempSeleted.push(_this['val' + componentId].id);
      if (!_this.state.showTree && !_this.state.single || _this.state.single) func && func(_this.state.single ? _this['val' + componentId] : _resultsData);
    };

    _this.setClickData = function (name, value, sessionData) {
      var componentId = _this.props.componentId;
      var jsonFlag = false;

      if (sessionData != null) {
        for (var j = 0; j < sessionData.length; j++) {
          if (sessionData[j].name == name) jsonFlag = true;
        }
      }

      var tempSessionLength = sessionData == null ? 0 : sessionData.length;
      _this['temp' + componentId] = _this['temp' + componentId] == undefined ? [] : _this['temp' + componentId];

      if (tempSessionLength < 10 && jsonFlag == false) {
        _this['temp' + componentId].length == 0 ? _this['temp' + componentId].push(value) : _this['temp' + componentId].unshift(value);

        _this.setSessionData(_assertThisInitialized(_assertThisInitialized(_this)), componentId);
      } else if (tempSessionLength >= 10 && jsonFlag == false) {
        _this['temp' + componentId].pop();

        var s = value;

        _this['temp' + componentId].unshift(s);

        _this.setSessionData(_assertThisInitialized(_assertThisInitialized(_this)), componentId);
      } else {
        _this.setSessionData(_assertThisInitialized(_assertThisInitialized(_this)), componentId);
      }
    };

    _this.clearData = function (event) {
      var clearCallback = _this.props.clearCallback;

      if (_this.state.isFocus) {
        _this.setState({
          isFocus: true,
          isShow: true,
          inputValue: "",
          hasClick: false
        });
      } else {
        _this.setState({
          inputValue: "",
          isShow: false,
          hasClick: false,
          isFocus: false
        });
      }

      _this._tempCleared = true;
      clearCallback && clearCallback();
    };

    _this.unmountComponent = function (componentId) {
      // this.CommonMount.unmountBox();
      _this.setState({
        index: -1
      }); //删除监听点击外部收起下拉的回调


      _this.addAndRemoveListen(true, false);

      _this['domState' + componentId] = false;
      _this.props.unmountCallBack && _this.props.unmountCallBack();
    };

    _this.unmountMask = function () {
      _this.setState({
        showTree: false
      });

      _this.unmountComponent(_this.props.componentId);

      if (document.getElementById('AutoTree_Mask')) {
        ReactDom.unmountComponentAtNode(document.getElementById('AutoTree_Mask'));
      }
    };

    _this.onClose = function (event) {
      var self = _assertThisInitialized(_assertThisInitialized(_this));

      setTimeout(function () {
        self._tempCleared = false;
      }, 400);
      var _this$props14 = _this.props,
          status = _this$props14.status,
          onCloseCallback = _this$props14.onCloseCallback,
          componentId = _this$props14.componentId;

      if (window.autoId == componentId) {
        if (event && event.target.innerHTML == '全部查找' || event.target.innerHTML == "“查找全部”" || event.target.className.includes('icon-close')) return;
        var area = _this.tar;
        var result_ul = status == 'edit' ? getElByClass('auto-result-container') : getElByClass('auto-result-container-search');

        if (area == undefined && _this.state.showTree == false) {
          _this.setState({
            isShow: false
          });

          _this.unmountComponent(componentId);

          onCloseCallback && onCloseCallback(event);
          return;
        }

        if (area != undefined && result_ul != undefined && !area.contains(event.target) && !result_ul.contains(event.target)) {
          _this.setState({
            isFocus: false,
            isShow: false
          });

          _this.unmountComponent(componentId);

          onCloseCallback && onCloseCallback(event);
          if (_this.state.hasClick == false) _this.setState({
            inputValue: ''
          });
        }
      }
    };

    _this.itemClose = function (event, item, index) {
      var itemCloseCallBack = _this.props.itemCloseCallBack;
      var _resultsData = _this.state.resultsData;
      var _hasCount = _this.state.hasCount;
      _resultsData = _resultsData.filter(function (child) {
        return item.id != child.id;
      });

      _this.setState({
        resultsData: _resultsData,
        hasCount: _hasCount - 1
      });

      if (_resultsData.length === 0) {
        _this.setState({
          defaultPlaceholder: '请选择'
        });
      }

      itemCloseCallBack && itemCloseCallBack(_resultsData);
    };

    _this.treeItemClick = function (e, valObj) {
      //点击树形结构内容
      var _this$props15 = _this.props,
          componentId = _this$props15.componentId,
          itemCallBack = _this$props15.itemCallBack,
          status = _this$props15.status,
          treeData = _this$props15.treeData,
          showDropDown = _this$props15.showDropDown,
          isSearchAutoTreeEdit = _this$props15.isSearchAutoTreeEdit,
          removeComponent = _this$props15.removeComponent,
          totalCount = _this$props15.totalCount;
      _this['domState' + componentId] = true;
      var single = _this.state.single;

      if (single && !isSearchAutoTreeEdit) {
        treeData.clearTreeData && treeData.clearTreeData();
      }

      var self = _assertThisInitialized(_assertThisInitialized(_this));

      var _resultsData = _this.state.resultsData;
      var currentDataLength = _resultsData.length;

      var sessionData = _this.getSessionData(componentId);

      _this.setClickData(valObj.name, Object.assign({}, valObj), sessionData);

      if (_this['val' + componentId] != null) {
        valObj.filters = _this['val' + componentId].filters;
      }

      _this['val' + componentId] = valObj;

      if ((!isSearchAutoTreeEdit && single || status == 'edit' && single) && !showDropDown) {
        _this.unmountMask();
      }

      var temp_resultsData = _resultsData.filter(function (child) {
        return _this['val' + componentId].id == child.id;
      }); // 选择到最大数量给提示 


      if (currentDataLength === totalCount) {
        _this.setState({
          isShowSaveTips: true,
          tipsTitle: '最多只能选择' + totalCount + '项'
        });
      } // 父级选择后子级不能选


      var temp_falg = true;

      if (temp_resultsData.length == 0 && _resultsData.length < totalCount) {
        _resultsData.map(function (child) {
          if (valObj.pid == child.id) {
            temp_falg = false;
          }
        });

        if (temp_falg) {
          _resultsData.push(_this['val' + componentId]);
        } else {
          _this.setState({
            isShowSaveTips: true,
            tipsTitle: '需删除父级后，才可选择子级'
          });
        }
      } // 父子级关系，选中父级，子级删除


      var real_resultsData = [];

      if (currentDataLength < totalCount) {
        real_resultsData = _resultsData.filter(function (child) {
          return valObj.id !== child.pid;
        });
      } else {
        real_resultsData = _resultsData;
      }

      var _inputValue = status == 'search' || single ? valObj.name : '';

      if (status == 'search') {
        _this.setState({
          nodeValue: valObj.name,
          searchValue: _inputValue,
          hasClick: true,
          resultsData: real_resultsData,
          hasCount: real_resultsData.length,
          showPanel: false
        }, _this.forceUpdate());
      } else {
        _this.setState({
          nodeValue: valObj.name,
          inputValue: _inputValue,
          searchValue: _inputValue,
          hasClick: true,
          resultsData: real_resultsData,
          hasCount: real_resultsData.length,
          showPanel: false,
          isFocus: false
        }, _this.forceUpdate());
      }

      if (_this.state.showTree) _this._tempSeleted.push(_this['val' + componentId].id);

      if (!showDropDown) {
        removeComponent && removeComponent();
      }

      if (single && !isSearchAutoTreeEdit || status == 'search' || isSearchAutoTreeEdit) {
        itemCallBack && itemCallBack(_this['val' + componentId]);
      }

      setTimeout(function () {
        self['domState' + self.props.componentId] = false;
      }, 500);
    };

    _this.handelSubmit = function () {
      var searchValue = _this.state.searchValue;
      var _this$props16 = _this.props,
          isSearchAutoTreeEdit = _this$props16.isSearchAutoTreeEdit,
          treeData = _this$props16.treeData;

      if (isSearchAutoTreeEdit) {
        _this.unmountMask();

        treeData.clearTreeData && treeData.clearTreeData();
      }

      var val;

      if (_this['val' + _this.props.componentId] && searchValue == _this['val' + _this.props.componentId].name) {
        val = _this['val' + _this.props.componentId];
      } else {
        val = null;
      }

      _this.props.searchSubmitCallBack && _this.props.searchSubmitCallBack(val);
    };

    _this.state = {
      isFocus: props && props.defaultStatus || false,
      // 输入框样式控制
      isShowMouseOverIcon: false,
      inputValue: props && props.defaultValue || '',
      //input表单值
      itemId: '',
      isShow: true,
      showTree: false,
      //是否显示弹窗
      status: props && props.status || 'edit',
      showTreeResult: false,
      //是否显示弹窗内的搜索结果
      searchValue: "",
      autoTreeItems: [],
      filters: '',
      //筛选条件
      hidden: props && props.hidden || false,
      hasClick: props.defaultValue == '' || props.defaultValue == undefined ? false : true,
      index: -1,
      //键盘事件：当前选择项的index
      hasCount: props && props.resultsData.length || 0,
      resultsData: props && props.resultsData || [],
      //已选数据
      isActive: false,
      single: props && props.single || props.single == undefined ? true : false,
      defaultPlaceholder: props && (props.resultsData.length > 0 ? '' : props.placeholder) || '',
      showPanel: props.status == 'search' ? true : false,
      searchChange: false,
      isShowSaveTips: false,
      tipsTitle: ''
    };
    _this._tempClosed = [];
    _this._tempSeleted = [];
    _this._tempCleared = false;
    _this.autoLi = [];
    _this.clickScroll = true;
    _this.chrome_tag = true;
    _this.renderParents_Node = false;
    _this['temp' + props.componentId] = [];
    sessionStorage.setItem('search' + props.componentId, JSON.stringify(_this['temp' + props.componentId]));
    _this['val' + props.componentId] = props && props.defaultValueObj || null;
    _this.tar = null;

    _this.createDom();

    _this['domState' + props.componentId] = false; // this.CommonMount = new CommonMount({
    //   containerId: 'AutoTree_ul',// 容器ID
    //   follow: true,// 是否滚动跟随，默认true
    // 	fixed: true,// 定位：fixed，false时为absolute
    // 	attributes: {
    // 		'data-logic-container': this.props.logicContainerId || null
    // 	}
    // });

    _this.onChange = _this.onChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.searchClick = _this.searchClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.onChange = debounce(_this.onChange, 200);
    return _this;
  }

  _createClass(AutoTree, [{
    key: "createDom",
    value: function createDom() {
      if (document.getElementById('AutoTree_Mask')) return;
      var mDiv = document.createElement('div');
      mDiv.id = 'AutoTree_Mask';
      document.body.appendChild(mDiv);
    } //根据数据生成li，并且返回autoLi对象

  }, {
    key: "onChange",
    //外部input框onchange回调
    value: function onChange(event) {
      var self = this;
      var _this$props17 = this.props,
          getAutoTreeDataAPI = _this$props17.getAutoTreeDataAPI,
          sync = _this$props17.sync,
          componentId = _this$props17.componentId,
          getAutoTreeData = _this$props17.getAutoTreeData,
          changeCallBack = _this$props17.changeCallBack,
          clearCallback = _this$props17.clearCallback,
          single = _this$props17.single,
          status = _this$props17.status;
      var inputValue = status == 'search' ? event.value : event.target.value;
      var filters = this.state.filters;
      var formRef = this.refs.autoForm_ref;
      this._tempCleared = false;

      if (status == 'search' || single) {
        this.setState({
          index: -1,
          isShow: true,
          showPanel: true,
          searchChange: true,
          hasClick: false,
          searchValue: inputValue
        });
      } else {
        this.setState({
          index: -1,
          isShow: true,
          hasClick: false,
          inputValue: inputValue
        });
      }

      this['domState' + componentId] = true;
      if (formRef) this.tar = this.props.single ? formRef.refs.autoTreeInput : formRef.refs.autoTree_commonInput;
      offset = {
        zIndex: '99999',
        position: 'fixed'
      };
      if (inputValue == '') clearCallback && clearCallback(); //异步请求or 同步请求

      sync == false ? getAutoTreeData && getAutoTreeData(getAutoTreeDataAPI, inputValue, filters) : this.filterData(inputValue);
      setTimeout(function () {
        self.renderDom(false, offset);
      }, 200);
      changeCallBack && changeCallBack(event, this.state, inputValue);
    }
  }, {
    key: "onRealChange",
    value: function onRealChange(event) {
      event.persist();
      this.onChange(event);
    } //search组件内的onchange回调

  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      var _this$state6 = this.state,
          status = _this$state6.status,
          showTree = _this$state6.showTree,
          inputValue = _this$state6.inputValue,
          isFocus = _this$state6.isFocus,
          autoTreeItems = _this$state6.autoTreeItems;
      var _this$props18 = this.props,
          componentId = _this$props18.componentId,
          autoTreeData = _this$props18.autoTreeData,
          sync = _this$props18.sync,
          single = _this$props18.single;
      var popAutoResult = getElByClass('pop-auto-result'); //弹窗中搜索结果节点

      var searchContainer = getElByClass('searchContainer');
      var autoResultContainer = getElByClass('auto-result-container');
      var windowH = window.innerHeight;
      var windowW = window.innerWidth;
      var ItemHeight = this.renderParents_Node ? 54 : 30;
      var selected_Component = getElByClass('selected_Component');

      if (selected_Component) {
        selected_Component.style.width = windowW * 0.65 - 301 + 'px';
        selected_Component.style.marginLeft = '15px';
        selected_Component.style.marginTop = '15px';
      }

      if (popAutoResult != undefined) {
        var popAutoResult_ClientHeight = searchContainer.offsetHeight * 0.85 - 10;
        var maxLength = parseInt(popAutoResult_ClientHeight / ItemHeight);
        var finalHeight = maxLength * ItemHeight;
        popAutoResult.style.maxHeight = finalHeight + 'px';
      }

      if (status == 'search') {
        var reConNode = getElByClass('autoTree_Search');
        var resultNode = getElByClass('auto-result-container-search');
        var searchInput = getElByClass('autoTree-search-input');
        if (searchInput && !this.chrome_tag) searchInput.style.lineHeight = 23 + 'px';

        if (reConNode != undefined && resultNode != undefined && !showTree) {
          reConNode.style.boxShadow = '0px 3px 10px rgba(0, 0, 0, 0.15)';
        }
      }

      var dataResult = sync ? autoTreeItems : autoTreeData;

      if (status == 'status' && inputValue.length > 0 && dataResult.length == 0 && isFocus == true) {
        autoResultContainer.style.height = '360px';
      } //设置弹窗定位


      if (showTree && searchContainer != undefined) {
        var temp_Height = status == 'edit' ? 50 : 0;
        searchContainer.style.left = (windowW - searchContainer.offsetWidth) * 0.5 + 'px';
        searchContainer.style.top = '30px'; // searchContainer.style.top = (windowH-searchContainer.offsetHeight-temp_Height)*0.5 + 'px';
      }

      if (status == 'edit' && !single) {
        if (inputValue.length == 0 && isFocus == true) this['domState' + componentId] = true;
        if (showTree == true) this['domState' + componentId] = true;
      }

      var self = this;

      if (this['domState' + componentId]) {
        self.renderDom(false, offset);
      }

      if (showTree) {
        this.renderMask();
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var status = this.state.status;

      if (status == 'search') {
        var reConNode = this.refs.AutoTree;

        if (reConNode != undefined) {
          reConNode.style.boxShadow = '0px 3px 10px rgba(0, 0, 0, 0.15)';
        }

        this.setState({
          isFocus: true
        });
      }

      this.chrome_tag = parseInt(getSysVersion().chrome) >= 50; //初次渲染input框为onfocus状态

      if (this.props.defaultStatus) {
        this.refs.autoForm_ref.refs.autoTreeInput.focus();
      }

      ;
      setMaskStyle();
    } //接收到新数据

  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var nextAutoData = nextProps.autoTreeData;
      var nextTreeData = nextProps.treeData.treeData;
      var _this$props19 = this.props,
          autoTreeData = _this$props19.autoTreeData,
          treeData = _this$props19.treeData; //改变传入input的inputValue值

      if (nextProps.defaultValue != this.props.defaultValue && nextProps.defaultValue != this.state.inputValue) {
        this.setState({
          defaultValue: nextProps.defaultValue,
          inputValue: nextProps.defaultValue
        });

        if (nextProps.defaultValue.length == 0 && this['val' + this.props.componentId]) {
          this['val' + this.props.componentId].filters = '';
        }
      } //autoTreeData数据变化时改变state


      if (nextAutoData != undefined && autoTreeData != undefined && nextAutoData.length != autoTreeData.length) {
        this.setState({
          showPanel: true
        });
      } //treeData数据变化时改变state


      if (nextTreeData != undefined && treeData.treeData != undefined && nextTreeData.length != treeData.treeData.length) {
        this.setState({
          showPanel: true
        });
      }
    } //render下拉框

  }, {
    key: "renderDom",
    value: function renderDom(temp) {
      var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var self = this;
      var _this$props20 = this.props,
          status = _this$props20.status,
          single = _this$props20.single,
          isSearchAutoTreeEdit = _this$props20.isSearchAutoTreeEdit,
          showDropDown = _this$props20.showDropDown,
          DropDownData = _this$props20.DropDownData;
      var _this$state7 = this.state,
          isShow = _this$state7.isShow,
          inputValue = _this$state7.inputValue,
          searchChange = _this$state7.searchChange,
          showPanel = _this$state7.showPanel;

      if (status != 'search') {
        if (single) {
          var ul_Content;
          var autoLi = this.returnAutoLi(true);
          var autoLiChild = autoLi.length > 0 ? autoLi : '';
          if (isShow) ul_Content = autoLi.length == 0 && inputValue.length > 0 ? React.createElement("div", {
            className: "findNothing empty-con"
          }) : autoLiChild;
          var searchCom = React.createElement(SearchFilters, {
            DropDownData: DropDownData,
            isSearchAutoTreeEdit: isSearchAutoTreeEdit,
            changeFilter: this.changeFilter,
            showDropDown: showDropDown,
            handelSubmit: this.handelSubmit,
            isPanelShow: isShow
          });
          renderTree(self, temp, offset, self.treeItemClick, ul_Content, self.itemClick, searchChange, searchCom, showPanel);
        } else {
          renderAutoUl(self, temp, offset);
        }
      }
    }
  }, {
    key: "searchClick",
    value: function searchClick(event) {
      var showPanel = this.state.showPanel;

      if (!showPanel) {
        this.setState({
          showPanel: true
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state8 = this.state,
          isFocus = _this$state8.isFocus,
          inputValue = _this$state8.inputValue,
          isShow = _this$state8.isShow,
          searchValue = _this$state8.searchValue,
          status = _this$state8.status,
          single = _this$state8.single,
          resultsData = _this$state8.resultsData,
          isShowMouseOverIcon = _this$state8.isShowMouseOverIcon,
          defaultPlaceholder = _this$state8.defaultPlaceholder,
          showPanel = _this$state8.showPanel,
          searchChange = _this$state8.searchChange,
          isShowSaveTips = _this$state8.isShowSaveTips,
          tipsTitle = _this$state8.tipsTitle;
      var _this$props21 = this.props,
          showDropDown = _this$props21.showDropDown,
          errorMsg = _this$props21.errorMsg,
          showText = _this$props21.showText,
          errorStatus = _this$props21.errorStatus,
          placeholder = _this$props21.placeholder,
          autoTreeData = _this$props21.autoTreeData,
          isSearchAutoTreeEdit = _this$props21.isSearchAutoTreeEdit,
          readOnly = _this$props21.readOnly,
          treeData = _this$props21.treeData,
          componentId = _this$props21.componentId,
          DropDownData = _this$props21.DropDownData,
          disabled = _this$props21.disabled,
          defaultValue = _this$props21.defaultValue;
      var ul_Content;
      var autoLi = this.returnAutoLi(true);
      var autoLiChild = autoLi.length > 0 ? autoLi : '';

      var _defaultValue = resultsData.length == 0 ? defaultValue || '' : '';

      var cInputData = getCommonInputData(this.state.isActive, defaultPlaceholder, _defaultValue, disabled, errorStatus, errorMsg, this.state.resultsData, this.itemClose, this.onChange, this.addClass, this.removeClass);
      var autoTreeSum = autoTreeData ? autoTreeData : [];
      var assignTreeData = Object.assign({}, treeData, {
        style: {
          "height": "325px"
        }
      });

      if (isShow) {
        ul_Content = autoLi.length == 0 && inputValue.length > 0 ? React.createElement("div", {
          className: "findNothing empty-con"
        }) : autoLiChild;
      }

      var tipProps = {
        infoType: 'warning',
        disappearTime: '3000',
        isAutomaticCloseTip: true,
        title: tipsTitle,
        hide: function hide() {
          _this2.setState({
            isShowSaveTips: false
          });
        }
      };
      return React.createElement("div", null, React.createElement("div", {
        ref: "AutoTree",
        onKeyDown: this.handleKeyDown,
        className: 'field auto-tree' + (status == 'search' ? ' autoTree_Search' : '')
      }, status == 'edit' ? React.createElement("div", {
        className: status == 'edit' ? 'innerAutoTree' : ''
      }, React.createElement("div", {
        className: 'form-item ' + (errorStatus && single ? 'base-input-error-label' : '')
      }, status == 'edit' ? React.createElement(CommonLabel, this.props) : '', React.createElement(AutoFormInput, {
        status: status,
        isShowMouseOverIcon: isShowMouseOverIcon,
        isFocus: isFocus,
        disabled: disabled,
        single: single,
        showDropDown: showDropDown,
        placeholder: defaultPlaceholder,
        inputValue: inputValue,
        defaultValue: defaultValue,
        errorMsg: errorMsg,
        showText: showText,
        autoId: window.autoId,
        componentId: componentId,
        DropDownData: DropDownData,
        errorStatus: errorStatus,
        commmonInput_Data: cInputData,
        handlerOver: this.handlerOver,
        readOnly: readOnly,
        handlerOut: this.handlerOut,
        clearData: this.clearData,
        addClass: this.addClass,
        editInput_focus: this.editInput_focus,
        removeClass: this.removeClass,
        onChange: this.onRealChange.bind(this),
        findAll: this.findAll,
        changeFilter: this.changeFilter,
        isSearchAutoTreeEdit: isSearchAutoTreeEdit,
        ref: "autoForm_ref"
      }))) : React.createElement("div", {
        className: "auto-tree__search-panel"
      }, React.createElement(Search, _extends({}, getSearchData(searchValue, showPanel ? true : false, true), {
        onChange: this.onChange,
        onClick: this.searchClick
      })), this.props.isFetching ? React.createElement("div", {
        style: {
          "maxHeight": '310px',
          'overflowY': 'scroll',
          backgroundColor: "#FFF",
          height: '310px'
        }
      }, React.createElement(Loading, {
        type: "small"
      })) : searchChange ? searchValue.length > 0 && autoTreeSum.length > 0 ? React.createElement("div", {
        className: "auto-result-container-search",
        style: {
          display: showPanel ? 'block' : 'none'
        }
      }, React.createElement("ul", {
        className: "auto-result",
        onClick: this.itemClick
      }, ul_Content)) : searchValue.length > 0 && autoTreeSum.length == 0 ? React.createElement("div", {
        className: "empty-con error_page"
      }) : showPanel ? React.createElement(Tree, _extends({}, assignTreeData, {
        onClick: this.treeItemClick
      })) : '' : showPanel ? React.createElement(Tree, _extends({}, assignTreeData, {
        onClick: this.treeItemClick
      })) : '', React.createElement(SearchFilters, {
        DropDownData: DropDownData,
        isSearchAutoTreeEdit: isSearchAutoTreeEdit,
        changeFilter: this.changeFilter,
        showDropDown: showDropDown,
        handelSubmit: this.handelSubmit
      }))), isShowSaveTips && React.createElement("div", {
        style: {
          "z-index": '999999'
        }
      }, React.createElement(Tip, tipProps), " "));
    }
  }]);

  return AutoTree;
}(Component);

export { AutoTree as default };