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

    const select={backgroundColor:'#0C85B1',color:'#FFF700'};
    const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
    return (
      <div className='risk-trend-view common-margin'>
        <div className='daily-title  daily-title-content'>安全风险总体趋势</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}/>
           <Button size='sm' children={<span>上升数</span>} className='button-style'  value="3" style={(value == '3')?select:noselect}/>
           <Button size='sm' children={<span>治理数</span>} className='button-style'  value="4" style={(value == '4')?select:noselect}/>
         </ButtonGroup>
        <div className='risk-trend-content'>
           <ReactEcharts option={riskTrendData}  style={{ height: '280px', width: '1100px',left:'-60px'}} />
         </div>
      </div>
    );
  }
}

RiskTrend.propTypes = {};

export default RiskTrend;
