import React from 'react';
import '../../css/style.css'
import axios from "axios"; //导入axios

import { DatePicker, Checkbox, Pagination, Button } from 'antd';
const { RangePicker } = DatePicker;


const CheckboxGroup = Checkbox.Group;
const plainOptions = ['1', '2', '3'];
const defaultCheckedList = ['1', '3'];

class SearchAlarm extends React.Component {
	  state = {
			checkedList: defaultCheckedList,
			indeterminate: true,
			checkAll: false,
	  };

	  onChange = checkedList => {
			this.setState({
				checkedList,
				indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
				checkAll: checkedList.length === plainOptions.length,
			});
	  };

	  onCheckAllChange = e => {
		  let that = this
			this.setState({
				checkedList: e.target.checked ? plainOptions : [],
				indeterminate: false,
				checkAll: e.target.checked,
			},function(){
				console.log(that.state.checkedList)
			});
	  };
		clickBtn = e =>{
			console.log(this.state.checkedList)
		}
	
    render() {
		let { data, currentPage, totalPage, defaultPageSize } = this.state
		let that = this
        return (
			<div>
			    <div className="site-checkbox-all-wrapper">
					<Checkbox
						indeterminate={this.state.indeterminate}
						onChange={this.onCheckAllChange}
						checked={this.state.checkAll}
					>
						Check all
					</Checkbox>
				</div>
				<Checkbox.Group style={{ width: '100%' }} onChange={this.onChange} value={this.state.checkedList}>
					<Checkbox value="1">Apple</Checkbox>
					<Checkbox value="2">Pear</Checkbox>
					<Checkbox value="3">Orange</Checkbox>
				</Checkbox.Group>
				<Button type="primary" onClick={this.clickBtn}>Primary</Button>
			</div>
        );
    }
};
export default SearchAlarm