import React from 'react';

import { List, Spin } from 'antd';
import classNames from 'classnames';
import styles from './NoticeList.less';
import Alarm from './Templates/Alarm';
import Case from './Templates/Case';
import Notice from './Templates/Notice';
import Unknown from './Templates/Unknown';

const Empty = ({ emptyText }) => (
  <div className={styles.notFound}>
    <img
      src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
      alt="not found"
    />
    <div>{emptyText}</div>
  </div>
);

class NoticeList extends React.Component {
  constructor(props) {
    super(props);
    this.data = props.data;
    this.emptyText = props.emptyText;
    this.confirmRead = props.confirmRead;
    this.loadMore = props.loadMore;
    this.container = React.createRef();
    this.state = {
      isLoading: false,
    };
  }

  componentDidMount() {
    if (this.container.current) {
      this.container.current.addEventListener(
        'scroll',
        this.throttle(this.handleScroll.bind(this), 30),
      );
    }
  }

  throttle(fn, wait) {
    var pre = Date.now();
    return function() {
      var context = this;
      var args = arguments;
      var now = Date.now();
      if (now - pre >= wait) {
        fn.apply(context, args);
        pre = Date.now();
      }
    };
  }

  handleScroll(e) {
    e.stopPropagation();
    if (!this.container.current) return;
    let current = this.container.current;
    if (
      current.scrollHeight - current.scrollTop - current.offsetHeight <=
      100
    ) {
      this.handleLoadMore();
    }
  }

  handleLoadMore() {
    if (this.state.isLoading) return;
    this.setState(
      {
        isLoading: true,
      },
      () => {
        if (!this.loadMore) return;
        this.loadMore().then(data => {
          this.setState({
            isLoading: false,
          });
        });
      },
    );
  }

  render() {
    if (!this.data || this.data.length === 0) {
      return <Empty emptyText={this.emptyText} />;
    }
    return (
      <div className={styles.container} ref={this.container}>
        <List
          className={styles.list}
          dataSource={this.data}
          renderItem={(item, i) => {
            const itemCls = classNames(styles.item, {
              [styles.read]: item.read,
            });
            let messageTemplate = <></>;
            switch (item.infoType) {
              case 'scadaType':
                messageTemplate = (
                  <Alarm message={item} confirmRead={this.confirmRead} />
                );
                break;
              case 'caseType':
                messageTemplate = (
                  <Case message={item} confirmRead={this.confirmRead} />
                );
                break;
              case 'sysType':
                messageTemplate = (
                  <Notice message={item} confirmRead={this.confirmRead} />
                );
                break;
              default:
                messageTemplate = (
                  <Unknown message={item} confirmRead={this.confirmRead} />
                );
                break;
            }
            return (
              <List.Item className={itemCls} key={item.id || i}>
                {messageTemplate}
              </List.Item>
            );
          }}
        />
        <div className={styles.bottomBar}>
          {this.state.isLoading ? (
            <>
              <Spin /> 加载中...
            </>
          ) : (
            <span>下拉加载更多</span>
          )}
        </div>
      </div>
    );
  }
}

export default NoticeList;
