import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'antd';
import _ from 'lodash';
import Nodata from '../Nodata';


class PullRefresh extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
    this.pullRef = {};
    // 节流
    this.onScrollList = _.throttle(this.handleScroll, 200, {
      leading: false,
      trailing: true,
    });
  }

  componentDidMount() {
    let dom = document.querySelector('.pull-refresh-wrap');
    dom && dom.addEventListener('scroll', this.onScrollList);
  }

  componentWillUnmount() {
    let dom = document.querySelector('.pull-refresh-wrap');
    dom && dom.removeEventListener('scroll', this.onScrollList)
  }


  handleScroll = () => {
    if (this.props.count < this.props.pageSize) return;
    if (this.props.type === 1 || this.props.type === 2) return;
    const wrap = this.pullRef;
    const currentScroll = wrap.scrollTop + wrap.clientHeight

    // 触底
    if (currentScroll >= (wrap.scrollHeight - 200)) {
      this.loadData()
    }
  }


  handleLoadClick = () => {
    this.loadData();
  }

  loadData = () => {
    this.props.onPullRefresh()
  }


  renderLoading() {
    switch (this.props.type) {
      case 0:   // 加载更多
        return <div className='text-center' onClick={this.handleLoadClick}>显示更多</div>
      case 1: // 加载中
        return (
          <div className='text-center'>
            <Icon type="loading" />
            <span className='text-center'>加载中...</span>
          </div>
        )
      case 2: // 无样式
        return <div className='text-center'>没有更多了</div>
      default:
        return <div className='text-center'>没有更多了</div>
    }
  }


  render() {
    const { className, count, children } = this.props;
    return (
      <div
        className={`pull-refresh-wrap ${className}`}
        ref={dom => { this.pullRef = dom }}
      >

        {children}

        {
          count < 1 && <Nodata _html="暂无未读消息"/> 
        }

        {/* 大于分页数据才显示loading */}
        {/* {this.props.count >= this.props.pageSize ? this.renderLoading() : null} */}

      </div>

    )
  }

}


PullRefresh.propTypes = {
  className: PropTypes.string,
  children: PropTypes.any,
  onPullRefresh: PropTypes.func.isRequired,
  type: PropTypes.oneOf([0, 1, 2]),
  count: PropTypes.number.isRequired,
  pageSize: PropTypes.number.isRequired,
}


export default PullRefresh
