/**
 * Created by baoyinghai on 3/30/17.
 */
import React from 'react';
import { getValueByKey } from '../../../framework/utils/MapUtils';
import { addClassName, removeClassName } from '../../../framework/utils/DOMUtils';
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: [],
    dataSource: [],
    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(this.props);
  }

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

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


  _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)
    }, this._initTableAfterMount);
  };

  _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;

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

    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);
      }
      removeClassName(document.querySelector('#root'), 'user-select-none');
      window.removeEventListener('mousemove', _lineMoveHandler);
      window.removeEventListener('mouseup', _resizeColHandler);
    };

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

  _processData = (props) => {

    const { rowSelection, columns } = 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 = 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: props.pagination,
      columns: addSelectColumns,
    };
  };

  _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 checked={this.state.checked} 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, dataSource, isModal } = this.props;
    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, dataSource } = this.props;
    const { onSelectAll } = rowSelection || {};
    if (!onSelectAll) return;
    this.setState({
      checked: e.target.checked
    }, () => {
      if (this.state.checked) {
        onSelectAll(this.state.checked, dataSource, []);
      } else {
        onSelectAll(this.state.checked, [], []);
      }
    });
  };

  _selectItem = (row, key, isChecked) => {
    const { rowSelection, dataSource } = this.props;
    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, dataSource, rowSelection = {}, onRowClick } = this.props;
    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 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 key={'td' + cIndex}>
                  <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 = shouldReSizeHeight => {
    // 设置头部宽度
    const { prefixCls, dataSource = [], isModal } = this.props;
    const tableContainer = this._getTag('.' + prefixCls + '-container');
    if (!tableContainer) return;
    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 (shouldReSizeHeight) {
      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';
    }

    const tableContainerHeight = this._rmPX(tableContainerStyle.height);

    const bodyHeight = tableContainerHeight - MXTable.TH_HEIGHT;
    let emptyRowCount = Math.ceil(bodyHeight / MXTable.LINE_HEIGHT - dataSource.length);
    if (emptyRowCount <= 0) {
      emptyRowCount = 0;
    }
    this.setState({
      emptyRowCount
    });

    // 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';
      }
    }

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

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

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

  componentWillReceiveProps(nextProps) {
    // const reRender = this.props.dataSource.length !== nextProps.dataSource.length || nextProps.menuCode;
    const newState = this._processData(nextProps);
    if (nextProps.rowSelection && nextProps.rowSelection.type === 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, () => this._initTableAfterMount(this.props.dataSource.length !== nextProps.dataSource.length));
  }


  componentWillUnmount() {
    window.removeEventListener('resize', this._initTableAfterMount);
    window.removeEventListener('keydown', this._keyListener);
    const mainContent = this._getTagOfGlobal('.main-content');
    if (mainContent) {
      mainContent.style.height = this.mainContentHeight;
    }
    const modalContent = this._getTagOfGlobal('.modal-content');
    if (modalContent) {
      modalContent.style.overflowY = 'scroll';
      modalContent.style.marginRight = '';
    }
    const modalContentBody = this._getTagOfGlobal('.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) {
      console.log(e.target.scrollTop);
      const nextMarginTop = (this.yRate * e.target.scrollTop) + 'px';
      if (nextMarginTop === scrollerYBar.style.marginTop) return ;
      scrollerYBar.style.display = 'block';
      scrollerYBar.style.marginTop = nextMarginTop;
      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);
      this.setState({pagination: nextPagination});
    }
  };

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

  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 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>
          {this._renderFixedColumns()}
          {this._renderResizeColumnLine()}
        </div>
        {this._renderXScrollBar()}
        {this._renderYScrollBar()}
        {!isModal && (
          <div className={this.props.prefixCls + '-pagination'}>
            <Pagination {...this.state.pagination} onChange={this._pageChange}/>
          </div>)}
      </div>
    );
  }
}
