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

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

let plainOptions = []
class SearchAlarm extends React.Component {
	constructor(props) {
		super(props);
        this.state={
           startTime : '',
		   endTime : '',
		   
		   currentPage: 1,
		   totalPage:10,
		   defaultPageSize:20,
		   data:[],
		   
		   indeterminate: false,
		   checkAll: false,
		   checkedList: []
        };
    }
	
	// 时间
	onTimeChange = (value,dateString) => {
	  let that = this;
	  this.setState({
		  startTime:dateString[0],
		  endTime:dateString[1]
	  },function(){
		  console.log(that.state.startTime)
		  console.log(that.state.endTime)
	  })
	}
	
	onOk = (value) => {
	  // console.log('onOk: ', value);
	  // 开始查询【日期选择】
	  
	}
	
	// 下载
	onCheckBoxChange =  checkedList => {
		this.setState({
			checkedList,
			indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
			checkAll: checkedList.length === plainOptions.length,
		});
	};
	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)
		// 用来下载 后端交互
// 		fetch('https://down.qq.com/qqweb/PCQQ/PCQQ_EXE/PCQQ2020.exe').then(res => res.blob()).then(blob => {
// 			var a = document.createElement('a');
// 			var url = window.URL.createObjectURL(blob);
// 			var filename = 'myfile.zip';
// 			a.href = url;
// 			a.download = filename;
// 			a.click();
// 			window.URL.revokeObjectURL(url);
// 		})
	}
	
	// 页码
	onPageChange = page => {
		console.log(page);
		// 更新新页数据 后端交互
		
		plainOptions = [1,2,3,4,5]
		this.setState({
		  currentPage: page,
		  data:[
			  {
			   'id':1,
			   'checked':true
			  },
			  {
			   'id':2,
			   'checked':false
			  },
			  {
			   'id':3,
			   'checked':false
			  },
			  {
			   'id':4,
			   'checked':false
			  },
			  {
			   'id':5,
			   'checked':false
			  }
		  ],
		  indeterminate: false,
		  checkAll: false,
		  checkedList: []
		});
    };
	
    render() {
		let { data, currentPage, totalPage, defaultPageSize } = this.state
		let that = this
        return (
			<div style={{
				width:'100%',
				position:'relative'
			}}> 
				<div style={{
					padding:'20px 0',
				}}>
					<RangePicker
					  showTime={{ format: 'HH:mm' }}
					  format="YYYY-MM-DD HH:mm"
					  onChange={this.onTimeChange}
					  onOk={this.onOk}
					/>
					    <Checkbox
							indeterminate={this.state.indeterminate}
							onChange={this.onCheckAllChange}
							checked={this.state.checkAll}
							style={{
								margin:'0 20px',
								color:'white'
							}}
					    >
						   Check all
					    </Checkbox>
					    <Button type="primary" onClick={this.clickBtn} style={{
							margin:'0 20px'
						}}>downLoad</Button>
				</div>
				<div style={{
					height:'calc(100% - 105px)',
					top:'80px',
					width:'calc(100% - 20px)',
					margin:'0 10px',
					backgroundColor:'rgba(239, 192, 192, 0.1)'
				}}>					
					{
						data.length==0?null:
							<Checkbox.Group style={{ width: '100%' }} onChange={that.onCheckBoxChange} value={this.state.checkedList}>
								{
									data.map((item)=>{
									//console.log(item)
									return  <div key={item.id} style={{ width: 150, height:140, border:'1px solid rgba(255, 255, 255, 0.3)', margin:'10px', float:'left', position:'relative'}}>
											   <img style={{width:'100%', height:'100%'}} src='https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png'/>
											   <Checkbox style={{
												   position:'absolute',
												   top:'-8px',
												   right:'-8px'
											   }} value={item.id} defaultChecked ></Checkbox>
											</div>
									})
								}
							</Checkbox.Group>
					}
				</div>
				<Pagination hideOnSinglePage={true} showTitle={false} current={currentPage} onChange={this.onPageChange} pageSize={defaultPageSize} total={totalPage*defaultPageSize} />
			</div>
        );
    }
};
export default SearchAlarm