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


class TreatDesc extends Component {
    constructor(props){
        super(props);
        this.hideTreatDesc = this.hideTreatDesc.bind(this);
        this.handleSelect= this.handleSelect.bind(this);
    }

    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
        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']}>同类药物  <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']} 
                              onDoubleClick={() =>{setDrugInfo(item);showDrugInfo();}} 
                              onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect(otherDrugIndex,index)}} 
                              style={item.selected ? {color: '#3B9ED0'}:''}>
                            {item.medicitionName}
                        </span>
                        {/* {item.showInfo && item.showInfo==='1'&& <img className={style['info-img']} src={info} />} */}
                        {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;