import React, { Component } from 'react';
import style from './index.less';
import info from './../img/info.png';
import drugIcon from './../img/drug.png';
import more from '@common/images/addItem1.png';
import $ from "jquery";

class DrugTreat extends Component {
    constructor(props) {
        super(props);
        this.handleSelect = this.handleSelect.bind(this);
        this.setOtherRecommend = this.setOtherRecommend.bind(this);
        this.setDrugInfo = this.setDrugInfo.bind(this);
        this.showTreatDesc = this.showTreatDesc.bind(this);
    }

    handleSelect(index,ii) {
        const { selectDrug } = this.props;
        selectDrug && selectDrug(index,ii);
    }
    setOtherRecommend(item, index) {
        this.showTreatDesc();
        const { setOtherRecommend } = this.props;
        setOtherRecommend && setOtherRecommend(item, index);
    }
    setDrugInfo(item) {
        const { setDrugInfo } = this.props;
        setDrugInfo && setDrugInfo(item);
    }
    showTreatDesc() {
        $('#treatDescBox').css({'display': 'block'});
        $('#treatWrapper').animate({'margin-left': '-470px'}, 300);
        $('#treatDescBox').animate({'width': '260px'}, 500);
        
    }
    


    render(){
        const { treatment,showDrugInfo } = this.props
        return(
            treatment && treatment.length > 0 && <div className={style['drug-box']}>
                <h3 className={style['drug-title']}><img className={style['drug-icon']} src={drugIcon}/> 常用药物治疗</h3>
                {treatment.map((item, index) => {
                    return(<div className={style['drug-content']}>
                        <div  className={style['drug-name-box']}>
                            {index + 1 + '. ' }{item.drugsName}:&nbsp;
                            {item.medicitionsList.map((it, ii) => {
                                return ((it.isShow == 1 || it.selected) && <span style={it.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)'} : ''}>
                                        {ii === 0 ? '' : ', '}
                                        <span className={style['drug-name']}  
                                            onDoubleClick={() =>{this.setDrugInfo(it);showDrugInfo();}} 
                                            onClick={()=>{it.forbidden === '2' ? '' : this.handleSelect(index,ii)}} style={it.selected ? {color: '#3B9ED0', borderBottom: '1px solid #3B9ED0'}:''}>
                                            {it.medicitionName}
                                        </span>
                                        {/* {it.showInfo && it.showInfo==='1'&& <img className={style['info-img']} src={info} onClick={() =>{this.setDrugInfo(it);showDrugInfo();}}/>} */}
                                        {it.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: it.forbidden === '2' ? <span className={style['info-flag']} style={{border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''}, 使用率{it.rate}
                                        
                                    </span>)
                            })}

                        </div>
                        {<div className={style['drug-more']} onClick={() =>this.setOtherRecommend(item, index)} ><img className={style['info-img']} src={more} />更多同类药</div> }
                        
                    </div>)
                })}
            </div>
        )
    }
}

export default DrugTreat;