import React, { Component } from 'react';
import style from './index.less';
import close from './img/close.png'
import search from './img/search.png'
import DiagnosticItem from '@containers/DiagnosticItem'
import { SearchOption} from '@commonComp';
import config from '@config/index';
import $ from 'jquery';
class DiagResultSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
           
        };
      
        this.getSearchList =  this.getSearchList.bind(this)

    }
    componentWillReceiveProps(nextProps){
    }
    componentDidMount () {
        const that = this
        $(document).click(function (e) {
            var diagSearch=$('#diagSearch')[0];
            var addDiag = $('#addDiag')[0];
            var confirm = $('#confirm')[0];
            if(diagSearch) {
                if(confirm) {
                    
                } else {
                    if (e.target!= diagSearch && e.target!= addDiag && e.target.parentNode!= addDiag && !$.contains(diagSearch, e.target) ) {
                        that.props.hideSearch();
                    }


                }
                
            }
            
        })
    }

    getSearchList(searchResult) {
        return <div className={style['search-result']}>
                    
        {
            searchResult && searchResult.map((item) => {
                return(<div  key={item.id} className={style['search-result-item']}><DiagnosticItem title={true} item={item} clearInput={this.clearInput}/></div>)
            })
        }
    </div>
    }
   
    render(){
        const  { show, searchResult, getSearchResult, handleChangeValue } = this.props
       
        return(
            show&&<div id='diagSearch' className={style['search-box']}>
                <SearchOption handleChangeValue={handleChangeValue} visible={true}>
                    {this.getSearchList(searchResult)}
                </SearchOption>
            </div>
        )
       
       
    }
}

export default DiagResultSearch;