import React, { Component } from 'react';
import { Table } from 'antd';
import styles from './index.less';
import PropTypes from 'prop-types';

const giveNewColumns = (columns, tableId) => {
  let scrollX = 0;
  for (let item of columns) {
    if (item != null) {
      scrollX = typeof item.width !== 'undefined' ? scrollX + item.width : scrollX + 100;
    }
  }
  const width = document.getElementById(tableId).offsetWidth;
  if (width < scrollX) {
    if(columns.length){
      let lastItem = columns[columns.length -1];
      if( (lastItem.title === '操作' || lastItem.title === '详情') &&
        typeof lastItem.fixed === 'undefined' &&
        typeof lastItem.noNeedFixed === 'undefined'){
        columns[columns.length -1].fixed = 'right'; // 操作/ 详情列 增加 浮动
      }
    }
    return {
      scrollX,
      columns,
    }
  }else{
    return null;
  }
};
export default class NormalTable extends Component {

  constructor(props) {
    super(props);
    this.state = {
      tableId: Math.random().toString(36).substr(2),
      scrollX: 0,
      columns: props.columns,
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {

    if(JSON.stringify(nextProps.columns) === JSON.stringify(prevState.columns)){
      return null
    }else{
      const columns = nextProps.columns;
      let newState = giveNewColumns(columns, prevState.tableId);
      if(newState){
        return {
          scrollX: newState.scrollX,
          columns: newState.columns,
        }
      }else{
        return {
          columns,
        }
      }

    }
  }


  /**
   * <Table> dom 占得的宽度offsetWidth与计算所得的列宽scrollX
   * 两者进行比较确定Table scroll的值
   */
  componentDidMount() {
    const {tableId,columns } = this.state;
    let state = giveNewColumns(columns, tableId);
    if(state){
      this.setState({
        scrollX: state.scrollX,
      },()=>{
        this.setState({
          columns: state.columns,
        })
      })
    }

  }

  render(){
    const { dataSource, rowKey,
      handleSelectRow, pagination, components,
      loading,onChange, bordered,scroll,showHeader
    } = this.props;
    const { columns } = this.state;

    /**
     * 没有传rowSelection 传了handleSelectRow 时 使用 handleSelectRow 并封装rowSelection
     * 传了rowSelection 直接使用
     * */
    const rowSelection = handleSelectRow === false ? null : {
      columnWidth: 30,
      fixed: true,
      hideDefaultSelections: false,
      onChange: (selectedRowKeys, selectedRows) => {
        handleSelectRow(selectedRowKeys, selectedRows);
      },
    };
    const { scrollX } = this.state;
    if(pagination && pagination.total){
      pagination.showTotal=(total, range) => `共${total}条 　`;
    }

    return (
      <Table dataSource={dataSource}
             showHeader={showHeader}
             columns={columns}
             components={components}
             rowKey={rowKey || 'key'}
             loading={loading}
             bordered={bordered}
             id={this.state.tableId}
             className={styles.NormalTable}
             pagination={pagination ? pagination : false}
             onChange={onChange}
             scroll={  scrollX > 0 ? { x: scrollX } : scroll}
             rowSelection={ this.props.rowSelection !== 'undefined' ? this.props.rowSelection : rowSelection }
      />
    );
  }

}
NormalTable.propTypes = {
  dataSource: PropTypes.array.isRequired, // 表格数据源 To Antd Table
  bordered: PropTypes.bool, // 是否显示border,
  columns: PropTypes.array.isRequired, // 字段 To Antd Table
  rowKey: PropTypes.string, // rowKey To Antd Table
  handleSelectRow: PropTypes.oneOfType([
    PropTypes.func,
    PropTypes.bool,
  ]), // 行选择的事件,传false 表示不开放行选择 To Antd Table
  pagination: PropTypes.oneOfType([   // 多种类型的数据
    PropTypes.object,
    PropTypes.bool,
  ]),
  components: PropTypes.object, // 默认覆盖的 Table元素 基本没用
  loading: PropTypes.bool,
  onChange: PropTypes.func, // 分页、排序、筛选变化时触发
};
NormalTable.defaultProps = {
  rowKey: 'id',
  handleSelectRow: (selectedRowKeys, selectedRows) => {
    //console.log(selectedRowKeys, selectedRows);
  }, // false,
  pagination: {
    defaultCurrent: 1,
    total: 20,
    pageSize: 5,
    showQuickJumper: true,
    onChange: (current, size) => {
      //console.log(current, size);
    },
  },
  loading: false,
  bordered: false,
  components: undefined,
  onChange: () => {
    //console.log('NormalTable.onChange');
  },
  dataSource: [],
  columns:
    [
      {
        dataIndex: 'id',
        title: 'id',
      },
      {
        dataIndex: 'name',
        title: '名称',
      },
      {
        dataIndex: 'code',
        title: '编码',
        width: 200,
      },
      {
        dataIndex: 'level',
        title: '优先级',
      },
      {
        dataIndex: 'desc',
        title: '描述',
      },
      {
        dataIndex: 'name1',
        title: '名称',
      },
      {
        dataIndex: 'code1',
        title: '编码',
        width: 100,
      },
      {
        dataIndex: 'level1',
        title: '优先级',
      },
      {
        dataIndex: 'desc1',
        title: '描述',
      },
      {
        dataIndex: 'name2',
        title: '名称',
      },
      {
        dataIndex: 'code2',
        title: '编码',
      },
      {
        dataIndex: 'level2',
        title: '优先级',
      },
      {
        dataIndex: 'desc2',
        title: '描述',
      },
      {
        dataIndex: 'name3',
        title: '名称',
      },
      {
        dataIndex: 'code3',
        title: '编码',
      },
      {
        dataIndex: 'level3',
        title: '优先级',
      },
      {
        dataIndex: 'desc3',
        title: '描述',
      },
      {
        dataIndex: 'name4',
        title: '名称',
      },
      {
        dataIndex: 'code4',
        title: '编码',
      },
      {
        dataIndex: 'level4',
        title: '优先级',
      },
      {
        dataIndex: 'desc4',
        title: '描述',
      },
      {
        dataIndex: 'operation',
        title: '操作',
        fixed: 'right',
        width: 120,
        render: (text, record) => {
          return <span><a>编辑 </a>|<a> 删除</a></span>;
        },
      },
    ],

};