@beisen/ethos/lib/user-selector/MultiModel.js

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp; /* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _ParItems = require('./ParItems');

var _ParItems2 = _interopRequireDefault(_ParItems);

var _UserItems = require('./UserItems');

var _UserItems2 = _interopRequireDefault(_UserItems);

var _search = require('../search');

var _search2 = _interopRequireDefault(_search);

var _tabComponent = require('../tab-component');

var _tabComponent2 = _interopRequireDefault(_tabComponent);

var _baseButton = require('../base-button');

var _baseButton2 = _interopRequireDefault(_baseButton);

var _loading = require('../loading');

var _loading2 = _interopRequireDefault(_loading);

var _commonFunc = require('../common-func');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// import BeisenScrollBar from '@beisen/beisen-scroll-bar';
var MultiModel = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(MultiModel, _Component);

  function MultiModel(props) {
    (0, _classCallCheck3.default)(this, MultiModel);

    var _this = (0, _possibleConstructorReturn3.default)(this, (MultiModel.__proto__ || (0, _getPrototypeOf2.default)(MultiModel)).call(this, props));

    _this.clickEmptyItem = function (event) {
      _this.cancelBubble(event);
      var _this$state = _this.state,
          status = _this$state.status,
          isSearch = _this$state.isSearch;

      var dataNow = '';
      if (isSearch) {
        dataNow = 'searchs';
      } else {
        switch (status) {
          case 0:
            dataNow = 'usedusers';
            break;
          case 1:
            dataNow = 'staffs';
            break;
          case 2:
            dataNow = 'departments';
            break;
          default:
            break;
        }
      }
      // 这里做控制添加  右侧滚动条置底的操作
      setTimeout(function () {
        _this.refs.usResultsCon.scrollTop = _this.refs.usResultsCon.scrollHeight;
      }, 0);

      _this.props.addResults && _this.props.addResults('#AllowSearchNull#', dataNow, undefined);
    };

    _this.deleteEmptyItem = function (event) {
      _this.cancelBubble(event);
      _this.props.clearResults && _this.props.clearResults(false, '#AllowSearchNull#');
    };

    _this.cancelBubble = function (e) {
      var evt = e || window.event;
      if (evt.cancelBubble) {
        // IE
        evt.preventDefault();
        evt.cancelBubble = true;
      } else {
        // W3C
        evt.preventDefault();
        evt.stopPropagation();
      }
    };

    _this.renderEmptySel = function () {
      if (_this.state.showEmptyItem) {
        return _react2.default.createElement(
          'div',
          { className: 'user_select_empty_sel', onClick: _this.clickEmptyItem },
          _this.props.translation.emptyText
        );
      } else {
        return '';
      }
    };

    _this.mouseActive = function (str, event) {
      if (str == 'mouseOut') {
        event.target.setAttribute('class', 'closeButton pc-sys-guanbi-nomal-svg');
      } else if (str == 'mouseOver') {
        event.target.setAttribute('class', 'closeButton pc-sys-guanbi-active-svg');
      }
    };

    _this.selectItemIsEmpty = function () {
      if (_this.props.emptyResult.length == 1) {
        return _react2.default.createElement(
          'div',
          { className: 'user_select_empty_isSel' },
          _react2.default.createElement(
            'span',
            null,
            _this.props.translation.emptyText
          ),
          _react2.default.createElement('a', { href: 'javascript:void(0)', className: 'closeButton pc-sys-guanbi-nomal-svg', onClick: _this.deleteEmptyItem, onMouseOut: _this.mouseActive.bind(_this, 'mouseOut'), onMouseOver: _this.mouseActive.bind(_this, 'mouseOver') })
        );
      } else {
        return '';
      }
    };

    _this.state = {
      status: 0, // 默认常用部门 1，2，3
      isSearch: false,
      index: -1,
      indexRight: -1,
      select: false,
      fetchingFlag: true,
      showEmptyItem: true
    };
    _this.currentEventKey = 0;
    _this.searchVal = null;
    _this.renderUsedStaffText = _this.renderUsedStaffText.bind(_this);
    _this.depClick = _this.depClick.bind(_this);
    _this.renderContents = _this.renderContents.bind(_this);
    _this.removeItem = _this.removeItem.bind(_this);
    _this.renderResults = _this.renderResults.bind(_this);
    _this.clearAll = _this.clearAll.bind(_this);
    _this.selectDep = _this.selectDep.bind(_this);
    _this.userKeyDown = _this.userKeyDown.bind(_this);
    _this.userRightKeyDown = _this.userRightKeyDown.bind(_this);
    _this.changeLen = _this.changeLen.bind(_this);
    _this.scrollOrNot = _this.scrollOrNot.bind(_this);
    _this.onMouseOver = _this.onMouseOver.bind(_this);
    _this.onMouseOut = _this.onMouseOut.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(MultiModel, [{
    key: 'scrollOrNot',


    //是否滚动－－真对部门部分
    value: function scrollOrNot(direction, trueIndex) {
      var lists = void 0,
          totalHeight = 0;
      if (direction == 'left') {
        var listParent = _reactDom2.default.findDOMNode(this.refs.partNodes);
        lists = listParent.getElementsByClassName('us-item-list');
      } else {
        var _listParent = _reactDom2.default.findDOMNode(this.refs.resultPart);
        lists = _listParent.getElementsByClassName('us-item-list');
      }
      for (var i = 0; i < trueIndex; i++) {
        totalHeight += lists[i].clientHeight;
      }
      return totalHeight > 255 ? true : false;
    }
    //部门左侧监听键盘事件

  }, {
    key: 'userKeyDown',
    value: function userKeyDown(e) {
      e.stopPropagation();
      var trueIndex = void 0;
      var usData = void 0;
      var props = this.props;
      switch (this.state.status) {
        case 0:
          //常用
          usData = props.usedusers;
          break;
        case 1:
          // 下属
          usData = props.staffs;
          break;
        case 2:
          // 部门
          var listParent = _reactDom2.default.findDOMNode(this.refs.partNodes);
          var lists = listParent.getElementsByClassName('us-item-list');
          var _trueIndex = this.state.index;
          var listLen = lists.length;
          var targetDom = listParent.getElementsByClassName('dep-hold-on')[0] || listParent.getElementsByClassName('user-hold-on')[0];
          var usDepCon = this.refs.usDepCon;
          switch (e.keyCode) {
            case 13:
              //回车
              //调用父部门的click事件。
              targetDom && targetDom.parentNode.click();
              break;
            case 38:
              //up
              if (_trueIndex <= 0) {
                _trueIndex = listLen - 1;
                usDepCon.scrollTop = usDepCon.scrollHeight;
              } else {
                _trueIndex = --_trueIndex % listLen;
                usDepCon.scrollTop -= targetDom.clientHeight;
              }
              var preIndex = _trueIndex + 1;
              if (preIndex >= listLen) {
                preIndex = 0;
              }
              var preTarDepUser = lists[_trueIndex];
              lists[preIndex].className = lists[preIndex].className.indexOf('us-department') > 0 ? 'us-item-list us-department ' : 'us-item-list us-user clearfix';
              lists[_trueIndex].className += preTarDepUser.className.indexOf('us-department') > 0 ? ' dep-hold-on' : ' user-hold-on';
              this.setState({ index: _trueIndex });
              break;
            case 40:
              //down
              if (this.state.index < 0) {
                _trueIndex = 0;
              } else {
                _trueIndex = ++this.state.index % listLen;
              }
              if (_trueIndex == 0) {
                usDepCon.scrollTop = 0;
              } else if (this.scrollOrNot('left', _trueIndex)) {
                usDepCon.scrollTop += targetDom.clientHeight;
              }
              var lastIndex = _trueIndex - 1;
              if (lastIndex < 0) {
                lastIndex = listLen - 1;
              }
              var tarDepUser = lists[_trueIndex];
              lists[lastIndex].className = lists[lastIndex].className.indexOf('us-department') > 0 ? 'us-item-list us-department ' : 'us-item-list us-user clearfix';
              lists[_trueIndex].className += tarDepUser.className.indexOf('us-department') > 0 ? ' dep-hold-on' : ' user-hold-on';
              this.setState({ index: _trueIndex });
              break;
            default:
              break;
          }
          return;
        default:
          break;
      }
      // 只适用于非部门情况下
      switch (e.keyCode) {
        case 13:
          //回车
          if (e.target.tagName != 'INPUT') {
            var tarData = usData[this.state.index];
            var dataNow = this.state.status == 0 ? 'usedusers' : 'staffs';
            this.props.addResults(parseInt(tarData.Id), dataNow);
          }
          break;
        case 38:
          //up
          if (this.state.index <= 0) {
            trueIndex = usData.length - 1;
          } else {
            trueIndex = --this.state.index % usData.length;
          }
          this.refs.usDepCon.scrollTop = trueIndex > 3 ? 50 * (trueIndex - 4) : void 0;
          this.setState({ index: trueIndex });
          break;
        case 40:
          //down
          if (this.state.index < 0) {
            trueIndex = 0;
          } else {
            trueIndex = ++this.state.index % usData.length;
            this.refs.usDepCon.scrollTop = trueIndex > 3 ? 50 * (trueIndex - 4) : void 0;
          }
          this.setState({ index: trueIndex });
          break;
        default:
          break;
      }
    }
  }, {
    key: 'onMouseOver',
    value: function onMouseOver(e, index) {
      this.setState({ index: index });
    }
  }, {
    key: 'onMouseOut',
    value: function onMouseOut(e, index) {
      this.setState({ index: index });
    }

    //部门右侧键盘事件监听

  }, {
    key: 'userRightKeyDown',
    value: function userRightKeyDown(e) {
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
      var trueIndex = this.state.indexRight;
      var listParent = _reactDom2.default.findDOMNode(this.refs.resultPart);
      var lists = listParent.getElementsByClassName('us-item-list');
      var listLen = lists.length;
      var targetDom = listParent.getElementsByClassName('dep-hold-on')[0] || listParent.getElementsByClassName('user-hold-on')[0];
      var usResultsCon = this.refs.usResultsCon;
      switch (e.keyCode) {
        case 38:
          //up
          if (trueIndex <= 0) {
            trueIndex = listLen - 1;
            usResultsCon.scrollTop = usResultsCon.scrollHeight;
          } else {
            trueIndex = --trueIndex % listLen;
            usResultsCon.scrollTop -= targetDom.clientHeight;
          }
          var preIndex = trueIndex + 1;
          if (preIndex >= listLen) {
            preIndex = 0;
          }
          var preTarDepUser = lists[trueIndex];
          lists[preIndex].className = lists[preIndex].className.indexOf('us-department') > 0 ? 'us-item-list us-department ' : 'us-item-list us-user clearfix';
          lists[trueIndex].className += preTarDepUser.className.indexOf('us-department') > 0 ? ' dep-hold-on' : ' user-hold-on';
          this.setState({ indexRight: trueIndex });
          break;
        case 40:
          //down
          if (this.state.indexRight < 0) {
            trueIndex = 0;
          } else {
            trueIndex = ++this.state.indexRight % listLen;
            // this.refs.usResultsCon.scrollTop
          }
          if (trueIndex == 0) {
            usResultsCon.scrollTop = 0;
          } else if (this.scrollOrNot('right', trueIndex)) {
            usResultsCon.scrollTop += targetDom.clientHeight;
          }
          var lastIndex = trueIndex - 1;
          if (lastIndex < 0) {
            lastIndex = listLen - 1;
          }
          var tarDepUser = lists[trueIndex];
          lists[lastIndex].className = lists[lastIndex].className.indexOf('us-department') > 0 ? 'us-item-list us-department ' : 'us-item-list us-user clearfix';
          lists[trueIndex].className += tarDepUser.className.indexOf('us-department') > 0 ? ' dep-hold-on' : ' user-hold-on';
          this.setState({ indexRight: trueIndex });
          break;
        case 13:
          //回车－－只有部门响应该事件
          //非部门，返回
          if (targetDom.className.indexOf('us-user') > -1) return;
          //调用父部门的click事件。
          targetDom && targetDom.parentNode.click();
          break;
        default:
          break;
      }
    }
    //改变index||indexRight

  }, {
    key: 'changeLen',
    value: function changeLen(that) {
      //在这里setState === die
      if (!this.refs.partNodes) return;
      var listParent = void 0;
      var lists = void 0;
      if (that) {
        var clickDomLi = _reactDom2.default.findDOMNode(that);
        var right = false;
        if (clickDomLi.parentNode.parentNode.className == 'us-results-con') {
          //右侧
          listParent = _reactDom2.default.findDOMNode(this.refs.resultPart);
          right = true;
        } else {
          //left
          listParent = _reactDom2.default.findDOMNode(this.refs.partNodes);
        }
        lists = listParent.getElementsByClassName('us-item-list');
        //把原来的选中类清空,
        var selectDep = listParent.getElementsByClassName('dep-hold-on');
        var selectUser = listParent.getElementsByClassName('user-hold-on');
        for (var i = 0; i < selectDep.length; i++) {
          selectDep[i].className = 'us-item-list us-department ';
        }
        for (var _i = 0; _i < selectUser.length; _i++) {
          selectUser[_i].className = 'us-item-list us-user clearfix ';
        }
        //并获取点击的item的index
        var clickDomDiv = clickDomLi.getElementsByClassName('us-item-list')[0];
        clickDomDiv.className = clickDomDiv.className.indexOf('us-department') > -1 ? 'us-item-list us-department dep-hold-on' : 'us-item-list us-user clearfix user-hold-on';
        for (var _i2 = 0; _i2 < lists.length; _i2++) {
          if (lists[_i2] === clickDomDiv) {
            if (right) {
              this.state.indexRight = _i2;
            } else {
              this.state.index = _i2;
            }
            return;
          }
        }
      }
    }
    // 左侧点击 事件代理 添加到右侧

  }, {
    key: 'depClick',
    value: function depClick(event) {
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
      var _state = this.state,
          status = _state.status,
          isSearch = _state.isSearch;

      var node = event.target;
      var id = void 0,
          pid = void 0,
          dataNow = void 0;
      var getParNode = function getParNode(node, target, className) {
        if (node.className == 'us-item-top') return;
        if (node.tagName == target.toUpperCase() && node.className == className) return node;
        return getParNode(node.parentNode, target, className);
      };
      if (node.className == 'sys-icon-add') {
        var parNode = getParNode(node, 'li', 'us-item us-item-department');
        id = parNode.getAttribute('data-id');
        dataNow = 'departments';
      }
      var userNode = getParNode(node, 'li', 'us-item us-item-user');
      if (userNode) {
        id = userNode.getAttribute('data-id');
        if (status == 2 && !isSearch) {
          var userParDepNode = getParNode(userNode, 'li', 'us-item us-item-department');
          pid = userParDepNode.getAttribute('data-id');
        }
        if (isSearch) {
          dataNow = 'searchs';
        } else {
          switch (status) {
            case 0:
              dataNow = 'usedusers';
              break;
            case 1:
              dataNow = 'staffs';
              break;
            case 2:
              dataNow = 'departments';
              break;
            default:
              break;
          }
        }
      }
      this.props.addResults && this.props.addResults(parseInt(id), dataNow, parseInt(pid));
    }
    /**
    * 递归选出departments中的item
    */

  }, {
    key: 'selectDep',
    value: function selectDep(dep, Id, myItem) {
      myItem = myItem;
      if (dep.Id == Id) {
        myItem.push(dep);
      } else {
        var self = this;
        var childDep = dep.childDep;
        if (childDep && childDep.length > 0) {
          for (var i = 0; i < childDep.length; i++) {
            self.selectDep(childDep[i], Id, myItem);
          }
        }
      }
      return myItem;
    }
    // 右侧渲染结果

  }, {
    key: 'renderResults',
    value: function renderResults() {
      var _this2 = this;

      var selfs = this;
      var _props = this.props,
          results = _props.results,
          getDepInfo = _props.getDepInfo,
          self = _props.self,
          addDepartment = _props.addDepartment,
          departments = _props.departments,
          isUseInitial = _props.isUseInitial,
          apiType = _props.apiType,
          urls = _props.urls,
          translation = _props.translation,
          isShowDepartmentName = _props.isShowDepartmentName;

      if (results.length == 0 && this.props.emptyResult.length == 0) return _react2.default.createElement(
        'div',
        { className: 'us-no-data' },
        _react2.default.createElement('span', { className: 'empty-con', 'data-bg-text': translation.emptyBgText })
      );
      var temp = results && results.map(function (item, index) {
        var myItem = [];
        if (item && item.PId >= -1) {
          //递归选出目标部门
          for (var i = 0; i < departments.length; i++) {
            _this2.selectDep(departments[i], item.Id, myItem);
          }
          var holdOn = index == _this2.state.indexRight ? true : false;
          return _react2.default.createElement(_ParItems2.default, (0, _extends3.default)({}, myItem[0], {
            changeLen: _this2.changeLen,
            select: _this2.state.select,
            holdOn: holdOn,
            userKeyDown: _this2.userKeyDown,
            getDepInfo: getDepInfo,
            urls: urls,
            isUseInitial: isUseInitial,
            apiType: apiType,
            addDepartment: addDepartment,
            key: index,
            isDelete: true,
            self: self,
            translation: translation
          }));
        } else {
          var _holdOn = index == _this2.state.indexRight ? true : false;
          return _react2.default.createElement(_UserItems2.default, (0, _extends3.default)({}, item, {
            translation: translation,
            holdOn: _holdOn,
            userKeyDown: _this2.userKeyDown,
            key: index,
            isDelete: true,
            isShowDepartmentName: isShowDepartmentName
          }));
        }
      });
      return temp;
    }
    // 右侧事件代理 移除单个

  }, {
    key: 'removeItem',
    value: function removeItem(event) {
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
      if (this.props.results.length == 0) return;
      var node = event.target;
      if (node.className != 'sys-icon-close') return;
      var getParNode = function getParNode(node, target) {
        if (node.tagName == target.toUpperCase()) return node;
        return getParNode(node.parentNode, target);
      };
      var parNode = getParNode(node, 'li');
      var id = parNode.getAttribute('data-id');
      this.props.clearResults && this.props.clearResults(false, parseInt(id));
    }
    // 清空所有

  }, {
    key: 'clearAll',
    value: function clearAll(event) {
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
      if (this.props.results.length == 0 && this.props.emptyResult.length == 0) return;
      this.props.clearResults && this.props.clearResults(true);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!nextProps.isFetching && nextProps.isFetching == false && this.state.fetchingFlag == true) {
        this.setState({ fetchingFlag: false });
      }
    }
    // 根据当前渲染

  }, {
    key: 'renderContents',
    value: function renderContents() {
      var _this3 = this;

      var _state2 = this.state,
          status = _state2.status,
          isSearch = _state2.isSearch,
          fetchingFlag = _state2.fetchingFlag;
      var _props2 = this.props,
          addDepartment = _props2.addDepartment,
          usedusers = _props2.usedusers,
          staffs = _props2.staffs,
          departments = _props2.departments,
          getDepInfo = _props2.getDepInfo,
          searchs = _props2.searchs,
          apiType = _props2.apiType,
          isUseInitial = _props2.isUseInitial,
          urls = _props2.urls,
          hiddenTip = _props2.hiddenTip,
          sideTip = _props2.sideTip,
          translation = _props2.translation,
          isShowDepartmentName = _props2.isShowDepartmentName;

      if (isSearch) {
        if (searchs.length == 0) {
          return _react2.default.createElement(
            'div',
            { className: 'us-no-data' },
            _react2.default.createElement('span', { className: 'empty-con', 'data-bg-text': translation.emptyBgText })
          );
        } else {
          return searchs && searchs.map(function (item, index) {
            return _react2.default.createElement(_UserItems2.default, (0, _extends3.default)({}, item, {
              onMouseOut: _this3.onMouseOut,
              onMouseOver: _this3.onMouseOver,
              userKeyDown: _this3.userKeyDown,
              key: index,
              searchs: searchs,
              isSearch: _this3.state.isSearch,
              searchVal: _this3.searchVal,
              index: index,
              translation: translation,
              isShowDepartmentName: isShowDepartmentName
            }));
          });
        }
      } else {
        switch (status) {
          case 0:
            if (usedusers.length == 0) return _react2.default.createElement(
              'div',
              { className: 'us-no-data' },
              _react2.default.createElement('span', { className: 'empty-con', 'data-bg-text': translation.emptyBgText })
            );
            return usedusers && usedusers.map(function (item, index) {
              var holdOn = index == _this3.state.index ? true : false;
              return _react2.default.createElement(_UserItems2.default, (0, _extends3.default)({
                holdOn: holdOn,
                onMouseOut: _this3.onMouseOut,
                onMouseOver: _this3.onMouseOver,
                userKeyDown: _this3.userKeyDown
              }, item, {
                key: index,
                index: index,
                translation: translation,
                isShowDepartmentName: isShowDepartmentName
              }));
            });
          case 1:
            if (staffs.length == 0) return _react2.default.createElement(
              'div',
              { className: 'us-no-data' },
              _react2.default.createElement('span', { className: 'empty-con', 'data-bg-text': translation.emptyBgText })
            );
            return staffs && staffs.map(function (item, index) {
              var holdOn = index == _this3.state.index ? true : false;
              return _react2.default.createElement(_UserItems2.default, (0, _extends3.default)({
                holdOn: holdOn,
                onMouseOut: _this3.onMouseOut,
                onMouseOver: _this3.onMouseOver,
                userKeyDown: _this3.userKeyDown
              }, item, {
                key: index,
                index: index,
                translation: translation,
                isShowDepartmentName: isShowDepartmentName
              }));
            });
          case 2:
            //需要将当前页面的数据(包括部门信息和人员信息)扁平化去匹配index
            // if(this.state.index>=0) {
            //   document.getElementsByClassName('us-item-list')[this.state.index].className += ' user-hold-on';
            // }
            var style = {
              position: 'relative',
              width: '310px',
              height: '260px',
              "borderRadius": "5px"
            };
            var isWin10 = navigator.userAgent.indexOf("Windows NT 10.0") > -1 && !!window.ActiveXObject || "ActiveXObject" in window;
            if (fetchingFlag && !isWin10) {
              return _react2.default.createElement(_loading2.default, { type: 'small', style: style });
            } else if (departments.length == 0) {
              return _react2.default.createElement(
                'div',
                { className: 'us-no-data' },
                _react2.default.createElement('span', { className: 'empty-con', 'data-bg-text': translation.emptyBgText })
              );
            }
            return departments && departments.map(function (item, index) {
              var holdOn = index == _this3.state.index ? true : false;
              return _react2.default.createElement(_ParItems2.default, (0, _extends3.default)({ ref: 'partNodes' }, item, {
                changeLen: _this3.changeLen,
                select: false,
                holdOn: holdOn,
                userKeyDown: _this3.userKeyDown,
                addDepartment: addDepartment,
                key: index,
                getDepInfo: getDepInfo,
                urls: urls,
                isUseInitial: isUseInitial,
                apiType: apiType,
                hiddenTip: hiddenTip,
                sideTip: sideTip,
                translation: translation
              }));
            });
          default:
            break;
        }
      }
    }
    /*
     */

  }, {
    key: 'renderUsedStaffText',
    value: function renderUsedStaffText() {
      var _state3 = this.state,
          status = _state3.status,
          isSearch = _state3.isSearch;
      var _props3 = this.props,
          usedusers = _props3.usedusers,
          staffs = _props3.staffs,
          searchs = _props3.searchs,
          translation = _props3.translation;

      if (isSearch == true) {
        return _react2.default.createElement(
          'p',
          { className: 'us-multi-tip' },
          translation.searchResultText,
          '\xA0',
          searchs.length == 0 ? undefined : (0, _commonFunc.transFormat)(translation.personCount, searchs.length),
          _react2.default.createElement('a', { href: 'javascript:void(0)', className: 'sys-icon-add', onClick: this.addAll.bind(this, 'searchs') })
        );
      }
      if (status == 0) {
        if (usedusers.length == 0) {
          return null;
        } else {
          return _react2.default.createElement(
            'p',
            { className: 'us-multi-tip' },
            translation.commonContactsText,
            '\xA0',
            usedusers.length == 0 ? undefined : (0, _commonFunc.transFormat)(translation.personCount, usedusers.length),
            _react2.default.createElement('a', { href: 'javascript:void(0)', className: 'sys-icon-add', onClick: this.addAll.bind(this, 'usedusers') })
          );
        }
      } else if (status == 1) {
        if (staffs.length == 0) {
          return null;
        } else {
          return _react2.default.createElement(
            'p',
            { className: 'us-multi-tip' },
            translation.commonSubordinateText,
            '\xA0',
            staffs.length == 0 ? undefined : (0, _commonFunc.transFormat)(translation.personCount, staffs.length),
            _react2.default.createElement('a', { href: 'javascript:void(0)', className: 'sys-icon-add', onClick: this.addAll.bind(this, 'staffs') })
          );
        }
      }
    }
    /*
      tab切换回调
     */

  }, {
    key: 'tabClick',
    value: function tabClick(eventKey, event) {
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
      this.refs.scrollBar && this.refs.scrollBar.reset();
      this.state.index = -1;
      var _props4 = this.props,
          isUseInitial = _props4.isUseInitial,
          apiType = _props4.apiType,
          urls = _props4.urls,
          staffs = _props4.staffs,
          departments = _props4.departments;

      if (eventKey == 1) {
        // 下属
        if (staffs.length == 0) {
          if (isUseInitial) {
            var tempStaffUrl = urls['get' + apiType]('staffUrl');
            this.props.getStaff && this.props.getStaff(tempStaffUrl);
          } else {
            this.props.getStaff && this.props.getStaff();
          }
        }
      } else if (eventKey == 2) {
        // 部门
        if (departments.length == 0) {
          if (isUseInitial) {
            var tempDepartmentUrl = urls['get' + apiType]('departmentUrl');
            this.props.getDepartments && this.props.getDepartments(tempDepartmentUrl);
          } else {
            this.props.getDepartments && this.props.getDepartments();
          }
        }
      }
      this.searchVal = null;
      this.setState({
        status: eventKey,
        isSearch: false,
        showEmptyItem: true
      });
      this.currentEventKey = eventKey;
    }
    /*
      添加所有
     */

  }, {
    key: 'addAll',
    value: function addAll(val, event) {
      event.stopPropagation();
      event.nativeEvent.stopImmediatePropagation();
      this.props.addAllUsers && this.props.addAllUsers(val);
    }
    /*
      确定回调
     */

  }, {
    key: 'sureClick',
    value: function sureClick(val) {
      val.stopPropagation();
      this.props.onSure && this.props.onSure(this.props.results.concat(this.props.emptyResult));
      this.props.closeComponent();
    }
    /*
      取消回调
     */

  }, {
    key: 'closeClick',
    value: function closeClick(val) {
      val.stopPropagation();
      this.props.onClose && this.props.onClose();
      this.props.closeComponent();
    }
    /*
      搜索回调
     */

  }, {
    key: 'getSearch',
    value: function getSearch(val) {

      if (val.value.length == 0) {
        this.setState({
          isSearch: false,
          showEmptyItem: true,
          status: this.currentEventKey
        });
      } else {
        //对外提供一个对数据format的方法，允许外界对输入对数据进行修改删减，将会在发送请求前处理,此方法需要返回处理后的数据
        var searchDataFormat = this.props.searchDataFormat;
        if (typeof searchDataFormat === "function") {
          val.event.target.value = val.value = searchDataFormat(val.value, val.event);
        }
        this.searchVal = val.value;
        var _props5 = this.props,
            apiType = _props5.apiType,
            isUseInitial = _props5.isUseInitial,
            urls = _props5.urls;

        val.value = encodeURIComponent(val.value);
        if (isUseInitial) {
          var tempUrl = urls['get' + apiType]('searchUrl') + '&filters=' + val.value;
          this.props.getSearchInfo && this.props.getSearchInfo(val.value, tempUrl);
        } else {
          this.props.getSearchInfo && this.props.getSearchInfo(val.value);
        }
        this.setState({
          isSearch: true,
          status: 0,
          showEmptyItem: false
        });
      }
    }
    /*
      search 失去焦点
     */

  }, {
    key: 'searchBlur',
    value: function searchBlur() {
      // this.setState({isSearch: false});
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.props.usedusers.length == 0) {
        this.props.getUsedInfo && this.props.getUsedInfo();
      }
      this.props.advancedModeMounted && this.props.advancedModeMounted();
    }
    /*
    render scrollBar here
     */
    // renderScrollBar(){
    //     return (
    //       <div className="us-dep-con">
    //         <BeisenScrollBar
    //             style={{'height':'inherit'}} >
    //               {this.renderUsedStaffText()}
    //               <ul className="us-item-top" onClick={this.depClick}>
    //                 {this.renderContents()}
    //               </ul>
    //         </BeisenScrollBar>
    //       </div>
    //     )
    // }
    /*
     */

  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      this.changeLen();
      // 当结果发生增加时，滚动到底部，其他情况不变
      if (prevProps.results && this.props.results && this.props.results.length > prevProps.results.length) {
        this.refs.usResultsCon.scrollTop = 99999;
      }
    }
    // 这个是空值搜索的选项

  }, {
    key: 'render',
    value: function render() {
      var _props6 = this.props,
          results = _props6.results,
          hiddenTabDepartment = _props6.hiddenTabDepartment,
          searchPlaceholde = _props6.searchPlaceholde,
          translation = _props6.translation,
          staffs = _props6.staffs;
      var status = this.state.status;

      var TabData = {
        hidden: false,
        bsStyle: 'tabs',
        activeKey: this.state.status,
        tabItems: [{
          idx: 'tab0',
          eventKey: 0,
          title: translation.tabItemTitleCommon,
          active: this.state.status == 0
        }, {
          idx: 'tab1',
          eventKey: 1,
          title: translation.tabItemTitleSubordinate,
          active: this.state.status == 1
        }, {
          idx: 'tab2',
          eventKey: 2,
          title: translation.tabItemTitleDepartment,
          active: this.state.status == 2
        }],
        callBack: this.tabClick.bind(this)
      };
      if (hiddenTabDepartment && TabData.tabItems.filter(function (item) {
        return item.title == translation.tabItemTitleDepartment;
      }).length > 0) {
        TabData.tabItems.pop();
      }
      var SearchData = {
        "placeholder": searchPlaceholde,
        "iconName": "sys-icon-sousuo",
        active: true,
        onChange: this.getSearch.bind(this),
        onBlur: this.searchBlur.bind(this)
      };
      var sureButton = {
        bsStyle: "default",
        bsSize: "small",
        active: true,
        title: translation.sureButtonTitle,
        onClick: this.sureClick.bind(this)
      };
      var cancelButton = {
        bsStyle: "weaken",
        bsSize: "small",
        active: true,
        title: translation.cancelButtonTitle,
        onClick: this.closeClick.bind(this)
      };
      var usersCount = 0,
          depCount = 0;
      results && results.forEach(function (item, index) {
        if (item && item.PId >= -1) {
          depCount++;
        } else {
          usersCount++;
        }
      });
      return _react2.default.createElement(
        'div',
        { className: 'us-multi-container', tabIndex: '0', onKeyDown: this.userKeyDown },
        _react2.default.createElement(
          'div',
          { className: 'us-search' },
          _react2.default.createElement(_search2.default, SearchData)
        ),
        _react2.default.createElement(
          'div',
          { className: 'us-content clearfix' },
          _react2.default.createElement(
            'div',
            { className: 'us-left' },
            _react2.default.createElement(_tabComponent2.default, TabData),
            _react2.default.createElement(
              'div',
              { className: 'us-dep-con', ref: 'usDepCon' },
              this.props.allowSearchNull ? this.renderEmptySel() : '',
              this.renderUsedStaffText(),
              _react2.default.createElement(
                'ul',
                { className: 'us-item-top', onClick: this.depClick },
                this.renderContents()
              )
            )
          ),
          _react2.default.createElement(
            'div',
            { className: 'us-right', tabIndex: '1', onKeyDown: this.userRightKeyDown },
            _react2.default.createElement(
              'div',
              { className: 'us-multi-result' },
              _react2.default.createElement(
                'p',
                { className: 'us-multi-human' },
                translation.multiHumanTitle,
                '\xA0\xA0',
                usersCount == 0 ? undefined : (0, _commonFunc.transFormat)(translation.personCount, usersCount),
                '\xA0\xA0',
                depCount == 0 ? undefined : (0, _commonFunc.transFormat)(translation.groupName, depCount),
                _react2.default.createElement(
                  'a',
                  { className: results.length == 0 && this.props.emptyResult.length == 0 ? 'us-multi-clearall us-multi-clearall-disabled' : 'us-multi-clearall', onClick: this.clearAll },
                  translation.clearAllSelectedText
                )
              ),
              _react2.default.createElement(
                'div',
                { className: 'us-results-con', ref: 'usResultsCon' },
                _react2.default.createElement(
                  'ul',
                  { className: 'us-item-top', onClick: this.removeItem, ref: 'resultPart' },
                  this.renderResults()
                ),
                this.selectItemIsEmpty()
              )
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'us-footer clearfix' },
          _react2.default.createElement(_baseButton2.default, sureButton),
          _react2.default.createElement(_baseButton2.default, cancelButton)
        )
      );
    }
  }]);
  return MultiModel;
}(_react.Component), _class.defaultProps = {
  searchPlaceholde: '请搜索' }, _temp);

module.exports = MultiModel;