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.close();
        const diagType = 1;
        this.addDiagodal(diagType)
    }
    cancel() {
        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({id:item.id,type:7});
        }
        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});
    }
    addDiagodal(diagType){
        const {item, isChronicMag,mode} = this.props;
        item.type = diagType;
        // setTimeout(()=>{
        //     this.setState({
        //         visible: false,
        //     },()=>{
                const { diagnosticList, addDiagnostic, clearInput, hideSearch } = this.props;
                // for (let i = 0; i < diagnosticList.length; i++) {
                //     if(diagnosticList[i].id === item.id && diagnosticList[i].name === item.name) {
                //         Notify.info('该诊断已存在');
                //         return
                //     }
                // }
                if(item.type == 2&&mode==0) {
                    isChronicMag(item);
                }
                // 从缓存取慢病列表
                // let chronicList = JSON.parse(storageLocal.get('chronic'));
                // if(!chronicList){
                //     getChronic();
                //     chronicList = JSON.parse(storageLocal.get('chronic'));
                // }
                // console.log(999,chronicList)
                // for(let i=0; i<chronicList.length; i++){
                //     if(chronicList[i].id==item.id&&chronicList[i].name==item.name){
                //         //弹窗提示 “是否引用往期病例”？--往期病例接口、弹窗、引用
                //         // 是--引用   否--走慢病流程
                //         console.log("是慢病！")
                //     }
                // }
                addDiagnostic&&addDiagnostic(item);
                clearInput&&clearInput();
                hideSearch&&hideSearch()
        //     })
        // }, 0)
        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)}}
                          >
                        {item.name} {item.showType === 2 || item.showType === 3 ? '('+ item.retrievalName+')': ''}
                        {type== 'disSelect' &&<img className={style['info-img']}  
                                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>)
    }
}

export default DiagnosticItem;