text: import React from 'react'
  import propTypes from 'prop-types'
  import { Table, Icon, Tooltip } from 'antd'
  import styles from './index.less'
  
  export default class DIYTable extends React.PureComponent {
    constructor(props) {
      super(props)
      this.state = {
        currentPage: 1
      }
    }
  
    componentWillMount() {
      const { header, action, data } = this.props
  
      this.makeColumns(header, action, data)
    }
  
    componentWillReceiveProps(props) {
      this.changeProps(props)
    }
  
    changeProps(props) {
      const { header, action, currentPage, data } = props
      this.setState({ currentPage })
      this.makeColumns(header, action, data)
    }
  
    makeColumns(headers, action, data) {
      this.columns = this.props.noIndex
        ? []
        : [
            {
              dataIndex: 'rowIndex',
              title: '序号',
              width: 70,
              fixed: this.props.rowIndexFixed
            }
          ]
  
      for (const header of headers) {
        this.columns.push({
          ...header
        })
      }
  
      if (action) {
        const maxActionCount = Math.max(...data.map(action).map(i => (i ? i.length : 0))) // the number of action
        this.columns.push({
          key: 'x',
          title: '操作',
          width: this.props.scroll ? 230 : maxActionCount * 50 + 10,
          fixed: this.props.fixed,
          render: row => {
            const actions = action(row)
            if (!actions) {
              return <div />
            }
            const buttons = actions.map(({ color, name, key, icon, hidden }, index) => {
              return (
                <Tooltip key={index} title={name}>
                  <a
                    key={key}
                    onClick={e => {
                      e.preventDefault()
                      if ('onCtrlClick' in this.props) {
                        this.props.onCtrlClick(key, row)
                      }
                    }}
                    style={{
                      color,
                      marginRight: 12,
                      display: hidden ? 'none' : 'inline-block',
                      fontSize: 14
                    }}
                  >
                    <Icon type={icon} />
                  </a>
                </Tooltip>
              )
            })
            return <div>{buttons}</div>
          }
        })
      }
    }
  
    onPageChangeHandler = currentPage => {
      this.setState({
        currentPage
      })
      if ('onChange' in this.props) {
        this.props.onChange(currentPage)
      }
    }
  
    render() {
      return (
        <div className="myy-table">
          <Table
            rowSelection={this.props.rowSelection}
            scroll={this.props.scroll}
            dataSource={this.props.data.map((row, i) => ({ ...row, rowIndex: i + 1, key: i + 1 }))}
            columns={this.columns}
            rowClassName={this.props.getRowClassName}
            loading={this.props.loading}
            pagination={
              this.props.pagination !== false
                ? {
                    total: this.props.total,
                    pageSize: this.props.pageSize,
                    current: this.state.currentPage,
                    onChange: this.onPageChangeHandler,
                    showTotal(total, range) {
                      return (
                        <span className={styles.pageTotal}>
                          共<span className={styles.count}>{total}</span>条
                        </span>
                      )
                    }
                  }
                : false
            }
            footer={this.props.footer}
          />
        </div>
      )
    }
  }
  
  DIYTable.propTypes = {
    pageSize: propTypes.number
  }
  
  DIYTable.defaultProps = {
    pageSize: 20
  }
  