import React from "react";
import ReactDOM from "react-dom";
import "./assets/styles/index.less";

import Green from "./assets/images/green.png";
import Red from "./assets/images/red.png";

class Circle extends React.Component {

    constructor() {
        super();
        this.state = {
            safety: []
        }
    }

    render() {

        const _self = this;

        //console.log("_self.props.styleSet =", _self.props.styleSet)
        let divStyle = {
            //
        }

        let safetyData = {};



        if(this.state.safety.length !== 0) {
            this.state.safety.map(function (item) {
                safetyData[item["name"]] = item["value"]
            })
        }



        let cI = Red


        return (
                <div
                    ref={(elem) => { this.element = elem; }}
                    className={"safety_div"}
                >
                    <div className={"safety_title"}>
                        <div className={"item item1"}></div>
                        <div className={"item item2"}></div>
                        <div className={"item item3"}></div>
                        <div className={"item item4"}></div>
                    </div>


                    <div className={"safety_img"}>
                        <div
                            className={"item item1"}
                        >
                            <img src={safetyData["handle"] === 0?Red:Green} />
                        </div>
                        <div
                            className={"item item1"}
                        >
                            <img src={safetyData["configuration"] === 0?Red:Green} />
                        </div>
                        <div
                            className={"item item1"}
                        >
                            <img src={safetyData["violentBreak"] === 0?Red:Green} />
                        </div>
                        <div
                            className={"item item1"}
                        >
                            <img src={safetyData["weakPassword"] === 0?Red:Green} />
                        </div>
                    </div>

                    <div className={"safety_figure"}>
                        <div
                            className={"item item1"}
                            style = {{
                                color: safetyData["handle"] === 0?"-sharpFF2366":"-sharp2AF4FF"
                            }}
                        >
                            {safetyData["handle"]}
                        </div>
                        <div
                            className={"item item2"}
                            style = {{
                                color: safetyData["configuration"] === 0?"-sharpFF2366":"-sharp2AF4FF"
                            }}
                        >
                            {safetyData["configuration"]}
                        </div>
                        <div
                            className={"item item3"}
                            style = {{
                                color: safetyData["violentBreak"] === 0?"-sharpFF2366":"-sharp2AF4FF"
                            }}
                        >
                            {safetyData["violentBreak"]}
                        </div>
                        <div
                            className={"item item4"}
                            style = {{
                                color: safetyData["weakPassword"] === 0?"-sharpFF2366":"-sharp2AF4FF"
                            }}
                        >
                            {safetyData["weakPassword"]}
                        </div>
                    </div>

                </div>

        )
    }

    componentDidMount() {
        //
    }

    componentWillReceiveProps(nextProps) {  // 
        //console.log(nextProps.data);
        this.setState({
            safety: nextProps.safety
        });
    }

    componentDidUpdate() {
        //
    }
}


export default Circle;