import React, { Component } from 'react';
import { connect } from 'react-redux';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';
import Header from '../component/header/index';
import { Tabs, ListView, PullToRefresh } from 'antd-mobile';
// import { formatDateYear } from '../common/index';
import AnnouncementItem from '../component/item';

@connect(({ announcementModel }) => ({ announcementModel }))
class index extends Component {
  state = {
    selectedTypeJson: {
      id: '',
      title: '最新',
    },
    pageNum: 1,
  };
  componentWillMount = () => {};
  isWeiXin = () => {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
    } else {
      return false;
    }
  };
  getAnnouncementList = () => {
    this.props.dispatch({
      type: 'announcementModel/getAnnouncementList',
      payload: {
        pageNo: this.state.pageNum,
        pageSize: 10,
        sortId: this.state.selectedTypeJson.id,
      },
    });
  };
  getTabList = () => {
    this.props.dispatch({
      type: 'announcementModel/getTabList',
      payload: {},
    });
  };
  onRefresh = () => {
    this.setState(
      {
        pageNum: 1,
      },
      () => {
        this.getAnnouncementList();
      },
    );
  };
  onEndReached = () => {
    this.setState(
      {
        pageNum: this.state.pageNum * 1 + 1,
      },
      () => {
        this.getAnnouncementList();
      },
    );
  };
  componentWillMount() {
    document.title = '公告';
  }
  componentDidMount = () => {
    this.getAnnouncementList();
    this.getTabList();
    var time;
    time = setInterval(function() {
      if (window.js && window.js.shareButtonVisbile) {
        clearInterval(time);
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          window.webkit.messageHandlers.shareButtonVisbile.postMessage({ visible: 1 });
        } else if (/(Android)/i.test(navigator.userAgent)) {
          window.js.shareButtonVisbile(1);
        }
      }
    }, 300);
  };

  render() {
    const customTab = (data, index) => {
      return <div>{data.title}</div>;
    };
    const row = (rowData, sectionID, rowID) => {
      return (
        <AnnouncementItem
          article={rowData}
          rowID={rowID}
          history={this.props.history}
          tabList={this.props.announcementModel.tabList}
        />
      );
    };
    return (
      <div className={styles.body}>
        {this.isWeiXin() ? null : (
          <Header
            leftBtn={() => {
              if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                window.webkit.messageHandlers.H5Finish.postMessage({});
              } else if (/(Android)/i.test(navigator.userAgent)) {
                window.js.H5Finish();
              }
            }}
          >
            公告
          </Header>
        )}
        <div className={styles.index_container}>
          <div className={styles.index_tabs}>
            <Tabs
              tabs={this.props.announcementModel.tabList}
              renderTab={customTab}
              tabBarBackgroundColor="#fff"
              tabBarUnderlineStyle={{ display: 'none' }}
              initialPage={0}
              animated={false}
              onChange={(tab, index) => {
                this.setState({ selectedTypeJson: tab, pageNum: 1 }, () => {
                  this.refs.announcementView.scrollTo(0, 0);
                  this.getAnnouncementList();
                });
              }}
            ></Tabs>
          </div>
          <div className={styles.index_content}>
            <div className={styles.index_content_table}>
              <div className={styles.index_content_table_body}>
                <ListView
                  ref="announcementView"
                  dataSource={this.props.announcementModel.announcementList}
                  renderFooter={() => (
                    <div style={{ padding: 10, textAlign: 'center' }}>
                      {this.props.announcementModel.isLoading ? '加载中...' : '数据更新中'}
                    </div>
                  )}
                  renderRow={row}
                  style={{
                    flex: '1',
                  }}
                  useBodyScroll
                  pageSize={4}
                  scrollRenderAheadDistance={500}
                  onEndReached={this.onEndReached}
                  onEndReachedThreshold={10}
                  pullToRefresh={<PullToRefresh refreshing={false} onRefresh={this.onRefresh} />}
                />
              </div>
              {this.props.announcementModel.announcementList.length === 0 && (
                <div className={styles.index_content_nodata}>数据更新中</div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default index;