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={{ width: '100%', height: '100%', display: this.props.riskVisable }}>
                <Layout>               
                  <Layout style={{width : 900}}>
                    <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="36px" />
                        </div>
                    </Header>
                    <Content className="riskcontent">
                        <Header className="blockOneHeader">
                            <Header className="oneChildHeader">
                                <img src="/src/assets/detail/secondTitle1.png" style={{ width: 192, height: 29, margin: 0 }} />
                            </Header>
                            <Content className="oneHeaderContent">
                              
                                    <img src="/src/assets/detail/RPNr.png" style={{ width: 692, height: 378, marginTop: 20 ,marginLeft: 100}} />    
                                    {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: 192, height: 29, 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: 208, height: 29, margin: 0 }} />
                                    </Header>
                                    <Content className="twoHeaderContent">
                                       {/* <IncidenceSeverityMatrix /> */}
                                    </Content>
                                </Sider>
                            </Layout>
                        </Content>
                    </Content>                     
                       
                  </Layout>
                  <Sider className="risksider">
                       <Header className="risksiderHeader">
                       <img src="/src/assets/detail/secondTitle4.png" style={{ width: 192, height: 29, margin: 0 }} />
                       </Header>
                       <Content className="risksiderContent">
                         {/* <RiskDegreeHistogram /> */}
                       </Content>    
                  </Sider>      
                </Layout>
            </div>
        );
    }
}

RiskAssessment.propTypes = {

};
export default RiskAssessment;
