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 HasInfoItem from '@common/components/HasInfoItem'
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(position) {
        const { selectDrug } = this.props;
        selectDrug && selectDrug(position);
    }
    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( position) {
        this.showTreatDesc();
        const { setOtherRecommend } = this.props;
        setOtherRecommend && setOtherRecommend(position);
    }
    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 { treatmentPlan,showDrugInfo } = this.props
        const { currentImg, currentIndex, hasEnterImg } = this.state
        return(
            treatmentPlan && treatmentPlan.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> */}
                {treatmentPlan.map((item0, index0) =>{
                    return(<div className={`${style['diag-content-box']} clearfix`}>
                        <div className={style['diag-content-title']}><i  className={style['diag-content-circle']}></i>{item0.title}</div>
                        {item0.meditionDetails.map((item1,index1) => {
                            return (<div  className={`${style['diag-content']} clearfix`}>
                                {item1.description&&<div className={style['diag-content-description']}>{item1.description}</div>}
                                
                                {item1.treatment.map((item2,index2)=>{
                                    return (<div className={`${style['drug-item']} clearfix`}>
                                        <div  className={style['drug-name-box']}>
                                            <span style={item2.drugsForbidden === '2'? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}>{index2 + 1 + '. ' }<span>{item2.subdrugsName}</span>:&nbsp;</span>
                                            {item2.medicitionsList.map((item3, index3) => {
                                                return ((item3.isShow == 1 || item3.selected) &&  <HasInfoItem 
                                                    item = {item3}
                                                    setDrugInfo = {this.setDrugInfo}
                                                    position = {[index0, index1, index2, index3]}
                                                    handleSelect = {this.handleSelect}
                                                >

                                                </HasInfoItem>
                                                )

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


                            </div>)

                        })}
                    </div>)
                })}
                
                
            </div>
        )
    }
}

export default DrugTreat;