import React, { Component } from 'react';
import style from './index.less';
import $ from "jquery";
import close from './img/close.png';
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 packUp from './img/packUp.png';
import HasInfoItem from '@common/components/HasInfoItem'

class TreatDesc extends Component {
    constructor(props){
        super(props);
      
        this.hideTreatDesc = this.hideTreatDesc.bind(this);
        this.handleSelect= this.handleSelect.bind(this);
        this.setDrugInfo = this.setDrugInfo.bind(this)
        this.getPosition = this.getPosition.bind(this)

    }
  
    handleSelect(position) {

        const { selectDrug } = this.props;
        selectDrug && selectDrug(position);
    }
    setDrugInfo(item) {
        const { setDrugInfo } = this.props;
        setDrugInfo && setDrugInfo({name: item.medicitionName, type: 8, position: 5});
    }
    hideTreatDesc() {
        $('#treatDescBox').css({'display': 'none'});
        $('#treatDescBox').animate({'display': 'none'}, 500);
        $('#dragModalWrap').animate({'margin-left': '-340px','left':'50%'}, 500);
    }
    getPosition(index) {
        const {position} =this.props.treatDesc
       const newPos = position.slice()
       newPos.push(index)
        return newPos
    }

    render(){
        const  { treatment, treatDesc, setDrugInfo} = this.props
        const { title, basic, position, drugDesc} = treatDesc
        let treatmentItem
        if(position) {
           treatmentItem = treatment[position[0]].meditionDetails[position[1]].treatment[position[2]]
        }
        return (treatment && treatment.length >0 && <div  className={style['treat-desc-box']+" "+"clearfix" }>

            {title && title === '药品推荐' ? <div className={style['similar-drug-box']} id='treatDescBox'>
                {/* { basic && basic.length > 0 && <div> //推荐依据不需要展示
                    <h3 className={style['recommend-title']}>推荐依据</h3>
                    {basic.map((item, index) =>{
                        return (<div className={style['drug-desc-item']} dangerouslySetInnerHTML ={{__html: item.content}}>
                        </div>)
                    })}
                </div> } */}
                {position&&<div  className={style['similar-drug-wrapper'] +" "+"clearfix" }>
                        <h3 className={style['drug-desc-title']}><span className={style['drug-desc-class-title']} title={treatmentItem.subdrugsName}>{treatmentItem.subdrugsName}</span>  <img src={packUp} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
                        <div  className={style['similar-drug'] +" "+"clearfix" }>
                        {treatmentItem.medicitionsList.map((item, index) =>{
                            return  <HasInfoItem 
                            item = {item}
                            setDrugInfo = {this.setDrugInfo}
                            position = {this.getPosition(index)}
                            handleSelect = {this.handleSelect}
                        >

                        </HasInfoItem>
                        })}
                    </div> 
                </div>}
            </div>: '' }
            {/* { title !== '药品推荐' ? <div>
                { drugDesc && drugDesc.length > 0 && <div className={style['drug-desc-wrapper']}>
                    <h3 className={style['drug-title']}>说明</h3>
                    {drugDesc.map((item, index) =>{
                        return <div className={style['drug-desc-item']}>{item.title}: <span dangerouslySetInnerHTML ={{__html: item.content}}></span> </div>
                    })}
                </div> }
            </div>: '' } */}
        </div>)
    }
}

export default TreatDesc;