import React, { Component } from 'react';
import { Button, ItemBox, ConfirmModal, Loading, Message, Add } from '@commonComp';
import DiagnosticList from '@containers/DiagnosticList.js';
import { getPageCoordinate,setPosition  } from '@utils/tools';
import DiagResultSearch from '@containers/DiagResultSearch';

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

        this.state = {
            diagType: 0,
            //showSearch: props.show,
            pageTop: ''
        }
        this.showSearch = this.showSearch.bind(this);
        this.hideSearch = this.hideSearch.bind(this);
        this.handleshowSearch = this.handleshowSearch.bind(this);
        this.handleTcmShowSearch = this.handleTcmShowSearch.bind(this);
        this.handleSymShowSearch = this.handleSymShowSearch.bind(this);
        this.refreshScroller = this.refreshScroller.bind(this);
        this.showTcmSearch=this.showTcmSearch.bind(this);
        this.showSymSearch=this.showSymSearch.bind(this);
        this.hideTcmSearch=this.hideTcmSearch.bind(this);
    }

    /*componentWillReceiveProps() {
      this.setState({
        showSearch: this.props.show,
        showTcmSearch: this.props.showTcm
      })
    }*/


    showSearch() {
        const {showSearch} = this.props;
        showSearch && showSearch()
    }

    hideSearch() {
        const {hideSearch} = this.props;
        hideSearch && hideSearch()
    }

    showTcmSearch() {
        const {showTcmSearch} = this.props;
        showTcmSearch && showTcmSearch()
    }

    hideTcmSearch() {
        const {hideTcmSearch} = this.props;
        hideTcmSearch && hideTcmSearch()
    }

    showSymSearch(flag) {
        const {showSymSearch} = this.props;
        showSymSearch && showSymSearch(flag)
    }

    handleSymShowSearch(e) {
        this.showSymSearch(this.props.showSym ? false : true)
        this.setState({pageTop: getPageCoordinate(e).boxTop})
        if (this.props.showSym) {
            this.props.setHighter(48)
        } else {
            this.props.getBilling({mode: 10});
            setPosition(e, "#searchOption", this.props.setHighter)
        }
    }

    handleshowSearch(e) {
        this.props.show ? this.hideSearch() : this.showSearch()
        this.setState({pageTop: getPageCoordinate(e).boxTop})
        if (this.props.show) {
            this.props.setHighter(48)
        } else {
            this.props.getBilling({mode: 10});
            setPosition(e, "#searchOption", this.props.setHighter)
        }
    }

    handleTcmShowSearch(e) {
        this.props.showTcm ? this.hideTcmSearch() : this.showTcmSearch()
        this.setState({pageTop: getPageCoordinate(e).boxTop})
        if (this.props.showTcm) {
            this.props.setHighter(48)
        } else {
            this.props.getBilling({mode: 10});
            setPosition(e, "#searchOption", this.props.setHighter)
        }
    }

    refreshScroller() {
        //更新滚动条状态，解决容器变大滚动条不更新bug
        return this.context.scrollArea;
    }

    render() {
        const {isTcm,tcmList} = this.props;
        if (isTcm) {    //添加中医诊断后才显示中医症候添加按钮
            const len = tcmList.length>0?tcmList.length-1:0;
            const showNext = tcmList.length===0||(tcmList.length>0&&tcmList[len].tcmDiag&&tcmList[len].tcmSyndrome);
            const showZh = tcmList.length>0&&tcmList[len].tcmDiag&&!tcmList[len].tcmSyndrome;
            return (<div id="diagnosisTcmResult">
                <ItemBox id="tcmDiagnosis" title="中医诊断" boxHeight='auto' hideAllDrop={this.props.hideAllDrop}
                         titleTop='22px' marginTop='9px' backgroundColor='#EAF7FD'>
                    <DiagnosticList isTcm={isTcm}
                                    refreshScroller={this.refreshScroller}
                                    setHighter={this.props.setHighter}
                                    hideChronic={this.props.hideChronic}></DiagnosticList>
                    {showNext?<div style={{marginLeft: '10px', position: 'relative', color: '#000'}}>
                        <Add showText="添加中医诊断结果" handleClick={this.handleTcmShowSearch} id="addTcmDiag"
                             height="50px"/>
                        <DiagResultSearch
                            refreshScroller={this.refreshScroller}
                            setHighter={this.props.setHighter}
                            windowHeight={this.props.windowHeight}
                            pageTop={this.state.pageTop}
                            isTcm={isTcm}
                            height={150}>
                        </DiagResultSearch>
                    </div>:''}
                </ItemBox>
                <Message></Message>
            </div>)
        }
        return (<div id="diagnosisResult">
            <ItemBox id="diagnosis" title='西医诊断' boxHeight='auto' hideAllDrop={this.props.hideAllDrop} titleTop='22px'
                     marginTop='9px' backgroundColor='#EAF7FD'>
                <DiagnosticList refreshScroller={this.refreshScroller} hideChronic={this.props.hideChronic}></DiagnosticList>
                <div style={{marginLeft: '10px', position: 'relative', color: '#000'}}>
                    <Add showText="添加西医诊断结果" handleClick={this.handleshowSearch} id="addDiag" height="50px"/>
                    <DiagResultSearch
                        refreshScroller={this.refreshScroller}
                        setHighter={this.props.setHighter}
                        windowHeight={this.props.windowHeight}
                        pageTop={this.state.pageTop}
                        height={150}>
                    </DiagResultSearch>
                </div>
            </ItemBox>
            <Message></Message>
        </div>)
    }
}
Diagnosis.contextTypes = {
  scrollArea: React.PropTypes.object
};
export default Diagnosis;