import React, { Component } from 'react';
import router from 'umi/router';
import styles from './index.less';
import Header from '../component/header/index';
import Notice from '../component/notice/notice';
import { connect } from 'dva';
import { Button } from 'antd-mobile';
import AnnouncementItem from '../component/item';

@connect(({ announcementDetailModel }) => ({ announcementDetailModel }))
class index extends Component {
  state = {
    selectedTypeJson: {
      type: 3,
    },
    id: this.props.location.query.rowID,
  };
  componentWillMount() {
    document.title = '公告';
    //shareButtonVisbile(0);
  }
  componentDidMount() {
    this.getDetail();
    this.getTitleListBySameSort();

    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: 0 });
        } else if (/(Android)/i.test(navigator.userAgent)) {
          window.js.shareButtonVisbile(0);
        }
      }
    }, 300);
  }
  isWeiXin = () => {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
    } else {
      return false;
    }
  };
  componentDidUpdate(prevProps) {
    // if (this.props.location.query.rowID !== prevProps.location.query.rowID) {
    //     window.scrollTo(0, 0);
    //     this.getDetail();
    //     this.getTitleListBySameSort();
    //   }
  }
  getDetail = () => {
    this.props.dispatch({
      type: 'announcementDetailModel/getDetail',
      payload: {
        id: this.props.location.query.rowID,
      },
    });
  };
  getTitleListBySameSort = () => {
    this.props.dispatch({
      type: 'announcementDetailModel/getTitleListBySameSort',
      payload: {
        id: this.props.location.query.rowID,
      },
    });
  };
  toList = () => {
    this.props.history.push(
      '/announcement/list?rowID=' +
        this.props.location.query.rowID +
        '&sortId=' +
        this.props.location.query.sortId,
    );
  };

  toShare = () => {
    const { title } = this.props.announcementDetailModel.article;
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      window.webkit.messageHandlers.toShare.postMessage({
        title: title,
        content: title,
        url: window.location.href,
      });
    } else if (/(Android)/i.test(navigator.userAgent)) {
      window.js.toShare(title, '', title, window.location.href);
    }
  };

  render() {
    return (
      <div className={styles.notice_container}>
        {this.isWeiXin() ? null : (
          <Header
            leftBtn={() => {
              this.props.history.push('/announcement/list');
              // router.goBack();
            }}
            rightBtn={() => {
              this.toShare();
            }}
            rightText="分享"
          ></Header>
        )}
        <Notice article={this.props.announcementDetailModel.article} />
        <div className={styles.separate}></div>
        <div className={styles.notice_list}>
          
          <div className={styles.notice_list_title}>
            <p>更多通知</p>
          </div>
          <div className={styles.notice_list_content}>
            {this.props.announcementDetailModel.announcementListArr.map((data, index) => {
              return (
                <div key={index}>
                  <AnnouncementItem article={data} rowID={index} history={this.props.history} />
                </div>
              );
            })}
          </div>
          <div className={styles.notice_list_footer}>
            <Button className={styles.notice_list_footer_button} onClick={this.toList}>
              查看全部
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default index;