'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp, _initialiseProps; /**
                                      * Created by baoyinghai on 3/30/17.
                                      */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MapUtils = require('../../../framework/utils/MapUtils');

var _DOMUtils = require('../../../framework/utils/DOMUtils');

var _dictCodes = require('../../../framework/constant/dictCodes');

var _index = require('../index');

var _DocumentHelper = require('../../../framework/utils/DocumentHelper');

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var MXTable = (_temp = _class = function (_React$Component) {
  _inherits(MXTable, _React$Component);

  // 行高是 45;
  function MXTable(props) {
    _classCallCheck(this, MXTable);

    var _this = _possibleConstructorReturn(this, (MXTable.__proto__ || Object.getPrototypeOf(MXTable)).call(this, props));

    _initialiseProps.call(_this);

    _this.state = _this._processData(_this.props);
    return _this;
  }

  /* eslint-disable */


  _createClass(MXTable, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var mainContent = this._getTagOfGlobal('.main-content');
      if (mainContent) {
        this.mainContentHeight = mainContent.style.height;
        mainContent.style.height = '100%';
      }
      var modalContent = this._getTagOfGlobal('.modal-content');
      if (modalContent) {
        modalContent.style.overflowY = 'hidden';
        modalContent.style.marginRight = '0px';
      }
      var modalContentBody = this._getTagOfGlobal('.modal-content-body');
      if (modalContentBody) {
        modalContentBody.style.overflowY = 'hidden';
      }

      this._initTableAfterMount(true);
      window.addEventListener('resize', this._initTableAfterMount);
      window.addEventListener('keydown', this._keyListener);

      var prefixCls = this.props.prefixCls;

      var scrollContainer = this._getTableScrollContainer();
      scrollContainer.addEventListener('scroll', this._tableScroll);
      // fixed columns
      var fixedColumnStyle = prefixCls + "-fixed-columns-table";
      var fixedColumn = this._getTag('.' + fixedColumnStyle);
      scrollContainer.addEventListener('scroll', function (e) {
        if (fixedColumn) {
          fixedColumn.scrollTop = e.target.scrollTop;
        }
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var _this2 = this;

      // const reRender = this.props.dataSource.length !== nextProps.dataSource.length || nextProps.menuCode;
      var newState = this._processData(nextProps);
      if (nextProps.rowSelection && nextProps.rowSelection.type === _dictCodes.LIST_SELECTTYPE.CHECKBOX) {
        if (nextProps.pagination.current && !this.props.pagination.current || nextProps.pagination.current !== this.props.pagination.current) {
          Object.assign(newState, { checked: false });
        } else if (nextProps.rowSelection.selectedRowKeys && nextProps.rowSelection.selectedRowKeys.length !== this.props.rowSelection.selectedRowKeys.length) {
          if (nextProps.rowSelection.selectedRowKeys.length === ((nextProps.pagination.current || 1) * nextProps.pagination.pageSize > nextProps.pagination.total ? nextProps.pagination.total % nextProps.pagination.pageSize : nextProps.pagination.pageSize)) {
            Object.assign(newState, { checked: true });
          } else {
            Object.assign(newState, { checked: false });
          }
        }
      }
      this.setState(newState, function () {
        return _this2._initTableAfterMount(_this2.props.dataSource.length !== nextProps.dataSource.length);
      });
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this._initTableAfterMount);
      window.removeEventListener('keydown', this._keyListener);
      var mainContent = this._getTagOfGlobal('.main-content');
      if (mainContent) {
        mainContent.style.height = this.mainContentHeight;
      }
      var modalContent = this._getTagOfGlobal('.modal-content');
      if (modalContent) {
        modalContent.style.overflowY = 'scroll';
        modalContent.style.marginRight = '';
      }
      var modalContentBody = this._getTagOfGlobal('.modal-content-body');
      if (modalContentBody) {
        modalContentBody.style.overflowY = 'scroll';
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          prefixCls = _props.prefixCls,
          isModal = _props.isModal;
      // 1 垂直滚动  无fixed
      // 2 有fixed

      var tableWidth = 0;
      var columns = this.state.columns;

      columns.forEach(function (col) {
        if (typeof col.width === 'number') {
          tableWidth += col.width;
        }
      });
      this.tableWidth = tableWidth;
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          { className: prefixCls + '-container', style: { overflow: 'hidden', width: '100%', position: 'relative' } },
          _react2.default.createElement(
            'div',
            { className: prefixCls + '-header-container', style: { overflow: 'hidden', position: 'absolute', zIndex: 5 } },
            _react2.default.createElement(
              'table',
              { className: prefixCls + "-fixed-thead", style: { width: tableWidth + 'px', position: 'relative' } },
              this._renderScrollColGroup(),
              this._renderScrollThead()
            )
          ),
          _react2.default.createElement(
            'div',
            { className: prefixCls + '-scroll-container', style: { overflow: 'scroll', width: 'calc(100% + 17px)', position: 'relative', paddingBottom: '17px', marginBottom: '-17px' } },
            _react2.default.createElement(
              'div',
              { className: prefixCls, style: this._getTableLayout() },
              _react2.default.createElement(
                'table',
                { style: { width: tableWidth + 'px' } },
                this._renderScrollColGroup(),
                this._renderScrollThead(),
                this._renderScrollTBody()
              )
            )
          ),
          this._renderFixedColumns(),
          this._renderResizeColumnLine()
        ),
        this._renderXScrollBar(),
        this._renderYScrollBar(),
        !isModal && _react2.default.createElement(
          'div',
          { className: this.props.prefixCls + '-pagination' },
          _react2.default.createElement(_index.Pagination, _extends({}, this.state.pagination, { onChange: this._pageChange }))
        )
      );
    }
  }]);

  return MXTable;
}(_react2.default.Component), _class.LINE_HEIGHT = 44, _class.RIGHT_KEY_CODE = 39, _class.LEFT_KEY_CODE = 37, _class.TH_HEIGHT = 44, _class.TOOL_BAR_HEIGHT = 60, _class.PAGE_BAR_HEIGHT = 60, _class.defaultProps = {
  rowSelection: null,
  columns: [],
  dataSource: [],
  sortOrder: null,
  pagination: null,
  onChange: null,
  onRowClick: null,
  prefixCls: 'mx-table-self-self',
  isModal: false,
  refStr: null
}, _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this._getTagOfGlobal = function (selector) {
    return document.querySelector(selector);
  };

  this._getTag = function (selector) {
    var cssSelector = selector;
    // 不会走  肯定不是modal
    if (_this3.props.isModal) {
      cssSelector = '.' + _this3.props.refStr + ' ' + cssSelector;
    }
    if (_this3.props.scopeStr) {
      cssSelector = ' .' + _this3.props.scopeStr + ' ' + cssSelector;
    }
    return document.querySelector(cssSelector);
  };

  this._showColumnLine = function (offsetX) {
    var prefixCls = _this3.props.prefixCls;

    var line = _this3._getTag('.' + prefixCls + '-column-line');
    if (!line) return null;
    var scroller = _this3._getTableScrollContainer();
    var offsetLeft = 0;
    if (scroller) {
      offsetLeft = scroller.scrollLeft;
    }
    line.style.left = offsetX - offsetLeft + 'px';
    line.style.display = 'block';
    return line;
  };

  this._calculatePosition = function (e) {
    var index = parseInt(e.target.getAttribute('data-thindex'), 10);
    var columns = _this3.state.columns;

    var offsetX = columns.slice(0, index).reduce(function (offset, col) {
      return offset + col.width;
    }, 0);
    return { offsetX: offsetX, columnIndex: index - 1 };
  };

  this._hiddenColumnLine = function (event, columnIndex, offset, line) {
    if (!line) return;
    line.style.display = 'none';
    var _state = _this3.state,
        columns = _state.columns,
        fixedColumns = _state.fixedColumns;

    var _modifyColunmWidth = function _modifyColunmWidth(column, index) {
      if (index === columnIndex) {
        return _extends({}, column, {
          width: column.width + offset
        });
      }
      return column;
    };
    if (columnIndex < fixedColumns.length) {
      _this3.setState({ fixedColumns: fixedColumns.map(_modifyColunmWidth) });
    }
    _this3.setState({
      columns: columns.map(_modifyColunmWidth)
    }, _this3._initTableAfterMount);
  };

  this._resizeCol = function (e) {
    var _calculatePosition = _this3._calculatePosition(e),
        offsetX = _calculatePosition.offsetX,
        columnIndex = _calculatePosition.columnIndex;

    var line = _this3._showColumnLine(offsetX);
    if (!line) return;
    var startX = _this3._rmPX(line.style.left);
    var startClientX = e.clientX;
    var currentClientX = startClientX;

    (0, _DOMUtils.addClassName)(document.querySelector('#root'), 'user-select-none');

    var _lineMoveHandler = function _lineMoveHandler(moveEvent) {
      currentClientX = moveEvent.clientX;
      /* eslint-disable */
      line.style.left = startX + currentClientX - startClientX + 'px';
    };

    var _resizeColHandler = function _resizeColHandler(upEvent) {
      if (e.clientX !== upEvent.clientX) {
        _this3._hiddenColumnLine(upEvent, columnIndex, currentClientX - startClientX, line);
      }
      (0, _DOMUtils.removeClassName)(document.querySelector('#root'), 'user-select-none');
      window.removeEventListener('mousemove', _lineMoveHandler);
      window.removeEventListener('mouseup', _resizeColHandler);
    };

    window.addEventListener('mousemove', _lineMoveHandler);
    window.addEventListener('mouseup', _resizeColHandler);
  };

  this._processData = function (props) {
    var rowSelection = props.rowSelection,
        columns = props.columns;

    var rowSelectColumn = null;
    if (rowSelection && (rowSelection.type === _dictCodes.LIST_SELECTTYPE.CHECKBOX || rowSelection.type === _dictCodes.LIST_SELECTTYPE.RADIO)) {
      rowSelectColumn = {
        width: 40,
        key: 'rowSelect',
        title: '',
        dataIndex: 'rowSelect'
      };
    }

    var fixedColumns = props.columns.filter(function (col) {
      return col.fixed;
    });
    var sortedColumns = fixedColumns.concat(columns.filter(function (col) {
      return !col.fixed;
    }));
    var columnFooter = { key: 'footer-space', title: ' ', dataIndex: 'footer-space', render: function render(text) {
        return _react2.default.createElement('span', null);
      } };
    var addSelectColumns = [];
    if (rowSelectColumn) {
      addSelectColumns = [rowSelectColumn].concat(_toConsumableArray(sortedColumns), [columnFooter]);
      if (fixedColumns.length > 0) {
        fixedColumns = [rowSelectColumn].concat(_toConsumableArray(fixedColumns));
      }
    } else {
      addSelectColumns = [].concat(_toConsumableArray(sortedColumns), [columnFooter]);
    }

    return {
      emptyRowCount: 0,
      fixedColumns: fixedColumns,
      pagination: props.pagination,
      columns: addSelectColumns
    };
  };

  this._getAllTag = function (selector) {
    var cssSelector = selector;
    if (_this3.props.isModal) {
      cssSelector = '.' + _this3.props.refStr + ' ' + cssSelector;
    }
    return document.querySelectorAll(cssSelector);
  };

  this._renderColGroup = function (columns) {
    return _react2.default.createElement(
      'colgroup',
      null,
      columns.map(function (item, index) {
        var widthPX = item.width + 'px';
        return _react2.default.createElement('col', { key: 'col' + index, style: { width: widthPX, minWidth: widthPX } });
      })
    );
  };

  this._renderScrollColGroup = function () {
    var columns = _this3.state.columns;

    return _this3._renderColGroup(columns);
  };

  this._renderThead = function (columns) {
    var _props2 = _this3.props,
        prefixCls = _props2.prefixCls,
        rowSelection = _props2.rowSelection;

    var theadStyle = prefixCls + '-thead';
    // TODO: select all
    return _react2.default.createElement(
      'thead',
      { className: theadStyle },
      _react2.default.createElement(
        'tr',
        null,
        columns.map(function (item, index) {
          if (!index && rowSelection && rowSelection.type === _dictCodes.LIST_SELECTTYPE.CHECKBOX) {
            return _react2.default.createElement(
              'th',
              { key: item.key, className: 'th' },
              _react2.default.createElement(
                'span',
                null,
                _react2.default.createElement(_index.Checkbox, { checked: _this3.state.checked, onClick: _this3._selectAll })
              )
            );
          }
          return _react2.default.createElement(
            'th',
            { key: item.key, className: 'th' },
            _react2.default.createElement(
              'span',
              null,
              item.title
            ),
            !!index && _react2.default.createElement('div', { className: 'column-anchor', 'data-thindex': index, onMouseDown: _this3._resizeCol })
          );
        })
      )
    );
  };

  this._renderScrollThead = function () {
    var columns = _this3.state.columns;

    return _this3._renderThead(columns);
  };

  this._renderFixedThead = function () {
    var fixedColumns = _this3.state.fixedColumns;

    return _this3._renderThead(fixedColumns);
  };

  this._renderFixedColGroup = function () {
    var fixedColumns = _this3.state.fixedColumns;

    return _this3._renderColGroup(fixedColumns);
  };

  this._renderEmptyDiv = function () {
    if (!_this3.state.emptyRowCount) return null;
    var _props3 = _this3.props,
        prefixCls = _props3.prefixCls,
        dataSource = _props3.dataSource,
        isModal = _props3.isModal;
    var columns = _this3.state.columns;

    var length = dataSource.length;
    var emptyDivAry = [];
    for (var i = 0; i < _this3.state.emptyRowCount; i++) {
      var rowLevelStyle = prefixCls + '-row-level-' + (length + i) % 2;
      var rowStyle = prefixCls + '-row';
      emptyDivAry.push(_react2.default.createElement(
        'tr',
        { className: rowStyle + ' ' + rowLevelStyle },
        columns.map(function (col, index) {
          return _react2.default.createElement('td', { key: 'empty-row' + index });
        })
      ));
    }
    return emptyDivAry;
  };

  this._getCheckedValue = function (key) {
    var rowSelection = _this3.props.rowSelection;

    var selectedRowKeys = rowSelection && rowSelection.selectedRowKeys;
    if (selectedRowKeys && selectedRowKeys.length > 0) {
      return selectedRowKeys.filter(function (item) {
        return item === key;
      }).length > 0;
    }
    return false;
  };

  this._selectAll = function (e) {
    var _props4 = _this3.props,
        rowSelection = _props4.rowSelection,
        dataSource = _props4.dataSource;

    var _ref = rowSelection || {},
        onSelectAll = _ref.onSelectAll;

    if (!onSelectAll) return;
    _this3.setState({
      checked: e.target.checked
    }, function () {
      if (_this3.state.checked) {
        onSelectAll(_this3.state.checked, dataSource, []);
      } else {
        onSelectAll(_this3.state.checked, [], []);
      }
    });
  };

  this._selectItem = function (row, key, isChecked) {
    var _props5 = _this3.props,
        rowSelection = _props5.rowSelection,
        dataSource = _props5.dataSource;

    var _ref2 = rowSelection || {},
        onChange = _ref2.onChange,
        onSelect = _ref2.onSelect,
        onSelectAll = _ref2.onSelectAll,
        _ref2$selectedRowKeys = _ref2.selectedRowKeys,
        selectedRowKeys = _ref2$selectedRowKeys === undefined ? [] : _ref2$selectedRowKeys,
        type = _ref2.type;

    if (onSelect) {
      onSelect(row, isChecked);
    }
    if (onChange) {
      (function () {
        var newSelectKeys = null;
        if (type === _dictCodes.LIST_SELECTTYPE.CHECKBOX) {
          if (!isChecked) {
            newSelectKeys = [].concat(_toConsumableArray(selectedRowKeys), [key]);
          } else {
            newSelectKeys = selectedRowKeys.filter(function (selectKey) {
              return selectKey !== key;
            });
          }
        } else if (!isChecked) {
          newSelectKeys = [key];
        } else {
          newSelectKeys = [];
        }
        onChange(newSelectKeys, dataSource.filter(function (data) {
          return newSelectKeys.indexOf(data.key) !== -1;
        }));
      })();
    }
  };

  this._isSelected = function (row) {
    var rowSelection = _this3.props.rowSelection;

    var _ref3 = rowSelection || {},
        _ref3$selectedRowKeys = _ref3.selectedRowKeys,
        selectedRowKeys = _ref3$selectedRowKeys === undefined ? [] : _ref3$selectedRowKeys;

    if (selectedRowKeys && selectedRowKeys.indexOf && selectedRowKeys.indexOf(row.key) !== -1) {
      return 'selected';
    }
    return '';
  };

  this._renderTBody = function (columns) {
    var _props6 = _this3.props,
        prefixCls = _props6.prefixCls,
        dataSource = _props6.dataSource,
        _props6$rowSelection = _props6.rowSelection,
        rowSelection = _props6$rowSelection === undefined ? {} : _props6$rowSelection,
        onRowClick = _props6.onRowClick;

    var tbodyStyle = prefixCls + '-tbody';
    return _react2.default.createElement(
      'tbody',
      { className: tbodyStyle },
      dataSource.map(function (row, rIndex) {
        var rowLevelStyle = prefixCls + '-row-level-' + rIndex % 2;
        var rowStyle = prefixCls + '-row';
        var selectRowRender = null;
        var rowSelectHandler = null;
        if (rowSelection && (rowSelection.type === _dictCodes.LIST_SELECTTYPE.CHECKBOX || rowSelection.type === _dictCodes.LIST_SELECTTYPE.RADIO)) {
          (function () {
            var Comp = rowSelection.type === _dictCodes.LIST_SELECTTYPE.CHECKBOX ? _index.Checkbox : _index.Radio;
            var isChecked = _this3._getCheckedValue(row.key);
            rowSelectHandler = function rowSelectHandler() {
              return _this3._selectItem(row, row.key, isChecked);
            };
            selectRowRender = _react2.default.createElement(Comp, { checked: isChecked, onClick: rowSelectHandler });
          })();
        }
        return _react2.default.createElement(
          'tr',
          { className: rowStyle + ' ' + rowLevelStyle + ' ' + _this3._isSelected(row), onClick: function onClick() {
              return onRowClick(row, rIndex);
            } },
          columns.map(function (item, cIndex) {
            var tdRender = selectRowRender;
            if (cIndex !== 0 || !selectRowRender) {
              tdRender = row[item.dataIndex];
              if (item.render) {
                tdRender = item.render(row[item.dataIndex], row, cIndex);
              }
            }
            return _react2.default.createElement(
              'td',
              { key: 'td' + cIndex },
              _react2.default.createElement(
                'span',
                null,
                tdRender
              )
            );
          })
        );
      }),
      _this3._renderEmptyDiv()
    );
  };

  this._renderScrollTBody = function () {
    var columns = _this3.state.columns;

    return _this3._renderTBody(columns);
  };

  this._renderFixedTBody = function () {
    var fixedColumns = _this3.state.fixedColumns;

    return _this3._renderTBody(fixedColumns);
  };

  this._getTableLayout = function () {
    // 主页
    return {
      height: 'auto'
    };
  };

  this._rmPX = function (str) {
    if (str && str.length > 2 && str.endsWith('px')) {
      return parseInt(str.substring(0, str.length - 2), 10);
    }
    return 0;
  };

  this._initTableAfterMount = function (shouldReSizeHeight) {
    // 设置头部宽度
    var _props7 = _this3.props,
        prefixCls = _props7.prefixCls,
        _props7$dataSource = _props7.dataSource,
        dataSource = _props7$dataSource === undefined ? [] : _props7$dataSource,
        isModal = _props7.isModal;

    var tableContainer = _this3._getTag('.' + prefixCls + '-container');
    if (!tableContainer) return;
    var tableContainerStyle = window.getComputedStyle(tableContainer);

    var tableContainerWidth = _this3._rmPX(tableContainerStyle.width);
    var headerContainer = _this3._getTag('.' + prefixCls + '-header-container');
    headerContainer.style.width = tableContainerWidth + 'px';
    // 设置scroll container 高度
    // mx-list-container
    var scrollContainerHeight = _this3._rmPX(window.getComputedStyle(_this3._getTag('.mx-list-container')).height);
    var scrollContainer = _this3._getTag('.' + prefixCls + '-scroll-container');
    if (shouldReSizeHeight) {
      if (isModal) {
        scrollContainer.style.height = scrollContainerHeight - 6 + 'px';
      } else {
        scrollContainer.style.height = scrollContainerHeight - MXTable.PAGE_BAR_HEIGHT + 'px';
      }
    }
    // 设置 fixed column 高度
    var fixedColumnsContainer = _this3._getTag('.' + prefixCls + '-fixed-columns');
    if (fixedColumnsContainer) {
      fixedColumnsContainer.style.height = scrollContainerHeight - MXTable.PAGE_BAR_HEIGHT + 'px';
    }

    var tableContainerHeight = _this3._rmPX(tableContainerStyle.height);

    var bodyHeight = tableContainerHeight - MXTable.TH_HEIGHT;
    var emptyRowCount = Math.ceil(bodyHeight / MXTable.LINE_HEIGHT - dataSource.length);
    if (emptyRowCount <= 0) {
      emptyRowCount = 0;
    }
    _this3.setState({
      emptyRowCount: emptyRowCount
    });

    // set x scroll bar
    if (_this3.tableWidth && tableContainerWidth < _this3.tableWidth) {
      _this3.xRate = tableContainerWidth / _this3.tableWidth;
      var scrollXBarWidth = _this3.xRate * tableContainerWidth;
      var scrollXBar = _this3._getTag('.' + prefixCls + '-scroller-x-bar');
      if (scrollXBar) {
        scrollXBar.style.width = scrollXBarWidth + 'px';
        _this3._addXScrollListener(scrollXBar, scrollContainer);
      }
    } else {
      var _scrollXBar = _this3._getTag('.' + prefixCls + '-scroller-x-bar');
      if (_scrollXBar) {
        _scrollXBar.style.width = '0px';
      }
    }

    console.log('emptyRowCount: ', emptyRowCount);
    // set y scroll bar
    if (emptyRowCount === 0) {
      (function () {
        var scrollYWrapper = _this3._getTag('.' + prefixCls + '-scroller-y-wrapper');
        var scrollYWrapperHeight = _this3._rmPX(window.getComputedStyle(scrollYWrapper).height);
        var tableHeight = MXTable.LINE_HEIGHT * (dataSource.length + emptyRowCount); // 不包含 th 部分
        _this3.yRate = scrollYWrapperHeight / tableHeight;
        var scrollYBarHeight = _this3.yRate * scrollYWrapperHeight;
        var scrollYBar = _this3._getTag('.' + prefixCls + '-scroller-y-bar') || document.createElement('div');
        scrollYBar.className = prefixCls + '-scroller-y-bar';
        if (scrollYBar) {
          (function () {
            scrollYBar.style.height = scrollYBarHeight + 'px';
            /* eslint-disable */
            var _hiddenYScrollBar = function () {
              var flag = 0;
              return function (isAdd) {
                if (isAdd) {
                  if (!flag) {
                    setTimeout(_hiddenYScrollBar, 500);
                  }
                  flag++;
                } else {
                  flag--;
                  if (!flag) {
                    scrollYBar.style.display = '';
                  } else {
                    flag = 1;
                    setTimeout(_hiddenYScrollBar, 500);
                  }
                }
              };
            }();
            _this3._hiddenYScrollBar = _hiddenYScrollBar;
            if (!_this3._getTag('.' + prefixCls + '-scroller-y-bar')) {
              scrollYWrapper && scrollYWrapper.append(scrollYBar);
            }
            scrollContainer.style.overflowY = 'scroll';
          })();
        }
      })();
    } else {
      scrollContainer.style.overflowY = 'hidden';
      var scrollYWrapper = _this3._getTag('.' + prefixCls + '-scroller-y-wrapper');
      if (scrollYWrapper && scrollYWrapper.childNodes && scrollYWrapper.childNodes.length > 0) {
        scrollYWrapper.removeChild(scrollYWrapper.childNodes[0]);
      }
    }
  };

  this._keyListener = function (keyEvent) {
    var scrollContainer = _this3._getTableScrollContainer();
    if (keyEvent.keyCode === MXTable.RIGHT_KEY_CODE) {
      scrollContainer.scrollLeft = scrollContainer.scrollLeft + 20;
    }
    if (keyEvent.keyCode === MXTable.LEFT_KEY_CODE) {
      scrollContainer.scrollLeft = scrollContainer.scrollLeft - 20;
    }
  };

  this._addXScrollListener = function (ele, scrollContainer) {
    var prefixCls = _this3.props.prefixCls;
    // 滚动条初始化函数

    var _scrollBarStartHandler = function _scrollBarStartHandler(downEvent) {
      var scrollXBarContainer = _this3._getTag('.' + prefixCls + '-scroller-x-wrapper');
      var scrollXBarContainerStyle = window.getComputedStyle(scrollXBarContainer);
      var scrollXBarStyle = window.getComputedStyle(ele);
      var maxLeft = _this3._rmPX(scrollXBarContainerStyle.width) - _this3._rmPX(scrollXBarStyle.width);
      var marginLeft = _this3._rmPX(ele.style.marginLeft);

      var downOffsetLeft = downEvent.clientX;

      // 滚动条拖动函数
      var _scrollBarMovingHandler = function _scrollBarMovingHandler(event) {
        var mLeft = marginLeft + (event.clientX - downOffsetLeft);
        if (mLeft > 0 && ele.style.marginLeft !== mLeft + 'px') {
          if (mLeft < maxLeft) {
            scrollContainer.scrollLeft = mLeft / _this3.xRate; // emit on scroller event
          } else {
            scrollContainer.scrollLeft = maxLeft / _this3.xRate;
          }
        } else if (mLeft < 0) {
          scrollContainer.scrollLeft = 0;
        }
      };

      var _scrollBarMoveFinishHandler = function _scrollBarMoveFinishHandler() {
        (0, _DocumentHelper.setGlobalUserSelectAllow)();
        console.log('mouse up');
        window.removeEventListener('mousemove', _scrollBarMovingHandler);
        window.removeEventListener('mouseup', _scrollBarMoveFinishHandler);
      };
      (0, _DocumentHelper.setGlobalUserSelectNone)();
      window.addEventListener('mousemove', _scrollBarMovingHandler);
      window.addEventListener('mouseup', _scrollBarMoveFinishHandler);
    };

    ele.addEventListener('mousedown', _scrollBarStartHandler);
  };

  this._getTableScrollContainer = function () {
    var prefixCls = _this3.props.prefixCls;

    var scrollContainer = _this3._getTag('.' + prefixCls + '-scroll-container');
    return scrollContainer;
  };

  this._tableScroll = function (e) {
    var prefixCls = _this3.props.prefixCls;
    // fixed header

    var theadStyle = prefixCls + "-fixed-thead";
    var title = _this3._getTag('.' + theadStyle);
    title.style.left = 0 - e.target.scrollLeft + 'px';

    var scrollerXBar = _this3._getTag('.' + prefixCls + '-scroller-x-bar');
    if (scrollerXBar) {
      scrollerXBar.style.marginLeft = _this3.xRate * e.target.scrollLeft + 'px';
    }

    var scrollerYBar = _this3._getTag('.' + prefixCls + '-scroller-y-bar');
    if (scrollerYBar) {
      console.log(e.target.scrollTop);
      var nextMarginTop = _this3.yRate * e.target.scrollTop + 'px';
      if (nextMarginTop === scrollerYBar.style.marginTop) return;
      scrollerYBar.style.display = 'block';
      scrollerYBar.style.marginTop = nextMarginTop;
      _this3._hiddenYScrollBar && _this3._hiddenYScrollBar(true);
    }
  };

  this._fixedColumnScrollHandler = function (e) {
    //TODO: scroll 循环触发
    var prefixCls = _this3.props.prefixCls;

    var scrollContainerStyle = prefixCls + "-scroll-container";
    var scrollContainer = _this3._getTag('.' + scrollContainerStyle);
    if (scrollContainer) {
      scrollContainer.scrollTop = e.target.scrollTop;
    }
  };

  this._renderXScrollBar = function () {
    var prefixCls = _this3.props.prefixCls;

    return _react2.default.createElement(
      'div',
      { className: prefixCls + "-scroller-x-wrapper" },
      _react2.default.createElement('div', { className: prefixCls + "-scroller-x-bar" })
    );
  };

  this._renderYScrollBar = function () {
    var _props8 = _this3.props,
        prefixCls = _props8.prefixCls,
        isModal = _props8.isModal;

    var scrollYWrapperStyle = {};
    scrollYWrapperStyle.height = 'calc(100% - 104px - 60px - 18px)';
    if (isModal) {
      scrollYWrapperStyle.height = 'calc(100% - 104px - 18px)';
    }
    return _react2.default.createElement('div', { className: prefixCls + "-scroller-y-wrapper", style: scrollYWrapperStyle });
  };

  this._renderFixedColumns = function () {
    var prefixCls = _this3.props.prefixCls;
    var _state$fixedColumns = _this3.state.fixedColumns,
        fixedColumns = _state$fixedColumns === undefined ? [] : _state$fixedColumns;

    if (fixedColumns.length === 0) return null;
    var fixedColumnWidth = 0;
    fixedColumns.forEach(function (col) {
      fixedColumnWidth += col.width;
    });
    return _react2.default.createElement(
      'div',
      { className: prefixCls + '-fixed-columns', style: { position: 'absolute', top: 0, height: '100%' }, onScroll: _this3._fixedColumnScrollHandler },
      _react2.default.createElement(
        'div',
        { style: { overflow: 'hidden', position: 'absolute', zIndex: 6 } },
        _react2.default.createElement(
          'table',
          { className: prefixCls + "-fixed-thead", style: { position: 'relative' } },
          _this3._renderFixedColGroup(),
          _this3._renderFixedThead()
        )
      ),
      _react2.default.createElement(
        'div',
        { style: { overflow: 'hidden', height: '100%', width: fixedColumnWidth } },
        _react2.default.createElement(
          'div',
          { className: prefixCls + '-fixed-columns-table' },
          _react2.default.createElement(
            'table',
            { style: { width: '100%' } },
            _this3._renderFixedColGroup(),
            _this3._renderFixedThead(),
            _this3._renderFixedTBody()
          )
        )
      )
    );
  };

  this._pageChange = function (page, pageSize) {
    var _props9 = _this3.props,
        pagination = _props9.pagination,
        onChange = _props9.onChange;

    if (onChange) {
      var nextPagination = _extends({}, pagination, { current: page });
      onChange(nextPagination);
      _this3.setState({ pagination: nextPagination });
    }
  };

  this._renderResizeColumnLine = function () {
    var prefixCls = _this3.props.prefixCls;

    return _react2.default.createElement('div', { className: prefixCls + "-column-line" });
  };
}, _temp);
exports.default = MXTable;