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

import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;



import { Card } from 'antd';
const { Meta } = Card;

class SearchAlarm extends React.Component {
	constructor(props) {
		super(props);
        this.state={
           startTime : '',
		   endTime : ''
        };
    }
	
	
	onChange = (value,dateString) => {
// 	  console.log('Selected Time: ', value);
// 	  console.log('Formatted Selected Time: ', 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);
	  // 开始查询
	  
	}
	
	componentDidMount(){
		// 用来下载
		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);
		})
	}
	
	
	
	
    render() {
        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.onChange}
					  onOk={this.onOk}
					/>
				</div>
				<div style={{
					height:'calc(100% - 80px)',
					top:'80px',
					width:'calc(100% - 20px)',
					margin:'0 10px',
					backgroundColor:'rgba(239, 192, 192, 0.1)'
				}}>
					<div style={{ width: 150, height:140, border:'1px solid rgba(255, 255, 255, 0.3)', margin:'10px', float:'left'}}>
					   <img style={{width:'100%', height:'100%'}} src='https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png'/>,
					</div>
				</div>
			</div>
        );
    }
};
export default SearchAlarm