import React,{Component} from 'react';
import style from './index.less';
import infoShow from '@common/images/info-show.png';
import infoMove from '@common/images/info-move.png';
import $ from 'jquery';

class HasInfoItem extends Component {
    constructor(props) {
        super(props)
        this.state = {
            hasEnterItem: false,
            hasEnterImg: false
        }
    }
    handleMouseEnterDrug(){
        this.setState({
            hasEnterItem: true
        })
    }
    handleMouseLeaveDrug(){
        this.setState({
            hasEnterItem: false
        })
    }
    handleMouseEnterImg(){
        this.setState({
            hasEnterImg: true
        })
    }
    handleMouseLeaveImg(){
        this.setState({
            hasEnterImg: false
        })
    }
    setDrugInfo(item,e){
        e.stopPropagation();
        const{ setDrugInfo } = this.props
        setDrugInfo && setDrugInfo(item)
    }
    handleSelect(){
        const{ handleSelect, position } = this.props
        handleSelect && handleSelect(position)
    }

    render(){
        const { item } = this.props
        const { hasEnterItem, hasEnterImg} = this.state
        return (<span className={style['drug-name-wrapper']} >
            <span className={`${style['drug-name']} ${item.forbidden === '2' ? style['disabled']: item.selected ?  style['selected'] : ''}`}  
                // onDoubleClick={() =>{this.setDrugInfo(it);showDrugInfo();}}  //药品说明双击显示（现在为点击图标显示）
                onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect()}} 
                onMouseEnter={this.handleMouseEnterDrug.bind(this)}
                onMouseLeave = {this.handleMouseLeaveDrug.bind(this)}
                >
                {item.medicitionName}
                {<img className={`${style['info-img']} ${hasEnterItem?style['show-content']:style['hide-content']}`}  
                title='点击i图标可查看详细说明'
                src={hasEnterImg?infoMove:infoShow} 
                onMouseEnter={this.handleMouseEnterImg.bind(this)}
                onMouseLeave = {this.handleMouseLeaveImg.bind(this)}
                onClick={this.setDrugInfo.bind(this,item)}/>}
            </span>
            {(item.forbidden === '1'||item.forbidden === '2') && <span className={`${style['info-flag']} ${item.forbidden === '1' ? style['cautious']:item.forbidden === '2'?style['disabled']:''}`}>
                {item.forbidden === '1' ? "慎用":item.forbidden === '2'? "禁用":""} 
            </span>}
        {/*<span  style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{item.rate}</span>*/}

    </span>)
    }
}

export default HasInfoItem;