import React from 'react';
import styles from './index.css';
import { connect } from 'dva';
import { Button } from 'antd';

@connect(({ news }) => ({
...news,
}))
class Details extends React.Component {
constructor() {
super();
this.state = {
IsshowP: false,
IsshowN:false
// IsshowN:true
};
}

loadDetails(Id) {
const parentId = this.props.history.location.query;
if (!Id) {
Id = parentId.id;
}
this.props.dispatch({
type: 'news/getNewsdetail',
payload: {
id: 65,
},
});
}
componentWillMount() {
this.loadDetails();
}
render() {
const news = this.props.news || { PreNews: [{ Title: '' }], NextNews: [{ Title: '' }] };
return (
// 资讯详情页
<div className={styles.Details}>
<div className={styles.banner}>
<img src={require('@/assets/images/banner2.png')} alt="" />
</div>
<div className={styles.content}>
<div className={styles.Box}>
<div className={styles.Title}>{news.title}</div>
<span className={styles.Time}>{news.pubTime}</span>

        <div className={styles.TxtBox}>
          <div className={styles.TxtBox_Top}>
            <div dangerouslySetInnerHTML={{ __html: news.context }} />
          </div>
        </div>
      </div>
      {/* 上下篇文章切换部分 */}
      <span className={styles.post_nav_line} />
      <div className={styles.post_nav_box}>
      {/* 当为undefined或null，不会被渲染 */}
        {news.PreNews.id ? (
          <div className={styles.post_nav_prev} onClick={e => {}}>
            <Button
              disabled={this.state.IsshowP}
              onClick={e => {
                this.lookPrevious(news.PreNews.id);
              }}
            >
              <span>上一篇：{news.PreNews.Title}</span>
            </Button>
          </div>
        ) : (  undefined)}

        {news.NextNews.id ? (
          <div className={styles.post_nav_next}>
            <Button
              disabled={this.state.IsshowN}
              onClick={e => {
                this.lookLast(news.NextNews.id);
              }}
            >
              <span>下一篇：{news.NextNews.Title}</span>
            </Button>
          </div>
        ) : (
          undefined
        )}
      </div>
    </div>
  </div>
);

}
// 上一篇
lookPrevious(id) {
if (id) {
this.loadDetails(id);
this.setState({
IsshowN: false,
});
} else {
this.setState({
IsshowP: true,
});
}
}
// 下一篇
lookLast(id) {
if (id) {
this.loadDetails(id);
this.setState({
IsshowP: false,
});
} else {
this.setState({
IsshowN: true,
});
}
}}

export default Details;