import React from "react";
import { WeaCheckbox } from "ecCom";
import { Col, Icon, Row } 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>
        <div style={{ margin: "10px 0", 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>
    );
  }
}