'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 4/20/17.
                                      */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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._getTag('.main-content');
      if (mainContent) {
        this.mainContentHeight = mainContent.style.height;
        mainContent.style.height = '100%';
      }
      var modalContent = this._getTag('.modal-content');
      if (modalContent) {
        modalContent.style.overflowY = 'hidden';
        modalContent.style.marginRight = '0px';
      }
      var modalContentBody = this._getTag('.modal-content-body');
      if (modalContentBody) {
        modalContentBody.style.overflowY = 'hidden';
      }

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

      var prefixCls = this.props.prefixCls;

      var scrollContainer = this._getTableScrollContainer();
      scrollContainer.addEventListener('scroll', this._tableScroll);
      // scrollContainer.addEventListener('scroll', this._scrollBottomToLoadingData);
      // 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) {
      this.setState(_extends({}, this._processData(nextProps)));
      //let nextDataSourceLastRecord = null;
      //if (nextProps.dataSource && nextProps.dataSource.length > 0) {
      //  nextDataSourceLastRecord = nextProps.dataSource[nextProps.dataSource.length - 1];
      //}
      //let currentDataSourceLastRecord = null;
      //if (this.state.dataSource && this.state.dataSource.length > 0) {
      //  currentDataSourceLastRecord = this.state.dataSource[this.state.dataSource.length - 1];
      //}
      //if (nextDataSourceLastRecord && currentDataSourceLastRecord && currentDataSourceLastRecord.key !== nextDataSourceLastRecord.key) {
      //  setTimeout(() => {
      //    // 添加新的消息记录
      //    this.setState({dataSource: [
      //      ...nextProps.dataSource
      //    ],
      //      showLoading: false});
      //    setTimeout(this._initTableAfterMount, 1000);
      //  }, 1000);
      //}
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this._initTableAfterMount);
      window.removeEventListener('keydown', this._keyListener);
      var mainContent = this._getTag('.main-content');
      if (mainContent) {
        mainContent.style.height = this.mainContentHeight;
      }
      var modalContent = this._getTag('.modal-content');
      if (modalContent) {
        modalContent.style.overflowY = 'scroll';
        modalContent.style.marginRight = '';
      }
      var modalContentBody = this._getTag('.modal-content-body');
      if (modalContentBody) {
        modalContentBody.style.overflowY = 'scroll';
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var prefixCls = this.props.prefixCls;

      if (!this.state.columns || this.state.columns.length === 0) {
        return _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'span',
            null,
            '\u6570\u636E\u52A0\u8F7D\u4E2D...'
          )
        );
      }
      // 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 + '-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._renderResizeColumnLine()
        ),
        false && this._renderXScrollBar()
      );
    }
  }]);

  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: [],
  sortOrder: null,
  pagination: null,
  onChange: null,
  onRowClick: null,
  prefixCls: 'inner-table',
  isModal: false,
  refStr: null
}, _initialiseProps = function _initialiseProps() {
  var _this2 = this;

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

    var line = _this2._getTag('.' + prefixCls + '-column-line');
    if (!line) return null;
    var scroller = _this2._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 = _this2.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 = _this2.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) {
      _this2.setState({ fixedColumns: fixedColumns.map(_modifyColunmWidth) });
    }
    _this2.setState({
      columns: columns.map(_modifyColunmWidth)
    });
  };

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

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

    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) {
        _this2._hiddenColumnLine(upEvent, columnIndex, currentClientX - startClientX, line);
      }
      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 = 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,
      dataSource: props.dataSource
    };
  };

  this._getTag = function (selector) {
    var cssSelector = selector;
    if (_this2.props.isModal) {
      cssSelector = '.' + _this2.props.refStr + ' ' + cssSelector;
    }
    return document.querySelector(cssSelector);
  };

  this._getAllTag = function (selector) {
    var cssSelector = selector;
    if (_this2.props.isModal) {
      cssSelector = '.' + _this2.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 = _this2.state.columns;

    return _this2._renderColGroup(columns);
  };

  this._renderThead = function (columns) {
    var _props = _this2.props,
        prefixCls = _props.prefixCls,
        rowSelection = _props.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, { onClick: _this2._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: _this2._resizeCol })
          );
        })
      )
    );
  };

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

    return _this2._renderThead(columns);
  };

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

    return _this2._renderThead(fixedColumns);
  };

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

    return _this2._renderColGroup(fixedColumns);
  };

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

    var length = dataSource.length;
    var emptyDivAry = [];
    for (var i = 0; i < _this2.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 = _this2.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 rowSelection = _this2.props.rowSelection;
    var dataSource = _this2.state.dataSource;

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

    if (!onSelectAll) return;
    if (e.target.checked) {
      onSelectAll(e.target.checked, dataSource, []);
    } else {
      onSelectAll(e.target.checked, [], []);
    }
  };

  this._selectItem = function (row, key, isChecked) {
    var rowSelection = _this2.props.rowSelection;
    var dataSource = _this2.state.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 = _this2.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 _props3 = _this2.props,
        prefixCls = _props3.prefixCls,
        _props3$rowSelection = _props3.rowSelection,
        rowSelection = _props3$rowSelection === undefined ? {} : _props3$rowSelection,
        onRowClick = _props3.onRowClick;
    var dataSource = _this2.state.dataSource;

    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 = _this2._getCheckedValue(row.key);
            rowSelectHandler = function rowSelectHandler() {
              return _this2._selectItem(row, row.key, isChecked);
            };
            selectRowRender = _react2.default.createElement(Comp, { checked: isChecked, onClick: rowSelectHandler });
          })();
        }
        return _react2.default.createElement(
          'tr',
          { key: row.key, className: rowStyle + ' ' + rowLevelStyle + ' ' + _this2._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',
              null,
              _react2.default.createElement(
                'span',
                null,
                tdRender
              )
            );
          })
        );
      }),
      _this2._renderEmptyDiv()
    );
  };

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

    return _this2._renderTBody(columns);
  };

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

    return _this2._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 () {
    // 设置头部宽度
    var _props4 = _this2.props,
        prefixCls = _props4.prefixCls,
        isModal = _props4.isModal;
    var _state$dataSource = _this2.state.dataSource,
        dataSource = _state$dataSource === undefined ? [] : _state$dataSource;

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

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

    // 设置 fixed column 高度
    var fixedColumnsContainer = _this2._getTag('.' + prefixCls + '-fixed-columns');
    if (fixedColumnsContainer) {
      fixedColumnsContainer.style.height = scrollContainerHeight - MXTable.PAGE_BAR_HEIGHT + 'px';
    }

    // insert empty row
    // dataSource is null
    var tableContainerHeight = _this2._rmPX(tableContainerStyle.height);
    // console.log(this._rmPX(mySelfStyle.height));
    // calculate
    var bodyHeight = tableContainerHeight - MXTable.TH_HEIGHT;
    var emptyRowCount = Math.ceil(bodyHeight / MXTable.LINE_HEIGHT - dataSource.length);
    if (emptyRowCount < 0) emptyRowCount = 0;
    // TODO:  应该是 emptyRowCount + dataSource.length
    // console.log('emptyRowCount: ', emptyRowCount);
    if (emptyRowCount > 0) {
      // console.log('emptyRowCount > 0');
      _this2.setState({
        emptyRowCount: emptyRowCount
      });
      // 加载数据 填补 空白行
      // if (this.props.isModal && this.state.pagination.total > 1) {
      // setTimeout(() => this._pageChange(1, this.state.pagination.pageSize));
      //如果20行 还有空  就爆炸
      // }
    }

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

  this._keyListener = function (keyEvent) {
    var scrollContainer = _this2._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._showNoMore = function () {
    _this2.setState({ noMore: true }, function () {
      setTimeout(function () {
        return _this2.setState({ noMore: false });
      }, 1000);
    });
  };

  this._scrollBottomToLoadingData = function (e) {
    if (e.target.scrollTop + e.target.clientHeight === e.target.scrollHeight) {
      if (_this2.lastLoadingDataOffset === e.target.scrollTop) {
        _this2._showNoMore();
        return;
      }
      if (_this2.state.dataSource.length === _this2.state.pagination.total) {
        if (_this2.lastLoadingDataOffset === undefined) {
          _this2._showNoMore();
        }
        return;
      }
      _this2.lastLoadingDataOffset = e.target.scrollTop;
      if (_this2.state.dataSource.length < _this2.state.pagination.total) {
        _this2.setState({ showLoading: true });
        var pagination = _this2.state.pagination;

        console.log('current:', pagination.current ? pagination.current + 1 : 2, 'pageSize: ', pagination.pageSize);
        _this2._pageChange(pagination.current ? pagination.current + 1 : 2, pagination.pageSize);
      } else {
        _this2._showNoMore();
      }
    }
  };

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

    var _scrollBarStartHandler = function _scrollBarStartHandler(downEvent) {
      var scrollXBarContainer = _this2._getTag('.' + prefixCls + '-scroller-x-wrapper');
      var scrollXBarContainerStyle = window.getComputedStyle(scrollXBarContainer);
      var scrollXBarStyle = window.getComputedStyle(ele);
      var maxLeft = _this2._rmPX(scrollXBarContainerStyle.width) - _this2._rmPX(scrollXBarStyle.width);
      var marginLeft = _this2._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 / _this2.xRate; // emit on scroller event
          } else {
            scrollContainer.scrollLeft = maxLeft / _this2.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 = _this2.props.prefixCls;

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

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

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

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

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

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

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

  this._renderXScrollBar = function () {
    var prefixCls = _this2.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 _props5 = _this2.props,
        prefixCls = _props5.prefixCls,
        isModal = _props5.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 = _this2.props.prefixCls;
    var _state$fixedColumns = _this2.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: _this2._fixedColumnScrollHandler },
      _react2.default.createElement(
        'div',
        { style: { overflow: 'hidden', position: 'absolute', zIndex: 6 } },
        _react2.default.createElement(
          'table',
          { className: prefixCls + "-fixed-thead", style: { position: 'relative' } },
          _this2._renderFixedColGroup(),
          _this2._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%' } },
            _this2._renderFixedColGroup(),
            _this2._renderFixedThead(),
            _this2._renderFixedTBody()
          )
        )
      )
    );
  };

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

    if (onChange) {
      var nextPagination = _extends({}, pagination, { current: page });
      onChange(nextPagination, undefined, undefined, true);
      _this2.setState({ pagination: nextPagination, showLoading: true });
    }
  };

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

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