import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Layout } from 'amos-framework';
const { Header, Content, Sider } = Layout;
import RiskDegreePie from './echarts/RiskDegreePie';
import RiskDegreeHistogram from './echarts/RiskDegreeHistogram';
import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix';
/**
 * 风险评估
 */

class RiskAssessment extends Component {

    //获取等级
    getLegend() {
        return (
            <div className='situation-map-legend' >
                <div className='situation-map-legend-item'>
                    <div className='situation-map-legend-block' style={{ background: '#15653d' }} />
                    <div>初始</div>
                </div>
                <div className='situation-map-legend-item'>
                    <div className='situation-map-legend-block' style={{ background: '#0078ef' }} />
                    <div>4/5级</div>
                </div>
                <div className='situation-map-legend-item'>
                    <div className='situation-map-legend-block' style={{ background: '#ffcc2a' }} />
                    <div>3级</div>
                </div>
                <div className='situation-map-legend-item'>
                    <div className='situation-map-legend-block' style={{ background: '#ff5a20' }} />
                    <div>2级</div>
                </div>
                <div className='situation-map-legend-item'>
                    <div className='situation-map-legend-block' style={{ background: '#f42828' }} />
                    <div>1级</div>
                </div>
            </div>
        );
    }
    onClick=()=>{
        this.props.updateParents({ divVisable:'block', riskVisable:'none'});
    }


  
    render() {
        return (
            <div className="mainContent" style={{display: this.props.riskVisable }}>
                <Layout>               
                <Header className="contentHeader">
                        <div className="headerLeft" style={{ display: 'inline' }}>{this.props.detailTitle}</div>
                        <div className="headerRight" style={{ display: 'inline' }}>
                            <img src="/src/assets/detail/return.png"  onClick={this.onClick} width="42px" style={{marginTop:5}} />
                        </div>
                </Header>
              <Layout>
               <Content className="riskcontent">
                    
                         <Header className="blockOneHeader">
                            <Header className="oneChildHeader">
                                <img src="/src/assets/detail/secondTitle1.png" style={{ width: 256, height: 38, margin: 0 }} />
                            </Header>
                            <Content className="oneHeaderContent">           
                                <img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35 ,marginLeft:248}} />    
                                {this.getLegend()} 

                            </Content>
                        </Header>
                         <Content className="blockOneContent">
                            <Layout className="oneChildLayout">
                                <Sider className="oneChildSider">
                                    <Header className="twoChildHeader">
                                        <img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} />
                                    </Header>
                                    <Content className="twoHeaderContent">
                                        <div className="risk-degree-pie">
                                            <div className="risk-degree-pie1">
                                            {/* <RiskDegreePie /> */}
                                                <div>5</div>
                                                <div>2%↑</div>
                                                <div>本年风险</div> 
                                             </div>
                                        </div>
                                    </Content>
                                </Sider>
                             </Layout> 
                        </Content>
                         <Content className="blockTwoContent"> 
                           <Layout className="oneChildLayout">
                                <Sider className="oneChildSider">
                                    <Header className="twoChildHeader">
                                        <img src="/src/assets/detail/secondTitle3.png" style={{ width: 277, height: 38, margin: 0 }} />
                                    </Header>
                                    <Content className="twoHeaderContent">
                                       {/* <IncidenceSeverityMatrix /> */}
                                    </Content>
                                </Sider>
                            </Layout>
                        </Content>
                   
                    </Content>                     
                       
                  <Sider className="risksider">
                       <Header className="risksiderHeader">
                       <img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} />
                       </Header>
                       <Content className="risksiderContent">
                         {/* <RiskDegreeHistogram /> */}
                       </Content>    
                  </Sider> 
                  </Layout>       
                </Layout>
            </div>
        );
    }
}

RiskAssessment.propTypes = {

};
export default RiskAssessment;
