import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Pagination } from 'antd';
import classNames from 'classnames'
import { useQuery } from '../../utils/hooks';
import { ObjSpEqual } from '../../utils/utils'
import Styles from './style.less'

class PaginationWrapper extends React.PureComponent {

  state = {
    data: {
      current: 1,
      total: 0,
      pages: 0,
    },
    loadding: false,
  }

  componentDidMount () {
    this.fetchData(1)
  }

  componentDidUpdate(prevProps) {
    if (!ObjSpEqual(prevProps.params, this.props.params)) {
      this.fetchData(1)
    }
  } 

  fetchData = (page) => {
    this.setState({ loadding: true })
    
    const requestParams = this.props.params || {}
    this.props.request({
      ...requestParams,
      params: {
        pageNum: page,              // 有的接口是 pageNum
        pageNumber: page,  // 有的接口是 pageNumber
        ...(requestParams.params || {}),
      }
    }).then((res) => {
      this.setState({ loadding: false, data: res })
    })
  }

  handlePageChange = (page) => {
    this.fetchData(page)
  }

  render() {
    const { className, style, bodyClass, footerClass, render } = this.props
    const { data } = this.state

    return (
      <div className={classNames(Styles['pg-wrapper'], className)} style={style}>
        <div className={classNames(Styles.body, bodyClass)}>
          {render(data)}
        </div>
        <div className={classNames(Styles.footer, footerClass)}>
          <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={this.handlePageChange} current={data.current}/>
        </div>
      </div>
    )
  }
}

PaginationWrapper.propTypes = {
  request: PropTypes.func.isRequired,
  render: PropTypes.func.isRequired,
  params: PropTypes.object,
  className: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.array,
    PropTypes.object,
  ]),
  bodyClass: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.array,
    PropTypes.object,
  ]),
  footerClass: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.array,
    PropTypes.object,
  ]),
  style: PropTypes.object,
}

// /**
//  * 分页封装
//  * @param {page, params, request, render, className, style, bodyClass, footerClass} props 
//  */
// function PaginationWrapper(props) {
//   const defaultPage = props.page || 1
//   const [pageNum, setPage] = useState(defaultPage)
//   const requestParams = props.params || {}
//   const [data = {}, loading, err] = useQuery({ ...requestParams, params: { ...(requestParams.params || {}), pageNum, pageNumber: pageNum }}, props.request)

//   // if (typeof props.setData === 'function') {
//   //   props.setData(data)
//   // }

//   console.log('------render PaginationWrapper-------', pageNum, data, loading)

//   return (
//     <div className={classNames(Styles['pg-wrapper'], props.className)} style={props.style}>
//       <div className={classNames(Styles.body, props.bodyClass)}>
//         {props.render(data)}
//       </div>
//       <div className={classNames(Styles.footer, props.footerClass)}>
//         <Pagination showQuickJumper defaultCurrent={defaultPage} total={data.total} onChange={pg => setPage(pg)} current={data.current}/>
//       </div>
//     </div>
//   )
// }

export default PaginationWrapper
