import React from 'react'
import { NavBar,Icon,ActivityIndicator,NoticeBar} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css'; 
import { browserHistory } from 'react-router';
import { Setting } from '../../Utils/constsetting';

export class CNavBar extends React.Component {
     
    constructor(props) {
        super(props);
        const { midtitle ,hideLeftIcon,leftContent,leftClick,rightContent,rightClick} = this.props ;
        this.leftClick = this.leftClick.bind(this);
        this.startLaoding = this.startLaoding.bind(this);
        this.stopLaoding = this.stopLaoding.bind(this);
        this.ajaxComplit = this.ajaxComplit.bind(this);
        Setting.AjaxRunning =false;
        this.state = {
          loading:true,
          title:midtitle,
          ajaxerr:false,
          errmsg:'',
          hideLeftIcon:hideLeftIcon,
          leftContent:leftContent,
          leftClick:leftClick,
          rightContent:rightContent,
          rightClick:rightClick,
        };
    }

    componentDidMount() {
      $(document)
      .ajaxStart(this.startLaoding)
      .ajaxStop(this.stopLaoding)
      .ajaxComplete(this.ajaxComplit);
      if(this.state.loading && !Setting.AjaxRunning){
        this.setState({loading:false});
      }
    }
  ajaxComplit =(event,xhr,options)=>{
    var iserr = xhr.status!=200
    var errmsg = '';
    if(xhr.status==200){
      if(xhr.responseJSON && xhr.responseJSON.ExceptionMessage){
        iserr=true;
        errmsg = xhr.responseJSON.ExceptionMessage; 
      }
    }else{ 
      errmsg = 'error code:' + xhr.status;
      if(xhr.responseJSON.Message)
        errmsg += '; message:' + xhr.responseJSON.Message;
    }
    if(iserr){
      console.error(errmsg);
      this.setState({ajaxerr:true,errmsg:errmsg});
    }
  }
  startLaoding =()=>{
    this.setState({loading:true,ajaxerr:false});
  }
  stopLaoding =()=>{ 
      this.setState({loading:false});
  }
    componentWillUnmount(){
      $(document).unbind('ajaxStart',this.startLaoding);
      $(document).unbind('ajaxStop',this.stopLaoding);
      $(document).unbind('ajaxComplete',this.ajaxComplit);
    }

    leftClick=()=>{
        browserHistory.goBack();
    }
    icon=()=>{
      return (<Icon type="left" />);
    }
    rightClick=()=>{
      this.state.rightClick();
    }
    render() { 
      return (<div>
        <NavBar icon={this.state.hideLeftIcon?"":this.icon()}
                  mode="dark"
                  leftContent={this.state.leftContent||""}
                  onLeftClick={this.state.hideLeftIcon?"":this.state.leftClick||this.leftClick}
                  rightContent={this.state.rightContent?this.state.rightContent:(this.state.loading?
                      (<ActivityIndicator size='large' animating/>):'')
                  } > 
          {this.state.title}
        </NavBar>
        {this.state.ajaxerr?<NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }} mode="closable" icon={<Icon type="cross-circle-o" size="xxs"/>}>{this.state.errmsg}</NoticeBar>:""}
      </div>);
    }
  }