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

import React, { Component } from 'react';
import style from './index.less';
import close from './../img/close.png';
import imgCurrent from '@common/images/icon-current.png';
import $ from "jquery";
import {dragBoxs} from '@utils/drag'
import { imageUrlPrefix } from '@utils/config.js';



class DrugInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            zIndex:302
        }
        this.setDragBox = this.setDragBox.bind(this)
    }
    componentDidMount(){
      dragBoxs('add')
    }
    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')) -5
            if(divHeight > scrollTop) {
                this.setState({
                    currentIndex: i
                })
                return
            }
        }
    }
    setDragBox(){
      $('#dragModalWrap').css({'z-index': 110});
      $('#drugWrapper').css({'z-index': 120});
    }
    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']}/>
                <h1 onMouseDown={this.setDragBox} id="drugTitle" className={style['drug-title']}>{drugInfo.tagType == 8 ? drugInfo.title+'说明书' : drugInfo.tagType == 10 ? drugInfo.title+ '说明': ''}</h1>
                { 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.tagType == 8 ? drugInfo.title+'说明书' : drugInfo.tagType == 10 ? drugInfo.title+ '说明': ''}</div> */}
                    {drugInfo.drugDesc.map((item, index) =>{
                        return <div className={style['drug-desc-item']} id={item.title.trim()}>
                            <div className={style['details-content-title-box']} >
                                <span className={style['details-content-title-name']}>{item.title}</span>
                                <div className={style['details-content-title-circle-box']}><span className={style['details-content-title-circle']}></span></div>
                            </div>
                            <pre className={style['drug-desc-content']} dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></pre> 
                        </div>
                    })}
                    <div className={style['content-menu-box']}>
                        <div className={style['content-menu-wrapper']}>
                            <div className={style['content-menu']}>
                                <div className={style['content-menu-border']}> 
                                    {drugInfo.drugDesc.map((item, index) => {
                                        return (<div class={style['details-menu-title-wrapper']}>
                                            <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'} : ''}>
                                                    <div className={style['details-content-menu-circle-box']}>
                                                        {index !== currentIndex&&<span className={style['details-content-menu-circle']} ></span>}
                                                        {index === currentIndex&&<img className={style['details-content-menu-img']} src ={imgCurrent}/>}
                                                    </div>
                                                    {item.title}
                                                </span>
                                            </div>
                                        </div>)
                                    })}
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div> }
                { !drugInfo || (drugInfo && drugInfo.drugDesc.length === 0) && <div className={style['drug-desc-wrapper']}>
                    <div>
                        {drugInfo.tagType == 8 ? '该药品暂无说明' : drugInfo.tagType == 10 ?'该不良反应暂无说明': ''}
                    </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;