import React from 'react'
import { WeaCheckbox } from 'ecCom';
import { Row, Col, Icon } from 'antd';

export default class SelectItemsWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showContent: true
        }
    }
    render() {
        return (
            <div style={{ margin: "10px 20px" }}>
                    <div style={{marginBottom: "10px", cursor: "pointer"}} onClick={() => this.setState({
                        showContent: !this.state.showContent
                    })}>
                        <div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} /></div>
                        <div style={{float: 'right', fontWeight: "600"}}>已选中0个字段
                            <span style={{marginLeft: "10px", fontWeight: "400"}}>
                                {
                                    this.state.showContent ? <Icon type="down" /> : <Icon type="left" />
                                }
                            </span>
                        </div>
                    </div>
                    {
                        this.state.showContent && <div style={{height: "160px",
                            border: "1px solid #eee",
                            padding: "10px",
                            overflowY: "scroll",
                            borderRadius: "5px"
                        }}>
                        <Row>
                            {
                                this.props.items && this.props.items.map(item => (
                                    <Col span={6}><WeaCheckbox content={item.title} value={item.checked}/></Col>
                                ))
                            }
                        </Row>
                    </div>
                    }
                    
                </div>
        )
    }
}