import React from 'react';
import { Layout, Card } from 'antd'
import CardList from '../common/CardList'
import { connect } from 'dva'
import Markdown from 'react-markdown'

const markdown = `
# 快速上手
点击访问[产品文档](http://192.168.253.189:82)

`
const { Content, Sider } = Layout

class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'main/fetchRecentChart' });
        dispatch({ type: 'main/fetchRecentDashboard' });
    }

    render() {
        return (
            <Layout>
                <Content>
                    <Layout>
                        <Content>
                            <Card style={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                justifyContent: 'left'
                            }}
                                bodyStyle={{
                                    padding: '10px'
                                }}
                            >
                                <CardList
                                    mode='homepage' 
                                    type='chart' 
                                    list={this.props.main.recentChart}
                                />
                            </Card>
                            <Card style={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                justifyContent: 'left'
                            }}
                                bodyStyle={{
                                    padding: '10px'
                            }}
                            >
                                <CardList
                                    mode='homepage' 
                                    type='dashboard' 
                                    list={this.props.main.recentDashboard}
                                />
                            </Card>
                        </Content>
                        <Sider width={300}> 
                            {/* TODO: 主页尚未上线，暂时隐藏  */}
                            <Card>
                                <Markdown source={markdown}/>
                            </Card>
                            <Card>
                                {/* 公告与帮助区 */}
                            </Card>
                            <Card>
                                {/* 最近访问记录 */}
                            </Card>
                        </Sider>
                    </Layout>
                </Content>
            </Layout>
        );
    }
}

export default connect(({ present: { main } }) =>  { return { main }})(HomePage)