newICSS/src/components/TreatDesc/index.jsx

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


class TreatDesc extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex: -1,
            hasEnterImg: false
        }
        this.hideTreatDesc = this.hideTreatDesc.bind(this);
        this.handleSelect= this.handleSelect.bind(this);
        this.handleMouseEnterDrug = this.handleMouseEnterDrug.bind(this)
        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this)
        this.handleMouseEnterImg = this.handleMouseEnterImg.bind(this)
        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this)

    }

    handleMouseEnterDrug( index, item) {
        // console.log('item', item)
        const drugNameWidth = parseInt($('#'+item.medicitionName)[0].offsetWidth)
        
        const imgLeft = drugNameWidth/2-10
        console.log('imgLeft', imgLeft)
        $('#'+item.medicitionName).find('img').css('left', imgLeft)
       
        this.setState({
            currentIndex: index,
        })
    }
    handleMouseLeaveDrug() {
        this.setState({
            currentIndex: -1,
        })
    }
    handleMouseEnterImg() {
        this.setState({
            hasEnterImg: true
        })
    }
    handleMouseLeaveImg() {
        this.setState({
            hasEnterImg: false
        })
    }
    handleSelect(index,ii) {
        const { selectDrug } = this.props;
        selectDrug && selectDrug(index,ii);
    }
    hideTreatDesc() {
        $('#treatDescBox').css({'display': 'none'});
        $('#treatDescBox').animate({'display': 'none'}, 500);
        $('#treatWrapper').animate({'margin-left': '-340px','left':'50%'}, 500);
    }

    render(){
        const  { treatment, treatDesc, setDrugInfo, showDrugInfo} = this.props
        const { title, basic, otherDrugIndex, drugDesc} = treatDesc
        const { currentIndex, hasEnterImg } = this.state
        return (treatment && treatment.length >0 && <div  className={style['treat-desc-box']}>
            
            {title && title === '药品推荐' ? <div className={style['similar-drug-box']} id='treatDescBox'>
                {/* { basic && basic.length > 0 && <div> //推荐依据不需要展示
                    <h3 className={style['recommend-title']}>推荐依据</h3>
                    {basic.map((item, index) =>{
                        return (<div className={style['drug-desc-item']} dangerouslySetInnerHTML ={{__html: item.content}}>
                        </div>)
                    })}
                    
                </div> } */}
                { otherDrugIndex > -1 && <div  className={style['similar-drug']}>
                    <h3 className={style['drug-desc-title']}><span className={style['drug-desc-class-title']} title={'同类药物(' + treatment[otherDrugIndex].drugsName + ')'}>同类药物({treatment[otherDrugIndex].bigdrugsName})</span>  <img src={close} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
                    {treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
                        return (<span >
                        {index === 0 ? '' : ', '}     
                        <span className={style['drug-name-box']}
                            onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item )}
                            onMouseLeave = {this.handleMouseLeaveDrug}
                            id={item.medicitionName}
                        >
                            <span className={style['drug-name']} 
                                // onDoubleClick={() =>{setDrugInfo(item);showDrugInfo();}} 
                                onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect(otherDrugIndex,index)}} 
                                style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : item.selected ? {color: '#3B9ED0'}:''}
                                >
                                {item.medicitionName}
                            </span>
                            {<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, index)}
                                onMouseLeave = {this.handleMouseLeaveImg}
                                onClick={() =>{setDrugInfo(item);showDrugInfo();}}
                                />}
                        </span>              
                        
                        {/* {<img className={style['info-img']}    
                            src={currentIndex === index ? info1 : info} 
                            onMouseEnter={this.handleMouseEnterImg.bind(this, index)}
                            onMouseLeave = {this.handleMouseLeaveImg}
                            onClick={() =>{setDrugInfo(item);showDrugInfo();}}/>} */}
                        {item.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: item.forbidden === '2' ? <span className={style['info-flag']} style={{opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)',border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''},
                        <span  style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{item.rate}</span>
                        
                    </span>)
                    })}
                </div> }
            </div>: '' }
            {/* { title !== '药品推荐' ? <div>
                { drugDesc && drugDesc.length > 0 && <div className={style['drug-desc-wrapper']}>
                    <h3 className={style['drug-title']}>说明</h3>
                    {drugDesc.map((item, index) =>{
                        return <div className={style['drug-desc-item']}>{item.title}: <span dangerouslySetInnerHTML ={{__html: item.content}}></span> </div>
                    })}
                </div> }
            </div>: '' } */}
            
            
        </div>)
    }
}

export default TreatDesc;