import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {riskFailureData} from './data'
import { OverFlowText } from 'amos-framework';
class RiskFailure extends Component {
  render() {
    return (
      <div className='risk-failure-view common-margin daily-title'>
        <div className='daily-title  daily-title-content'>安全风险失效 TOP10</div>
        <div className='top-ten-content'>
        <div style={{position:"initial",width:28,height:28,marginTop:-32,marginLeft:352}}
          onClick={this.props.onRiskClick}></div>
        {
          riskFailureData.map((item,index)=>
            <div className='top-ten-item' key={index}>
              <OverFlowText>
                <p style={{ width: '80px' }}>{item.name}</p>
              </OverFlowText>
              <div className='top-ten-item-middle'>
                <div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div>
              </div>
              <div className ='top-ten-item-bottom'>
                <span>{item.value}</span>
                </div>
            </div>
          )
        }
        </div>
      </div>
    );
  }
}

RiskFailure.propTypes = {};

export default RiskFailure;
