import React from 'react'
import { Icon } from 'antd'
import "./index.less"

export default class GroupCard extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showContent: true
        }
    }
    
    render() {
        return (
            <div className="groupCard">
                <div className="titleWrapper">
                    <span className="groupTitle">{this.props.title}</span>
                    <div className="tipWrapper">{this.props.tips}</div>
                    <div className="operateIconWrapper" onClick={() => {this.setState({showContent: !this.state.showContent})}}>
                        {
                            this.state.showContent ? <Icon type="down" /> : <Icon type="left" />
                        }
                    </div>
                </div>
                {
                    this.state.showContent && <div className="contentWrapper">
                        {this.props.children}
                    </div>
                }
            </div>
            
        )
    }
}