import React, { Component } from "react";
import PatInfoContainer from '@containers/PatInfoContainer.js';
import style from "./index.less";
import { connect } from 'react-redux';
import historyCase from '@common/images/history.png';
import health from '@common/images/health.png'
import store from '@store';
import { showHistory } from '@store/actions/historyTemplates';
import { initItemList,setInitHistory } from '@store/async-actions/historyTemplates';
import HistoryCases from '@containers/HistoryCases';
import $ from 'jquery';
import {Notify,Loading} from '@commonComp';
// import {MODI_LOADING} from '@store/types/homePage.js';
import {SHOW_LOADING} from '@store/types/copyRight.js';
class InfoTitle extends Component {
    constructor(props){
        super(props);
        this.state={
            le:''
        }
        this.showHistoryBox = this.showHistoryBox.bind(this)
    }
    showHistoryBox(){
        const {showLoading,hideLoading}=this.props;
        showLoading();
        // store.dispatch(initItemList());
        // store.dispatch(showHistory(true))
        initItemList().then((res)=>{
            const result = res.data;
            if(result.code==0 && result.data){
                hideLoading();
                store.dispatch(setInitHistory(result.data));
                store.dispatch(showHistory(true));
            }else{
                hideLoading();
                Notify.info("暂无历史病历");
            }
        })
    }
    componentWillReceiveProps(next){
        const that = this;
        if(next.winWidth <= 1024){
          $(window).scroll(function(){
            let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            let left = -(scrollLeft - 10) +'px';
            that.setState({
              le:left
            })
          })
        }
    }
    render() {
        const {disVisible,copyVisible,winWidth,loading} = this.props;
        const {le} = this.state;
        return <div className={style['title-wrapper']}  style={{left:le}}>
            <PatInfoContainer />
            <div className={style['activeWrap']}>
                <div className={style["operations"]} onClick={this.showHistoryBox}>
                    <span><img src={historyCase} />&nbsp;历史病历</span>
                </div>
                <div className={style["health"]} >
                    <span><img src={health} />&nbsp;健康档案</span>
                </div>
            </div>
            <HistoryCases></HistoryCases>
            <Loading show={loading}/>
        </div>;
    }
}
function mapStateToProps(state) {
  return {
    disVisible: state.copyRight.disVisible,
    copyVisible:state.copyRight.copyVisible,
    winWidth:state.homePage.windowWidth,
    loading:state.copyRight.loading,
  }
}

function mapDispatchToProps(dispatch){
    return{
        showLoading(){
            // dispatch({type:MODI_LOADING,flag:true});
            dispatch({type:SHOW_LOADING,flag:true});
        },
        hideLoading(){
            // dispatch({type:MODI_LOADING,flag:false});
            dispatch({type:SHOW_LOADING,flag:false});
        }
    }
}

const InfoTitleCont = connect(
  mapStateToProps,
  mapDispatchToProps
)(InfoTitle);



export default InfoTitleCont;