import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts';
import {recentData1,recentData2} from './data';
import { Button } from 'amos-framework';
const ButtonGroup = Button.Group;
class RecentStatistics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value:'1',
      recentData:recentData1
    };
  }
  handleChange = (value) => {
    if(value == '1'){
      this.setState({value:value,recentData:recentData1})
    }else{
      this.setState({value:value,recentData:recentData2})
    }


  }
  render() {
    const {value,recentData} =this.state

    const select={backgroundColor:'#0C85B1',color:'#FFF700'};
    const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
    return (
      <div className='recent-statistics-view common-margin'>
         <div className='daily-title  daily-title-content'>最近 7 日风险统计</div>
         <ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}>
           <Button size='sm' children={<span>告警</span>} className='button-style' value="1" style={(value == '1')?select:noselect} />
           <Button size='sm' children={<span>隐患</span>} className='button-style'  value="2" style={(value == '2')?select:noselect}/>
         </ButtonGroup>
         <div className='recent-statistics-content'>
           <ReactEcharts option={recentData}  style={{ height: '100%', width: '100%' }} />
         </div>
      </div>
    );
  }
}

RecentStatistics.propTypes = {};

export default RecentStatistics;
