import React, { Component } from 'react'
import { Card, Col, Dropdown, Menu, Row, Statistic } from 'antd'
import { AntIcon } from 'components'

export default class statistics extends Component {
    render() {
        return (
            <Row gutter={16}>
                <Col lg={5} md={8} sm={24}>
                    <Card bordered={false} hoverable={true}>
                        <Statistic value={0} className="text-center" title="已完成的项目" />
                    </Card>
                </Col>
                <Col lg={5} md={8} sm={24}>
                    <Card bordered={false} hoverable={true}>
                        <Statistic value={6} className="text-center" title="正在进行的项目" />
                    </Card>
                </Col>
                <Col lg={5} md={8} sm={24}>
                    <Card bordered={false} hoverable={true}>
                        <Statistic value={0} className="text-center" title="还未开始的项目" />
                    </Card>
                </Col>
                <Col lg={9} md={24}>
                    <Card bordered={false} hoverable={true}>
                        <Row>
                            <Col span={12}>
                                <Statistic value={8893} className="text-center" title="用户总量" />
                            </Col>
                            <Col span={12}>
                                <Statistic
                                    value={1255}
                                    valueStyle={{ color: '#3f8600' }}
                                    className="text-center"
                                    title={
                                        <Dropdown
                                            overlay={
                                                <Menu>
                                                    <Menu.Item>当月活跃用户</Menu.Item>
                                                    <Menu.Item>当年活跃用户</Menu.Item>
                                                </Menu>
                                            }
                                        >
                                            <span>
                                                当月活跃用户
                                                <AntIcon type="down" />
                                            </span>
                                        </Dropdown>
                                    }
                                    prefix={
                                        <AntIcon style={{ fontSize: '13px' }} type="arrow-up" />
                                    }
                                ></Statistic>
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>
        )
    }
}
