import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { Button } from '@material-ui/core';
import { WingBlank, WhiteSpace } from '@/components';
import styles from './ListWithApi.module.scss';

@inject('demoListStore')
@withRouter
@observer
class ListWithApi extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        this.props.demoListStore.getDataInfo();
    }
    handleClick = () => {
        this.props.demoListStore.getDataInfo();
    };    
    render() {
        const { demoListStore } = this.props;        
        const { articleListCount, articleList } = demoListStore;

        return (
            <div className={styles.content}>
                {articleListCount <= 0 ? (
                    <div>
                        <Button variant="contained" size="small" color="primary" onClick={this.handleClick}>
                            获取数据
                        </Button>
                    </div>
                ) : (
                    articleList.map((item) => {
                        const { desc, id, type, url, who, publishedAt } = item;
                        return (
                            <React.Fragment key={id}>
                                <WhiteSpace noFirst />
                                <WingBlank className={styles.itemWrap} key={id}>
                                    <Link
                                        to={{
                                            pathname: `/view/iframe/${type}`,
                                            state: { url: encodeURIComponent(url) },
                                        }}
                                        className={styles.item}
                                    >
                                        <h3>
                                            {desc}
                                            <span>{type}</span>
                                        </h3>
                                        <h4>{who}</h4>
                                        <p>{publishedAt}</p>
                                    </Link>
                                </WingBlank>
                            </React.Fragment>
                        );
                    })
                )}                
            </div>
        );
    }
}

export default ListWithApi;