import React, { Component } from 'react';
import imgStatic from './../../../consts/imgStatic';

import ReactEcharts from 'amos-viz/lib/echarts';
const centerLevelIcon = imgStatic.centerLevelIcon;

/**
 * 隐患管控
 */
export default class DangerControl extends Component {

  constructor(props) {
    super(props);
    this.state = {    
      seriesData: [],
      yq:0,
      sw:0,
      zl:0,
      jd:'0%'
    };
  }

  componentDidMount(){

    let dates={jd:'20%',          
      seriesData: [
        {value:35, name:'逾期未治理'},
        {value:10, name:'尚未治理'},
        {value:4, name:'治理验收'},
       
    ]};

  if(dates){
    this.setState({ seriesData: dates.seriesData,jd:dates.jd,yq:dates.seriesData[0].value,sw:dates.seriesData[1].value,zl:dates.seriesData[2].value});
  }

  
  }

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


  getOptionsx = () => {

    const { seriesData} = this.state;
   
    return {

      color:['rgba(254, 0, 0, 1)','rgba(255, 214, 0, 1)','rgba(0, 255, 238, 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 {  yq,sw,zl,jd} = this.state;
   return (
      <div className='DangerControl'>
              <div className="DangerControl_1">
               <div className="DangerControl_1_1"><span>隐患管控情况</span></div>
             </div>
             <div className="DangerControl_2">
             <div className="DangerControl_2_1" onClick={this.ondetails}></div>
             <div className="DangerControl_2_2">
              <div  className="DangerControl_2_2_1">
              <div className="AlarmControl8">
                <div className="AlarmControl2">
                      <div className="AlarmControl2_1">
                    
                       <div className="AlarmControl2_12"> 逾期未治理：</div>
                       <div className="AlarmControl2_13">{yq}</div>
                      </div>  
                     <div className="AlarmControl2_2"></div>
                 </div>
                 <div className="AlarmControl2">
                      <div className="AlarmControl2_1">
                    
                       <div className="AlarmControl2_12">尚未治理：</div>
                       <div className="AlarmControl2_13">{sw}</div>
                      </div>  
                     <div className="AlarmControl2_3"></div>
                 </div>
                 <div className="AlarmControl2">
                      <div className="AlarmControl2_1">
                    
                       <div className="AlarmControl2_12">治理验收：</div>
                       <div className="AlarmControl2_13">{zl}</div>
                      </div>  
                     <div className="AlarmControl2_4"></div>
                 </div>
                 <div className="AlarmControl2">
                      <div className="AlarmControl2_1">
                    
                       <div className="AlarmControl2_12">治理进度：</div>
                       <div className="AlarmControl2_13">{jd}</div>
                      </div>  
                     <div className="AlarmControl2_6"></div>
                 </div>
                 </div>
               
              </div>
              <div  className="DangerControl_2_2_2">
              <ReactEcharts option = { this.getOptionsx() } />
              </div>
             </div>
             </div>
            
      </div>
    );
  }
}
