import React from 'react';
import { inject } from 'mobx-react';
import OrgTree from '../OrgTree';
import { Checkbox, Row, Col, Radio } from 'antd';
import './index.less';

@inject('org')
class OrgTreeWithSystem extends React.Component {
  constructor(props) {
    super(props);
    this.treeRef = React.createRef();
    this.state={
      flag:false
    };
  }
  onChange = flag => {
    // const { org } = this.props;
    // const ids = flag ? org.orgList.map(v => v.id) : [org.orgList[0].id];
    // this.onExpand(ids);
    this.setState({flag})
  };

  onExpand = expandKeys => {
    this.treeRef.current.onExpand(expandKeys);
  };

  renderHeader = () => {
    const { isInclude, isIncludeChange } = this.props;
    return (
      <div className="system-org-tree-header">
        <Row>
          <Col sm={24} xl={8}>
            <Checkbox onChange={e => this.onChange(e.target.checked)}>展开全部</Checkbox>
          </Col>
          {isIncludeChange && (
            <Col sm={24} xl={16} className="system-org-has-include">
              <span>子组织 :</span>
              <Radio.Group value={isInclude} onChange={e => isIncludeChange(e.target.value)}>
                <Radio value={1}>包含</Radio>
                <Radio value={0}>不包含</Radio>
              </Radio.Group>
            </Col>
          )}
        </Row>
      </div>
    );
  };
  render() {
    return <OrgTree  {...this.props} launchFlag={this.state.flag} ref={this.treeRef} renderHeader={this.renderHeader} className="lm-org-tree-with-system" />;
  }
}

export default OrgTreeWithSystem;
