// 组件
import React from 'react'
import {Select, Checkbox, Divider} from 'antd'
import {observer, inject,} from 'mobx-react'
import {withRouter} from "react-router-dom";
import { runInAction} from 'mobx';

@withRouter
@inject('selectStore')
@observer
class SelectAll extends React.Component {
    state = {
        isCheckedAll: false
    }
    componentWillMount () {
        this.setState({
            isCheckedAll: this.props.isCheckedAll
        })
    }
    _onChange = (e) => {
        // 判断 是否 选中
        runInAction(() => {
            if (e.target.checked === true) { // 全选操作
            } else {// 取消全选
            }
        })
    }

    onChanges = (key) => {
        if (key.length === this.props.children.length) {
            this.props.onChange(key,true)
        } else {
            this.props.onChange(key,false)
        }
    }
    render() {
        return (
            <Select mode="multiple" 
                    onChange={ this.onChanges } 
                    className="select-multiple-all"
                    style={{width: '250px'}}
                    showArrow ={ true }
                    maxTagCount={ 1 } // 最大tag数
                    maxTagTextLength={ 20 }
                    value={ [this.props.value] }
                    disabled={ false }
                    allowClear
                    dropdownRender={allSelectValue => (
                        <div>
                            <div>
                                <Checkbox checked={this.props.isCheckedAll} onChange={this._onChange}>All</Checkbox>
                            </div>
                            <Divider/>
                            {allSelectValue}
                        </div>
                    )}>
                {this.props.children}
            </Select>
        )
    }
}

export default SelectAll

// 使用
<SelectAll value={value}
            onChange={this.change}
            checked={false} 
            isCheckedAll = {selectStore.isCheckedAll}
>
    {list.map(item => (
        <Option key={item.value} value={value}>
            {item.label}
        </Option>
    ))}
</SelectAll>