import React from 'react';
import PropTypes from 'prop-types';

import './Leftbartop.less';
class LeftBarTop extends React.PureComponent {
    static propTypes = {
        topMenuList: PropTypes.arrayOf(
            PropTypes.shape({
                name: PropTypes.string,
                iconUrl: PropTypes.string,
                num: PropTypes.number,
                to: PropTypes.string,
                numStyle: PropTypes.object,
            }),
        ),
        history: PropTypes.object,
    };

    handleClickMenu(url) {
        this.props.history.push(url);
    }
    render() {
        console.log('render leftbartop');
        return (
            <div className="todolist__leftBartTopWrap">
                {this.props.topMenuList.map(each => {
                    const { name, iconUrl, num, to, numStyle } = each;
                    return (
                        <span
                            className="todolist__leftBartTopItemWrap"
                            onClick={this.handleClickMenu.bind(this, to)}
                            key={to}
                        >
                            <span
                                className={`todolist__leftBartTopIcon todolist__${iconUrl}`}
                            />
                            <span className="todolist__leftBartTopLabel">
                                {name}
                            </span>
                            <span
                                className="todolist__leftBartTopNum"
                                style={numStyle}
                            >
                                {num}
                            </span>
                        </span>
                    );
                })}
            </div>
        );
    }
}
export default LeftBarTop;