/**
 * Created by baoyinghai on 3/30/17.
 */
import React from 'react';
import { getValueByKey } from '../../../framework/utils/MapUtils';
import { LIST_SELECTTYPE } from '../../../framework/constant/dictCodes';
import { Pagination, Radio, Checkbox } from '../index';
import { setGlobalUserSelectNone, setGlobalUserSelectAllow } from '../../../framework/utils/DocumentHelper';

export default class MXTable extends React.Component {

  static LINE_HEIGHT = 44; // 行高是 45;
  static RIGHT_KEY_CODE = 39;
  static LEFT_KEY_CODE = 37;
  static TH_HEIGHT = 44;
  static TOOL_BAR_HEIGHT = 60;
  static PAGE_BAR_HEIGHT = 60;

  static defaultProps = {
    rowSelection: null,
    columns: [],
    sortOrder: null,
    pagination: null,
    onChange: null,
    onRowClick: null,
    prefixCls: 'mx-table-self-self',
    isModal: false,
    refStr: null
  };

  constructor(props) {
    super(props);
    this.state = this._processData();
  }

  _showColumnLine = offsetX => {
    const { prefixCls } = this.props;
    const line = this._getTag('.' + prefixCls + '-column-line');
    if (!line) return null;
    const scroller = this._getTableScrollContainer();
    let offsetLeft = 0;
    if (scroller) {
      offsetLeft = scroller.scrollLeft;
    }
    line.style.left = (offsetX - offsetLeft) + 'px';
    line.style.display = 'block';
    return line;
  };

  _calculatePosition = e => {
    const index = parseInt(e.target.getAttribute('data-thindex'), 10);
    const { columns } = this.state;
    const offsetX = columns.slice(0, index).reduce((offset, col) => offset + col.width, 0);
    return { offsetX, columnIndex: index - 1 };
  };

  _hiddenColumnLine = (event, columnIndex, offset, line) => {
    if (!line) return;
    line.style.display = 'none';
    const { columns, fixedColumns } = this.state;
    const _modifyColunmWidth = (column, index) => {
      if (index === columnIndex) {
        return {
          ...column,
          width: column.width + offset
        };
      }
      return column;
    };
    if (columnIndex < fixedColumns.length) {
      this.setState({ fixedColumns: fixedColumns.map(_modifyColunmWidth) });
    }
    this.setState({
      columns: columns.map(_modifyColunmWidth)
    });
  };

  _resizeCol = e => {
    const { offsetX, columnIndex } = this._calculatePosition(e);
    const line = this._showColumnLine(offsetX);
    if (!line) return;
    const startX = this._rmPX(line.style.left);
    const startClientX = e.clientX;
    let currentClientX = startClientX;

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

    const _resizeColHandler = upEvent => {
      if (e.clientX !== upEvent.clientX) {
        this._hiddenColumnLine(upEvent, columnIndex, currentClientX - startClientX, line);
      }
      window.removeEventListener('mousemove', _lineMoveHandler);
      window.removeEventListener('mouseup', _resizeColHandler);
    };

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

  _processData = () => {

    const { rowSelection, columns } = this.props;
    let rowSelectColumn = null;
    if (rowSelection && (rowSelection.type === LIST_SELECTTYPE.CHECKBOX || rowSelection.type === LIST_SELECTTYPE.RADIO)) {
      rowSelectColumn = {
        width: 40,
        key: 'rowSelect',
        title: '',
        dataIndex: 'rowSelect',
      };
    }

    let fixedColumns = this.props.columns.filter(col => col.fixed);
    const sortedColumns = fixedColumns.concat(columns.filter(col => !col.fixed));
    const columnFooter = { key: 'footer-space', title: ' ', dataIndex: 'footer-space', render: text => { return (<span />); } };
    let addSelectColumns = [];
    if (rowSelectColumn) {
      addSelectColumns = [
        rowSelectColumn,
        ...sortedColumns,
        columnFooter
      ];
      if (fixedColumns.length > 0) {
        fixedColumns = [
          rowSelectColumn,
          ...fixedColumns
        ];
      }
    } else {
      addSelectColumns = [
        ...sortedColumns,
        columnFooter
      ];
    }

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

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

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

  _renderColGroup = columns => (
    <colgroup>
      {columns.map((item, index) => {
        const widthPX = item.width + 'px';
        return (
          <col key={'col' + index} style={{ width: widthPX, minWidth: widthPX }} />
        );
      })}
    </colgroup>
  );


  _renderScrollColGroup = () => {
    const { columns } = this.state;
    return this._renderColGroup(columns);
  };


  _renderThead = columns => {
    const { prefixCls, rowSelection } = this.props;
    const theadStyle = `${prefixCls}-thead`;
    // TODO: select all
    return (
      <thead className={theadStyle}>
      <tr>
        {columns.map((item, index) => {
          if (!index && rowSelection && rowSelection.type === LIST_SELECTTYPE.CHECKBOX) {
            return (
              <th key={item.key} className="th">
                <span><Checkbox onClick={this._selectAll} /></span>
              </th>
            );
          }
          return (
            <th key={item.key} className="th">
              <span>{item.title}</span>
              {!!index && (<div className="column-anchor" data-thindex={index} onMouseDown={this._resizeCol} />)}
            </th>
          );
        })}
      </tr>
      </thead>
    );
  };

  _renderScrollThead = () => {
    const { columns } = this.state;
    return this._renderThead(columns);
  };


  _renderFixedThead = () => {
    let { fixedColumns } = this.state;
    return this._renderThead(fixedColumns);
  };

  _renderFixedColGroup = () => {
    let { fixedColumns } = this.state;
    return this._renderColGroup(fixedColumns);
  };

  _renderEmptyDiv = () => {
    if (!this.state.emptyRowCount) return null;
    const { prefixCls, isModal } = this.props;
    const { dataSource } = this.state;
    const { columns } = this.state;
    const length = dataSource.length;
    const emptyDivAry = [];
    for (let i = 0; i < this.state.emptyRowCount; i++) {
      const rowLevelStyle = prefixCls + '-row-level-' + ((length + i) % 2);
      const rowStyle = `${prefixCls}-row`;
      emptyDivAry.push(
        <tr className={rowStyle + ' ' + rowLevelStyle}>
          {columns.map(((col, index) => {
            return (<td key={'empty-row' + index} />);
          }))}
        </tr>
      );
    }
    return emptyDivAry;
  };

  _getCheckedValue = key => {
    const { rowSelection } = this.props;
    const selectedRowKeys = rowSelection && rowSelection.selectedRowKeys;
    if (selectedRowKeys && selectedRowKeys.length > 0) {
      return selectedRowKeys.filter(item => item === key).length > 0;
    }
    return false;
  };

  _selectAll = e => {
    const { rowSelection } = this.props;
    const { dataSource } = this.state;
    const { onSelectAll } = rowSelection || {};
    if (!onSelectAll) return;
    if (e.target.checked) {
      onSelectAll(e.target.checked, dataSource, []);
    } else {
      onSelectAll(e.target.checked, [], []);
    }
  };

  _selectItem = (row, key, isChecked) => {
    const { rowSelection } = this.props;
    const { dataSource } = this.state;
    const { onChange, onSelect, onSelectAll, selectedRowKeys = [], type } = rowSelection || {};
    if (onSelect) {
      onSelect(row, isChecked);
    }
    if (onChange) {
      let newSelectKeys = null;
      if (type === LIST_SELECTTYPE.CHECKBOX) {
        if (!isChecked) {
          newSelectKeys = [...selectedRowKeys, key];
        } else {
          newSelectKeys = selectedRowKeys.filter(selectKey => selectKey !== key);
        }
      } else if (!isChecked) {
        newSelectKeys = [key];
      } else {
        newSelectKeys = [];
      }
      onChange(newSelectKeys, dataSource.filter(data => newSelectKeys.indexOf(data.key) !== -1));
    }
  };

  _isSelected = row => {
    const { rowSelection } = this.props;
    const { selectedRowKeys = [] } = rowSelection || {};
    if (selectedRowKeys && selectedRowKeys.indexOf && selectedRowKeys.indexOf(row.key) !== -1) {
      return 'selected';
    }
    return '';
  };

  _renderTBody = columns => {
    const { prefixCls, rowSelection = {}, onRowClick } = this.props;
    const { dataSource } = this.state;
    const tbodyStyle = `${prefixCls}-tbody`;
    return (
      <tbody className={tbodyStyle}>
      {dataSource.map((row, rIndex) => {
        const rowLevelStyle = prefixCls + '-row-level-' + (rIndex % 2);
        const rowStyle = `${prefixCls}-row`;
        let selectRowRender = null;
        let rowSelectHandler = null;
        if (rowSelection && (rowSelection.type === LIST_SELECTTYPE.CHECKBOX || rowSelection.type === LIST_SELECTTYPE.RADIO)) {
          const Comp = rowSelection.type === LIST_SELECTTYPE.CHECKBOX ? Checkbox : Radio;
          const isChecked = this._getCheckedValue(row.key);
          rowSelectHandler = () => this._selectItem(row, row.key, isChecked);
          selectRowRender = (<Comp checked={isChecked} onClick={rowSelectHandler} />);
        }
        return (
          <tr key={row.key} className={rowStyle + ' ' + rowLevelStyle + ' ' + this._isSelected(row)} onClick={() => onRowClick(row, rIndex)}>
            {columns.map((item, cIndex) => {
              let tdRender = selectRowRender;
              if (cIndex !== 0 || !selectRowRender) {
                tdRender = row[item.dataIndex];
                if (item.render) {
                  tdRender = item.render(row[item.dataIndex], row, cIndex);
                }
              }
              return (
                <td>
                  <span>{tdRender}</span>
                </td>
              );
            })}
          </tr>
        );
      })}
      {this._renderEmptyDiv()}
      </tbody>
    );
  };

  _renderScrollTBody = () => {
    const { columns } = this.state;
    return this._renderTBody(columns);
  };

  _renderFixedTBody = () => {
    const { fixedColumns } = this.state;
    return this._renderTBody(fixedColumns);
  };

  _getTableLayout = () => {
    // 主页
    return {
      height: 'auto'
    };
  };

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

  /* eslint-disable */
  _initTableAfterMount = () => {
    // 设置头部宽度
    const { prefixCls, isModal } = this.props;
    const { dataSource = [] } = this.state;
    const tableContainer = this._getTag('.' + prefixCls + '-container');
    const tableContainerStyle = window.getComputedStyle(tableContainer);

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

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

    // insert empty row
    // dataSource is null
    const tableContainerHeight = this._rmPX(tableContainerStyle.height);
    // console.log(this._rmPX(mySelfStyle.height));
    // calculate
    const bodyHeight = tableContainerHeight - MXTable.TH_HEIGHT;
    let 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');
      this.setState({
        emptyRowCount
      });
      // 加载数据 填补 空白行
      // if (this.props.isModal && this.state.pagination.total > 1) {
        // setTimeout(() => this._pageChange(1, this.state.pagination.pageSize));
        //如果20行 还有空  就爆炸
      // }
    }

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

  _keyListener = keyEvent => {
    const scrollContainer = this._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;
    }
  };

  componentDidMount() {
    const mainContent = this._getTag('.main-content');
    if (mainContent) {
      this.mainContentHeight = mainContent.style.height;
      mainContent.style.height = '100%';
    }
    const modalContent = this._getTag('.modal-content-list');
    if (modalContent) {
      modalContent.style.overflowY = 'hidden';
      modalContent.style.marginRight = '0px';
    }
    const modalContentBody = this._getTag('.modal-content-body');
    if (modalContentBody) {
      modalContentBody.style.overflowY = 'hidden';
    }

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

    const { prefixCls } = this.props;
    const scrollContainer = this._getTableScrollContainer();
    scrollContainer.addEventListener('scroll', this._tableScroll);
    scrollContainer.addEventListener('scroll', this._scrollBottomToLoadingData);
    // fixed columns
    const fixedColumnStyle = prefixCls + "-fixed-columns-table";
    const fixedColumn = this._getTag('.' + fixedColumnStyle);
    scrollContainer.addEventListener('scroll', e => {
      if (fixedColumn) {
        fixedColumn.scrollTop = e.target.scrollTop;
      }
    });
  }

  _showNoMore = () => {
    this.setState({ noMore: true }, () => {
      setTimeout(() => this.setState({ noMore: false }), 1000);
    });
  };

  _scrollBottomToLoadingData = e => {
    if (e.target.scrollTop + e.target.clientHeight === e.target.scrollHeight) {
      if (this.lastLoadingDataOffset === e.target.scrollTop) {
        this._showNoMore();
        return;
      }
      if (this.state.dataSource.length === this.state.pagination.total) {
        if (this.lastLoadingDataOffset === undefined || this.lastLoadingDataOffset !== e.target.scrollTop) {
          this._showNoMore();
        }
        return;
      }
      this.lastLoadingDataOffset = e.target.scrollTop;
      if (this.state.dataSource.length < this.state.pagination.total) {
        this.setState({ showLoading: true });
        const { pagination } = this.state;
        console.log('current:', pagination.current ? pagination.current + 1 : 2, 'pageSize: ', pagination.pageSize);
        this._pageChange(pagination.current ? pagination.current + 1 : 2, pagination.pageSize);
      } else {
        this._showNoMore();
      }
    }
  };

  componentWillReceiveProps(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,
          pagination: nextProps.pagination
        });
        setTimeout(this._initTableAfterMount, 500);
      }, 500);
    } else if (!nextDataSourceLastRecord) {
      this.setState({dataSource: [],
        showLoading: false,
        pagination: nextProps.pagination
      }, () => {
        this._initTableAfterMount();
      });
    } else if (!currentDataSourceLastRecord) {
      this.setState({dataSource: [...nextProps.dataSource],
        showLoading: false,
        pagination: nextProps.pagination
      }, () => {
        this._initTableAfterMount();
      });
    }
    if (nextProps.shouldScrollToTop) {
      this.listScrollToTop();
    }
  }


  componentWillUnmount() {
    window.removeEventListener('resize', this._initTableAfterMount);
    window.removeEventListener('keydown', this._keyListener);
    const mainContent = this._getTag('.main-content');
    if (mainContent) {
      mainContent.style.height = this.mainContentHeight;
    }
    const modalContent = this._getTag('.modal-content-list');
    if (modalContent) {
      modalContent.style.overflowY = 'scroll';
      modalContent.style.marginRight = '';
    }
    const modalContentBody = this._getTag('.modal-content-body');
    if (modalContentBody) {
      modalContentBody.style.overflowY = 'scroll';
    }

  }

  _addXScrollListener = (ele, scrollContainer) => {
    const { prefixCls } = this.props;
    // 滚动条初始化函数
    const _scrollBarStartHandler = (downEvent) => {
      const scrollXBarContainer = this._getTag('.' + prefixCls + '-scroller-x-wrapper');
      const scrollXBarContainerStyle = window.getComputedStyle(scrollXBarContainer);
      const scrollXBarStyle = window.getComputedStyle(ele);
      const maxLeft = this._rmPX(scrollXBarContainerStyle.width) - this._rmPX(scrollXBarStyle.width);
      const marginLeft = this._rmPX(ele.style.marginLeft);

      const downOffsetLeft = downEvent.clientX;

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

      const _scrollBarMoveFinishHandler = () => {
        setGlobalUserSelectAllow();
        console.log('mouse up');
        window.removeEventListener('mousemove', _scrollBarMovingHandler);
        window.removeEventListener('mouseup', _scrollBarMoveFinishHandler);
      };

      setGlobalUserSelectNone();
      window.addEventListener('mousemove', _scrollBarMovingHandler);
      window.addEventListener('mouseup', _scrollBarMoveFinishHandler);
    };

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

  _getTableScrollContainer = () => {
    const { prefixCls } = this.props;
    const scrollContainer = this._getTag('.' + prefixCls + '-scroll-container');
    return scrollContainer;
  };

  _tableScroll = e => {
    const { prefixCls } = this.props;
    // fixed header
    const theadStyle = prefixCls + "-fixed-thead";
    const title = this._getTag('.' + theadStyle);
    title.style.left = (0 - e.target.scrollLeft) + 'px';

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

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

  };

  _fixedColumnScrollHandler = e => {
    //TODO: scroll 循环触发
    const { prefixCls } = this.props;
    const scrollContainerStyle = prefixCls + "-scroll-container";
    const scrollContainer = this._getTag('.' + scrollContainerStyle);
    if (scrollContainer) {
      scrollContainer.scrollTop = e.target.scrollTop;
    }
  };

  _renderXScrollBar = () => {
    const { prefixCls } = this.props;
    return (
      <div className={prefixCls + "-scroller-x-wrapper"}>
        <div className={ prefixCls + "-scroller-x-bar"}></div>
      </div>
    );
  };

  _renderYScrollBar = () => {
    const { prefixCls, isModal } = this.props;
    const scrollYWrapperStyle = {};
    scrollYWrapperStyle.height = 'calc(100% - 104px - 60px - 18px)';
    if (isModal) {
      scrollYWrapperStyle.height = 'calc(100% - 104px - 18px)';
    }
    return (
      <div className={prefixCls + "-scroller-y-wrapper"}  style={scrollYWrapperStyle}/>
    );
  };

  _renderFixedColumns = () => {
    const { prefixCls } = this.props;
    const { fixedColumns = [] } = this.state;
    if (fixedColumns.length === 0) return null;
    let fixedColumnWidth = 0;
    fixedColumns.forEach(col => {
      fixedColumnWidth += col.width;
    });
    return (
      <div className={prefixCls + '-fixed-columns'} style={{ position: 'absolute', top: 0, height: '100%' }} onScroll={this._fixedColumnScrollHandler}>
        <div style={{ overflow: 'hidden', position: 'absolute', zIndex: 6 }}>
          <table className={prefixCls + "-fixed-thead"} style={{position: 'relative'}}>
            {this._renderFixedColGroup()}
            {this._renderFixedThead()}
          </table>
        </div>
        <div style={{ overflow: 'hidden', height: '100%', width: fixedColumnWidth }}>
          <div className={prefixCls + '-fixed-columns-table'} >
            <table style={{ width: '100%' }}>
              {this._renderFixedColGroup()}
              {this._renderFixedThead()}
              {this._renderFixedTBody()}
            </table>
          </div>
        </div>
      </div>
    );
  };

  _pageChange = (page, pageSize) => {
    const { pagination, onChange } = this.props;
    if (onChange) {
      const nextPagination = {...pagination, current: page};
      onChange(nextPagination, undefined, undefined, true);
      this.setState({pagination: nextPagination, showLoading: true});
    }
  };

  _renderResizeColumnLine = () => {
    const { prefixCls } = this.props;
    return (
      <div className={prefixCls + "-column-line"}></div>
    );
  };

  listScrollToTop() {
    this._scrollTable.scrollTop = 0;
  }

  render() {
    const { prefixCls, isModal } = this.props;
    // 1 垂直滚动  无fixed
    // 2 有fixed
    let tableWidth = 0;
    const { columns } = this.state;
    columns.forEach(col => {
      if (typeof col.width === 'number') {
        tableWidth += col.width;
      }
    });
    this.tableWidth = tableWidth;
    return (
      <div>
        <div className={prefixCls + '-container'} style={{overflow: 'hidden', width: '100%', position: 'relative'}}>
          <div className={prefixCls + '-header-container'} style={{ overflow: 'hidden', position: 'absolute', zIndex: 5 }}>
            <table className={prefixCls + "-fixed-thead"} style={{ width: tableWidth + 'px', position: 'relative' }}>
              {this._renderScrollColGroup()}
              {this._renderScrollThead()}
            </table>
          </div>
          <div ref={ref => this._scrollTable = ref} className={prefixCls + '-scroll-container'} style={{overflow: 'scroll', width: 'calc(100% + 17px)', position: 'relative', paddingBottom: '17px', marginBottom: '-17px'}}>
            <div className={prefixCls} style={this._getTableLayout()} >
              <table style={{ width: tableWidth + 'px' }}>
                {this._renderScrollColGroup()}
                {this._renderScrollThead()}
                {this._renderScrollTBody()}
              </table>
            </div>
          </div>
          <div className="loading-more-bar" style={{height: this.state.showLoading ? '24px' : '0'}}>
            <span>{'加载中...'}</span>
          </div>
          <div className="loading-more-bar" style={{height: this.state.noMore ? '24px' : '0'}}>
            <span>{'没有更多了'}</span>
          </div>
          {this._renderFixedColumns()}
          {this._renderResizeColumnLine()}
        </div>
        {this._renderXScrollBar()}
        {false && this._renderYScrollBar()}
      </div>
    );
  }
}
