newICSS/src/components/Treat/AdverseReactions/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import info2 from './../img/info2.png';
import info3 from './../img/info3.png';
import $ from "jquery";

class AdverseReactions extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex: -1
        }
        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this);
        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
        this.setDrugInfo = this.setDrugInfo.bind(this);
      
    }
    changeReact(it, index) {
        this.props.changeReact(it, index);
    }
    handleMouseEnterDrug(index, item) {
        const drugNameWidth = parseInt($('#'+item.id)[0].offsetWidth)
        const imgLeft = drugNameWidth/2-8
        $('#'+item.id).find('img').css('left', imgLeft)
        this.setState({
            currentIndex: index,
        })
    }
    handleMouseLeaveDrug() {
        this.setState({
            currentIndex: -1, 
        })
    }
    handleMouseEnterImg() {
        this.setState({
            hasEnterImg: true
        })
    }
    handleMouseLeaveImg() {
        this.setState({
            hasEnterImg: false
        })
    }
    setDrugInfo(item) {
        const { setDrugInfo } = this.props;
        setDrugInfo && setDrugInfo(item, 10, 6);
    }


    render() {
        const { icon, titleStyle,titleBg, filter, title,  adversReactionList, showDrugInfo, setDrugInfo } = this.props
        const  { currentIndex, hasEnterImg } = this.state
        return(
            <div className={style['last-treat-wrapper']}>
                <div className={style['last-treat-title-box']} style={titleStyle}></div>
                <div className={style['last-treat-title']} ><img className={style['last-treat-icon']} src={icon}/>{title}</div>
                {/* {console.log('adversReactionList', adversReactionList)} */}

                {adversReactionList.map((item, index) => {
                    return (<div className={style['adverse-reactions-item']} key={item.id}>
                    <span className={style['last-treat-name-box']}
                        
                    >   
                        <span   id={item.id} 
                                className={style['last-treat-big-name-box']} 
                                onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item)}
                                onMouseLeave = {this.handleMouseLeaveDrug}
                        >
                            {item.tagName}:
                            {<img className={style['info-img']}  
                                style ={currentIndex === index  ? {display: "inline-block"} : {display: "none"}}
                                src={currentIndex === index ?(hasEnterImg ? info3 : info2 ): info2} 
                                onMouseEnter={this.handleMouseEnterImg.bind(this)}
                                onMouseLeave = {this.handleMouseLeaveImg}
                                onClick={() =>{this.setDrugInfo(item);showDrugInfo();}}/>}
                        
                        </span>
                        
                    </span>
                        {item.details.map((it, idx) => {
                            return <span key={item.id + it.name}>
                                <input type="checkbox" checked={it.value == 1} id={item.id + it.name} onChange={this.changeReact.bind(this, it, index)}/>
                                <label for={item.id + it.name}> {it.name} </label>
                            </span>
                        })}
                    </div>)
                })}
            </div>
        )
    }

}

export default AdverseReactions;