import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';

/**
 * 告警管控
 */
export default class AlarmControl extends Component {

  constructor(props) {
    super(props);
    this.state = {
      seriesData:[],
      hj:0,
      gz:0,
      xj:0
    };
  }

  componentDidMount(){

  let dates=[
    {value:3, name:'火警告警'},
    {value:31, name:'故障告警'},
    {value:10, name:'巡检告警'},
   
];

if(dates){

  this.setState({ seriesData: dates,hj:dates[0].value,gz:dates[1].value,xj:dates[2].value});
}

  
  }


  ondetails = (type) => {
    this.props.ondetails("3");
  };




//获取告警管控数据





  getOptionsx = () => {

    const { seriesData } = this.state;
   
    return {

      color:['rgba(243, 12, 12, 1)','rgba(219, 121, 23, 1)','rgba(209, 209, 52, 1)'],
      series: [
        {
          name: "",
          type: "pie",
          radius: ["0%", "55%"],
          center: ["50%", "50%"],
          label: {
              show: false
          },
          itemStyle: {
              normal: {
                  color: 'rgba(24,219,159,0.1)'
              },
          },
          hoverAnimation: false,
          data: [100]
      }, 
          {
              name:'检查点',
              type:'pie',
              radius: ['60%', '72%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                  normal: {
                      show: true,
                      position: 'center',
                      formatter: function(param) {
                          let total = 0;
                          seriesData.forEach(e => {
                            total += e.value;
                          })
                          var view = '{val|' +total + '}\n{name|' + '告警总数' + '}';
                          return view;
                        },
                        textStyle: {
                          rich: {
                              name: {
                                  fontSize: 12,
                                  fontFamily:'Microsoft YaHei',                        
                                  color:'rgba(255,255,255,1)',
                                      },
                              val: {
                                  fontSize: 20,
                                  fontWeight: 'bold',
                                  fontFamily:'Microsoft YaHei',           
                                  color: 'rgba(255,255,255,1)',
                              }
                          }
                      }
                  },
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:seriesData
          }
      ]
    };
  }

 
  render() {
    const {  hj,gz,xj } = this.state;
    
    return (
      <div className="AlarmControl">
            <div className="AlarmControl_1">
               <div className="AlarmControl_1_1"><span>告警管控情况</span></div>
             </div>
             <div className="AlarmControl_2">
             <div className="AlarmControl_2_1" onClick={this.ondetails}> </div>
             <div className="AlarmControl_2_2">
               <div  className="AlarmControl_2_2_1">

                <div className="AlarmControl8">
                <div className="AlarmControl2">
                      <div className="AlarmControl2_1">
                    
                       <div className="AlarmControl2_12"> 火警告警：</div>
                       <div className="AlarmControl2_13">{hj}</div>
                      </div>  
                     <div className="AlarmControl2_2"></div>
                 </div>
                 <div className="AlarmControl2">
                      <div className="AlarmControl2_1">
                    
                       <div className="AlarmControl2_12">故障告警：</div>
                       <div className="AlarmControl2_13">{gz}</div>
                      </div>  
                     <div className="AlarmControl2_3"></div>
                 </div>
                 <div className="AlarmControl2">
                      <div className="AlarmControl2_1" >
                    
                       <div className="AlarmControl2_12">巡检告警：</div>
                       <div className="AlarmControl2_13">{xj}</div>
                      </div>  
                     <div className="AlarmControl2_4"></div>
                 </div>
                 </div>
               </div>

               <div  className="AlarmControl_2_2_2">

               <ReactEcharts option = { this.getOptionsx() } />

               </div>
             </div>
             </div>
      </div>
    );
  }

}
