newICSS/src/components/DiagnosticItem/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import {ConfirmModal} from '@commonComp';
import Notify from '@commonComp/Notify';
import infoShow from '@common/images/info-show.png';
import infoMove from '@common/images/info-move.png';
import {getChronic} from '@store/async-actions/homePage.js';
import {storageLocal} from '@utils/tools';

class DiagnosticItem extends Component{
    constructor(props){
        super(props);

        this.state = {
            visible: false,
            hasEnterItem: false,
            hasEnterImg: false
        }

        this.addDiagodal = this.addDiagodal.bind(this);
        this.chooseDiagodal = this.chooseDiagodal.bind(this);
        this.confirm = this.confirm.bind(this);
        this.cancel = this.cancel.bind(this)
        this.close = this.close.bind(this)
        this.getTips = this.getTips.bind(this)
    }
    confirm() {
        this.props.setHighter&&this.props.setHighter(48)
        this.close();
        const diagType = 1;
        this.addDiagodal(diagType)
    }
    cancel() {
        this.props.setHighter&&this.props.setHighter(48)
        this.close();
        const diagType = 2;
        this.addDiagodal(diagType)
    }
    close(){
        this.setState({
            visible: false
        })
    }
    chooseDiagodal(item) {
        const { diagnosticList,getTips, type } = this.props;
        // getTips && getTips(item);
        // if (type == 'search') {
        //     getTips && getTips({type:7,name: item.name, position: 1});
        // }
        for (let i = 0; i < diagnosticList.length; i++) {
            if(diagnosticList[i].id === item.id && diagnosticList[i].name === item.name) {
                Notify.info('该诊断已存在');
                return
            }
        }
        this.setState({
            visible: true
        })
       
    }
    getTips(item, e) {
        e.stopPropagation();
        const {getTips } = this.props;
        getTips && getTips({id:item.id,type:7,name: item.name, position: 1});
    }
    addDiagodal(diagType){
        const {item, isChronicMag} = this.props;
        item.type = diagType;
         const {  addDiagnostic, clearInput, hideSearch } = this.props;

         if(item.type == 2) {
             isChronicMag(item);
         }
         addDiagnostic&&addDiagnostic(item);
         clearInput&&clearInput();
         hideSearch&&hideSearch();
        this.context.scrollArea&&this.context.scrollArea.refresh();
         //document.getElementById("diagnosisResult").scrollIntoView(true)
    }
    handleMouseEnterDrug() {
        this.setState({
            hasEnterItem: true, 
        })
      }
      handleMouseLeaveDrug() {
        this.setState({
            hasEnterItem: false, 
        })
      }
      handleMouseEnterImg() {
        this.setState({
          hasEnterImg: true
        })
      }
      handleMouseLeaveImg() {
        this.setState({
          hasEnterImg: false
        })
      }

    render(){
        const { visible,hasEnterItem,hasEnterImg } = this.state
        const { item, title, type } = this.props
        return (<span className={style['diag-item']} >
                    <span className={`${style['diag-name']}`} 
                          title = {title && item.name + (item.showType === 2 || item.showType === 3 ? '('+ item.retrievalName+')': '')}
                          onMouseEnter={this.handleMouseEnterDrug.bind(this)}
                          onMouseLeave = {this.handleMouseLeaveDrug.bind(this)}
                          onClick={() =>{this.chooseDiagodal(item)}}
                          >
                        <p className={`${style['diag-name-box']} ${type == 'search'?style['diag-name-search']:style['diag-name-disSelect']}`}>{item.name} {item.retrievalName ? '('+ item.retrievalName+')': ''}</p>
                        {type== 'disSelect' &&<img className={style['info-img']}  
                                title='点击i图标可查看详细说明'
                                style ={hasEnterItem  ? {display: "inline-block"} : {display: "none"}}
                                src={hasEnterImg ? infoMove : infoShow} 
                                onMouseEnter={this.handleMouseEnterImg.bind(this)}
                                onMouseLeave = {this.handleMouseLeaveImg.bind(this)}
                                onClick={this.getTips.bind(this,item)}
                        />}
                    </span>
                    <ConfirmModal visible={visible} okText='初诊' cancelText='复诊' confirm={this.confirm}  cancel={this.cancel} close={this.close}>
                        <div className={style['confirm-info']}>确定选择“{item.name}”为</div> 
                    </ConfirmModal>
                   
                </span>)
    }
}
DiagnosticItem.contextTypes = {
  scrollArea: React.PropTypes.object
};
export default DiagnosticItem;