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

/**
 * 风险管控
 */
export default class RiskControl extends Component {

  constructor(props) {
    super(props);
    this.state = {
      seriesData:[],
      shikong:0,
      shoukongx:'0%',
      shikongx:'0%',
      shoukong:0,
      yiji:0,
      erji:0,
      sanji:0,
      siji:0

    };
  }

  componentDidMount() {
   
   let dates={
    seriesData:[
      {value:3, name:'受控'},
      {value:7, name:'失控'},                            
  ],
    yiji:10,
    erji:20,
    sanji:30,
    siji:40,
    shoukongx:'30%',
    shikongx:'70%'
   };

   if(dates){
    this.setState({ seriesData: dates.seriesData,
      yiji:dates.yiji,
      erji:dates.erji,
      sanji:dates.sanji,
      siji:dates.siji, 
      shoukongx:dates.shoukongx,
      shikongx:dates.shikongx,   
      shoukong:dates.seriesData[0].value,shikong:dates.seriesData[1].value});
  }



  }

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





  getOptionsx = () => {
    const { seriesData } = this.state;

    return {

      color:['rgba(0, 202, 206, 1)','rgba(254, 0, 0, 1)'],

     
      series: [
        {
          name: "",
          type: "pie",
          radius: ["0%", "65%"],
          center: ["50%", "50%"],
          label: {
              show: false
          },
          itemStyle: {
              normal: {
                  color: 'rgba(24,219,159,0.1)'
              },
          },
          hoverAnimation: false,
          data: [100]
      }, 
          {
              name:'检查点',
              type:'pie',
              radius: ['70%', '85%'],
              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(0,255,238,1)',
                              }
                          }
                      }
                  },
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:seriesData
          }
      ]
    };
  }



  render() {
    const {  shikong,shoukong,shikongx,shoukongx,yiji,erji,sanji,siji} = this.state;
    return (
      <div className="RiskControl">
             <div className="RiskControl_1">
               <div className="RiskControl_1_1"><span>风险管控情况</span></div>
             </div>
             <div className="RiskControl_2">
             <div className="RiskControl_2_1" onClick={this.ondetails}></div>
             <div className="RiskControl_2_2">
                  <div className="RiskControl_2_2_1">
                    
                   <div className="RiskControl_2_2_19">
                    <div className="RiskControl_2_2_191 shi">{shikongx}</div>
                    <div className="RiskControl_2_2_192 shi1">失控：{shikong}</div>
                   </div>
                   <div className="RiskControl_2_2_19">
                   <div className="RiskControl_2_2_191 shou">{shoukongx}</div>
                    <div className="RiskControl_2_2_192 shou1">受控：{shoukong}</div>
                   </div>

                  </div>
                  <div className="RiskControl_2_2_2">

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

                  </div>
             </div>
             </div>
             <div className="RiskControl_3">
                 <div className="RiskControl_3_1">
                     <div className="RiskControl_3_1_1">
                     <div className="RiskControl_3_1_8">二级：</div>
                       <div className="RiskControl_3_1_8">{erji}</div>
                     </div>  
                     <div className="RiskControl_3_1_2"></div>
                 </div>
                 <div className="RiskControl_3_1">
                     <div className="RiskControl_3_1_17">
                    
                       <div className="RiskControl_3_1_8"> 一级：</div>
                       <div className="RiskControl_3_1_8">{yiji}</div>
                      </div>  
                     <div className="RiskControl_3_1_3"></div>
                 </div>
                 <div className="RiskControl_3_1">
                     <div className="RiskControl_3_1_1">
                     <div className="RiskControl_3_1_8">四级：</div>
                       <div className="RiskControl_3_1_8">{siji}</div>
                      </div>  
                     <div className="RiskControl_3_1_4"></div>
                 </div>
                 <div className="RiskControl_3_1">
                     <div className="RiskControl_3_1_17">
                      
                       <div className="RiskControl_3_1_8">三级：</div>
                       <div className="RiskControl_3_1_8">{sanji}</div>
                       </div>  
                     <div className="RiskControl_3_1_5"></div>
                 </div>
             </div>
      </div>
    );
  }
}
