newICSS/src/components/TreatDesc/DrugInfo/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import close from './../img/close.png';
import $ from "jquery";
import {dragBox} from '@utils/tools'


class DrugInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            zIndex:302
        }
        this.setDragBox = this.setDragBox.bind(this)
    }
    componentDidMount(){
      dragBox('drugWrapper','drugTitle')
    }
    handleClickMenu(index, item, drugDesc) {
        const that = this
        setTimeout(function(){
            that.setState({
                currentIndex: index
            })
        },0)
        
        let scrollTop = 60 //标题高度为60px
        drugDesc.map((it, ii) => {
            if( ii < index) {
                scrollTop = scrollTop + parseInt($('#' + it.title.trim()).css('height'))
            }
        })
        $('#drugDesc').scrollTop(scrollTop)
    }
    handleScrollModal(drugDesc) {
        const scrollTop = $('#drugDesc').scrollTop()
        let divHeight = 60; //标题高度为60px
        for (let i = 0; i < drugDesc.length; i++) {
            divHeight = divHeight + parseInt($('#' + drugDesc[i].title.trim()).css('height'))
            if(divHeight > scrollTop) {
                this.setState({
                    currentIndex: i
                })
                return
            }
        }
    }
    setDragBox(){
      $('#treatWrapper').css({'z-index': 301});
      $('#drugWrapper').css({'z-index': 302});
    }
    render() {
        const { drugInfo, hideDrugInfo, drugInfoList,hideDrugInfoMore } = this.props
        const { currentIndex } = this.state
        return (<div className={style['drug-info-wrapper']} id="drugWrapper">
                <img src={close} onClick={hideDrugInfo} className={style['close-drug-desc']}/>
                <h3 onMouseDown={this.setDragBox} id="drugTitle" className={style['drug-title']}>{drugInfo.title}说明书  </h3>
                { drugInfo && drugInfo.drugDesc.length > 0 && <div className={style['drug-desc-wrapper']} id='drugDesc' onScroll={this.handleScrollModal.bind(this,  drugInfo.drugDesc)}>
                    <div className={style['drug-title1']} >{drugInfo.title}说明书</div>
                    {drugInfo.drugDesc.map((item, index) =>{
                        return <div className={style['drug-desc-item']} id={item.title.trim()}>
                            <div className={style['drug-desc-title']} >{item.title.trim()}</div> 
                            <div className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: item.content}}></div> 
                        </div>
                    })}
                    <div className={style['content-menu-box']}>
                        <div className={style['content-menu-wrapper']}>
                            <div className={style['content-menu']}>
                                {drugInfo.drugDesc.map((item, index) => {
                                    return (<div >
                                        <div className={style['details-menu-title-box']}>
                                            {index === 0 ? '' : <div className={style['details-content-menu-line']}></div>}
                                            <span onClick={this.handleClickMenu.bind(this, index, item, drugInfo.drugDesc)} className={style['details-content-menu-name']} style = {index === currentIndex ? {color:'#0089be'} : ''}>
                                                <span className={style['details-content-menu-circle']} style = {index === currentIndex ? {background:'#0089be'} : ''}></span>{item.title}
                                            </span>
                                        </div>
                                    </div>)
                                })}
                            </div>
                        </div>
                    </div>
                </div> }
                { !drugInfo || (drugInfo && drugInfo.drugDesc.length === 0) && <div className={style['drug-desc-wrapper']}>
                    <div>
                        该药品暂无说明
                    </div>
                </div> }
        </div>)


        //多个药品药品说明书（添加数据时查看药品说明书用）
        //  return (<div className={style['drug-info-wrapper']}>
        //         <h3 className={style['drug-title']}>说明书  <img src={close} onClick={hideDrugInfoMore} className={style['close-drug-desc']}/> </h3>
        //         { drugInfoList && drugInfoList.length > 0 && <div className={style['drug-desc-wrapper']}>
        //             {drugInfoList.map((item,index) => {
        //                 return <div>
        //                     <h3 style={{height:' 50px', fontSize:'40px', fontWeight: '800'}}>{'【'+item.id+'】'}{item.name}说明书  </h3>
        //                     {item.introduceDetailList&&item.introduceDetailList.length>0&&item.introduceDetailList.map((it, index) =>{
        //                         return <div className={style['drug-desc-item']}><span className={style['drug-desc-title']}>{it.title.trim()}</span> <div className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: it.content}}></div> </div>
        //                     })}
        //                      <br/>
        //                     <br/> <br/> <br/> <br/>
        //                 </div>
                        
                       

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

        // </div>)


    }
}

export default DrugInfo;