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,
            checkStatus: false
        }
    }

    handleAllChecked(value) {
        value = value == 1 ? true : false
        let items = [...this.props.items]
        items.map(item => { item.checked = value })
        this.setState({
            checkStatus: value
        })
        this.props.onChange(items)
    }

    handleItemChange(value, record) {
        value = value == 1 ? true : false
        let items = [...this.props.items]
        items.map(item => {
            if(item.id == record.id) {
                item.checked = value
            }
        })
        this.props.onChange(items)
    }

    render() {
        return (
            <div style={{ margin: "10px 20px" }}>
                    <div style={{marginBottom: "10px", cursor: "pointer"}} >
                        <div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} onChange={(value) => {this.handleAllChecked(value)}} value={this.state.checkStatus}/></div>
                        <div style={{float: 'right', fontWeight: "600"}} onClick={() => this.setState({
                            showContent: !this.state.showContent
                            })}>已选中{this.props.items ? this.props.items.filter(item => item.checked).length : 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.name} value={item.checked} onChange={(value) => {this.handleItemChange(value, item)}}/></Col>
                                ))
                            }
                        </Row>
                    </div>
                    }
                    
                </div>
        )
    }
}