import React, { Component } from 'react';
import style from './index.less';
import info2 from './../../img/info2.png';
import info3 from './../../img/info3.png';
import $ from "jquery";

class LastDrug extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex: -1
        }
        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this);
        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
        this.setDrugInfo = this.setDrugInfo.bind(this);
    }
    handleMouseEnterDrug(index, item) {
        const drugNameWidth = parseInt($('#'+item.id)[0].offsetWidth)
        const imgLeft = drugNameWidth/2-8
        $('#'+item.id).find('img').css('left', imgLeft)
        this.setState({
            currentIndex: index,
        })
    }
    handleMouseLeaveDrug() {
        this.setState({
            currentIndex: -1, 
        })
    }
    handleMouseEnterImg() {
        this.setState({
            hasEnterImg: true
        })
    }
    handleMouseLeaveImg() {
        this.setState({
            hasEnterImg: false
        })
    }
    setDrugInfo(item) {
        const { setDrugInfo } = this.props;
        setDrugInfo && setDrugInfo(item,8,5);
    }


    render() {
        const { icon, titleStyle,titleBg, filter, title, lastDrugList, showDrugInfo } = this.props
        const  { currentIndex, hasEnterImg } = this.state
        return(
             <div className={style['last-common-box']}>
                <div className={style['last-common-title']}>{title}:</div>
                <div className={style['last-common-list']}>
                    {lastDrugList.map((item, index) => {
                        return<span
                            onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item)}
                            onMouseLeave = {this.handleMouseLeaveDrug}
                            id={item.id}
                            className={style['last-common-warpper']}
                            > 
                            {item.medicitionName} 
                            {<img className={style['info-img']}  
                                style ={currentIndex === index  ? {display: "inline-block"} : {display: "none"}}
                                src={currentIndex === index ?(hasEnterImg ? info3 : info2 ): info2} 
                                onMouseEnter={this.handleMouseEnterImg.bind(this)}
                                onMouseLeave = {this.handleMouseLeaveImg}
                                onClick={() =>{this.setDrugInfo(item);showDrugInfo();}}/>}
                            {index == lastDrugList.length-1 ?  '' : <span>,</span>}
                        </span>
                    })}
                </div>
            </div>
        )
    }

}

export default LastDrug;