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';


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

    handleMouseEnterImg(index) {
        this.setState({
            currentIndex: index,
        })
    }
    handleMouseLeaveImg() {
        this.setState({
            currentIndex: -1,
        })
    }
    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'}, 500);
    }

    render(){
        const  { treatment, treatDesc, setDrugInfo, showDrugInfo} = this.props
        const { title, basic, otherDrugIndex, drugDesc} = treatDesc
        const { currentIndex } = 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].drugsName})</span>  <img src={close} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
                    {treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
                        return (<span   style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)'} : ''}>
                        {index === 0 ? '' : ', '}     
                        <span className={style['drug-name-box']}>
                            <span className={style['drug-name']} 
                                onDoubleClick={() =>{setDrugInfo(item);showDrugInfo();}} 
                                onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect(otherDrugIndex,index)}} 
                                style={item.selected ? {color: '#3B9ED0'}:''}>
                                {item.medicitionName}
                            </span>
                        </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={{border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''}, 使用率{item.rate}
                        
                    </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;