import React from 'react'
import { Tabs, Button, Icon, Input, Menu, Dropdown, Card, Avatar } from 'antd'
import './dashboard.less'
import '../../models/dashboard'
import { connect } from 'dva'
const { Search } = Input
const { TabPane } = Tabs
const { Meta } = Card;


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

    generateCard(listType) { 
        let listTypeMapper = {
            "Dynamic": this.props.dashboard.myDynamicDashboardList,
            "Static": this.props.dashboard.myStaticDashboardList, 
        }
        const list = listTypeMapper[listType];
        return list.map(i => {
            return (
                <Card key={i.dashboardID}
                    className='dashboard-card'
                    cover={<img alt={i.coverAlt} src={i.coverImg} />}
                    actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
                >
                    <Meta
                        avatar={<Avatar src={i.avatar} />}
                        title={i.title}
                        description={i.description}
                    />
                </Card>
            )
        })
    }

    render() {
        const { dispatch } = this.props;

        return (
            <Tabs
                className='dashboard-tabs'
                type="card"
                defaultActiveKey="1"
                tabBarExtraContent={
                    <div className='dashboard-tabs-tools'>
                        <Search
                            placeholder="请输入关键字"
                            onSearch={value => console.log(value)}
                        />
                        <Dropdown overlay={(
                            <Menu onClick={(item, key, keyPath) => {
                                const type = item.key;
                                dispatch({ type: 'dashboard/resetNewModel' });
                                dispatch({ type: 'dashboard/setNewModelField', name: 'type', value: type });
                                dispatch({ type: 'main/redirect', path: { pathname: '/dashboard/' + type + '/create' } });
                            }}>
                                <Menu.Item key='static'>报告</Menu.Item>
                                <Menu.Item key='dynamic'>看板</Menu.Item>
                            </Menu>
                        )} trigger={['click']}>
                            <Button style={{ display: 'inline-block' }}>
                                <Icon type="plus" />创建
                            </Button>
                        </Dropdown>
                    </div>
                }
                onChange={(key) => {
                    this.setState({
                        activeTab: key === '1' ? 'static' : 'dynamic'
                    });
                }}

            >
                <TabPane tab="我的看板" key="1" >
                    <div style={{ display: 'flex', justifyContent: 'space-around', background: '#ECECEC', padding: '30px', flexWrap: 'wrap' }}>
                        {this.generateCard("Dynamic")}
                    </div>


                </TabPane>
                <TabPane tab="我的报告" key="2" >
                    {/* 我的报表报告 */}
                </TabPane>

            </Tabs>
        )


    }
}


function mapStateToProps({present: {dashboard}}) {
    return { dashboard }
}

export default connect(mapStateToProps)(Dashboard)