content: import React from 'react'
  import PropTypes from 'prop-types'
  import { Table } from 'antd'
  import { request } from 'utils'
  import lodash from 'lodash'
  import './DataTable.less'
  
  class DataTable extends React.Component {
    constructor (props) {
      super(props)
      const { dataSource, pagination = {
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条`,
        current: 1,
        total: 100 },
      } = props
      this.state = {
        loading: false,
        dataSource,
        fetchData: {},
        pagination,
      }
    }
  
    componentDidMount () {
      if (this.props.fetch) {
        this.fetch()
      }
    }
  
    componentWillReceiveProps (nextProps) {
      const staticNextProps = lodash.cloneDeep(nextProps)
      delete staticNextProps.columns
      const { columns, ...otherProps } = this.props
  
      if (!lodash.isEqual(staticNextProps, otherProps)) {
        this.props = nextProps
        this.fetch()
      }
    }
  
    handleTableChange = (pagination, filters, sorter) => {
      const pager = this.state.pagination
      pager.current = pagination.current
      this.setState({
        pagination: pager,
        fetchData: {
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        },
      }, () => {
        this.fetch()
      })
    }
  
    fetch = () => {
      const { fetch: { url, data, dataKey } } = this.props
      const { fetchData } = this.state
      this.setState({ loading: true })
      this.promise = request({
        url,
        data: {
          ...data,
          ...fetchData,
        },
      }).then((result) => {
        if (!this.refs.DataTable) {
          return
        }
        const { pagination } = this.state
        pagination.total = result.total || pagination.total
        this.setState({
          loading: false,
          dataSource: dataKey ? result[dataKey] : result.data,
          pagination,
        })
      })
    }
  
    render () {
      const { fetch, ...tableProps } = this.props
      const { loading, dataSource, pagination } = this.state
  
      return (<Table
        ref="DataTable"
        bordered
        loading={loading}
        onChange={this.handleTableChange}
        {...tableProps}
        pagination={pagination}
        dataSource={dataSource}
      />)
    }
  }
  
  
  DataTable.propTypes = {
    fetch: PropTypes.object,
    rowKey: PropTypes.string,
    pagination: React.PropTypes.oneOfType([
      React.PropTypes.bool,
      React.PropTypes.object,
    ]),
    columns: PropTypes.array,
    dataSource: PropTypes.array,
  }
  
  export default DataTable
  