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

import React, { Component } from 'react';
import style from './index.less';
import info from './../img/info.png';
import info1 from './../img/info1.png';
import info2 from './../img/info2.png';
import info3 from './../img/info3.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.state = {
            currentImg: -1,
        }
        this.handleSelect = this.handleSelect.bind(this);
        this.setOtherRecommend = this.setOtherRecommend.bind(this);
        this.setDrugInfo = this.setDrugInfo.bind(this);
        this.showTreatDesc = this.showTreatDesc.bind(this);
        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this);
        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
        this.getImg = this.getImg.bind(this);
    }

    handleSelect(index,ii) {
        const { selectDrug } = this.props;
        selectDrug && selectDrug(index,ii);
    }
    handleMouseEnterDrug(ii, index, it) {
        this.setState({
            currentIndex: index,
            currentImg: ii
        })
    }
    handleMouseLeaveDrug() {
        this.setState({
            currentIndex: -1,
        })
    }
    handleMouseEnterImg() {
        this.setState({
            hasEnterImg: true
        })
    }
    handleMouseLeaveImg() {
        this.setState({
            hasEnterImg: false
        })
    }
    setOtherRecommend(item, index) {
        this.showTreatDesc();
        const { setOtherRecommend } = this.props;
        setOtherRecommend && setOtherRecommend(item, index);
    }
    setDrugInfo(item) {
        const { setDrugInfo } = this.props;
        setDrugInfo && setDrugInfo({name: item.medicitionName, type: 8, position: 5});
    }
    getImg() {
    }
    //搜索药品说明书（查看数据用）
    handleInputDrug(e) {
        this.setState({
            drugIdList: e.target.value
         })
    }
    //搜索药品说明书（查看数据用）
    searchDrug() {
        const { setDrugInfoMore } = this.props
        const drugIdList = this.state.drugIdList.split(' ')
        setDrugInfoMore({drugIdList: drugIdList})
    }
    
    showTreatDesc() {
        $('#treatDescBox').css({'display': 'block'});
        $('#dragModalWrap').animate({'margin-left': '-471px','left':'50%'}, 300);
        $('#treatDescBox').animate({'width': '260px'}, 500);
    }

    render(){
        const { treatment,showDrugInfo } = this.props
        const { currentImg, currentIndex, hasEnterImg } = this.state
        return(
            treatment && treatment.length > 0 && <div className={style['drug-box']}>
                <h3 className={style['drug-title']}><img className={style['drug-icon']} src={drugIcon}/> 常用药物治疗</h3>
                {/* 查看药物说明书 （添加数据查看数据用）*/}
                {/* <div> <input onInput={this.handleInputDrug.bind(this)} style={{border:'1px solid #000'}} type="text"/><button onClick = {this.searchDrug.bind(this)}>搜索药品说明</button></div> */}
                {treatment.map((item, index) => {
                    return(<div className={style['drug-content']}>
                        <div  className={style['drug-name-box']}>
                            <span style={item.drugsForbidden === '2'? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}>{index + 1 + '. ' }{item.bigdrugsName}<span>{item.subdrugsName && '('+item.subdrugsName+')'}</span>:&nbsp;</span>
                            {item.medicitionsList.map((it, ii) => {
                                return ((it.isShow == 1 || it.selected) && <span >
                                        {ii === 0 ? '' : ', '}
                                        <span onMouseEnter={this.handleMouseEnterDrug.bind(this, ii , index, it)}
                                              onMouseLeave = {this.handleMouseLeaveDrug}
                                              className={style['drug-name-wrapper']} 
                                        >
                                            <span className={style['drug-name']}  
                                                // onDoubleClick={() =>{this.setDrugInfo(it);showDrugInfo();}}  //药品说明双击显示（现在为点击图标显示）
                                                onClick={()=>{it.forbidden === '2' ? '' : this.handleSelect(index,ii)}} 
                                                style={it.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : it.selected ? {color: '#3B9ED0', borderBottom: '1px solid #3B9ED0'}:''}
                                                >
                                                {it.medicitionName}
                                            </span>
                                            {<img className={style['info-img']}  
                                              title='点击i图标可查看详细说明'
                                              style ={currentIndex === index ? (ii === currentImg ? {display: "inline-block"} : {display: "none"}) : {display: "none"}}
                                              src={currentIndex === index ? (ii === currentImg ? (hasEnterImg ? info3 : info2) : info2): info2} 
                                              onMouseEnter={this.handleMouseEnterImg.bind(this, ii, index)}
                                              onMouseLeave = {this.handleMouseLeaveImg}
                                              onClick={this.setDrugInfo.bind(this,it)}/>}
                                        </span>
                                        
                                        
                                        {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={{opacity: '0.3',filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)',border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''}, 
                                        <span  style={it.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{it.rate}</span>
                                        
                                    </span>)
                            })}

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

export default DrugTreat;