import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css'; 
import { InputItem, Icon, Modal} from 'antd-mobile';
import { CNavBar } from './navbar';

const alert = Modal.alert;

export default class BasePage extends React.Component {
    constructor(props) {
        super(props); 
        const { midtitle ,hideLeftIcon,leftContent,leftClick,rightContent,rightClick} = this.props;
        this.state={ 
          height: window.wheight||800,
          title:midtitle, 
          hideLeftIcon:hideLeftIcon,
          leftContent:leftContent,
          leftClick:leftClick,
          rightContent:rightContent,
          rightClick:rightClick,
        };
        this.FuncHelpRightClick = this.FuncHelpRightClick.bind(this);
    }
   
    componentDidMount() {
        const hei = (window.wheight||document.documentElement.clientHeight) - ReactDOM.findDOMNode(this.lv).offsetTop;  
        this.setState({ 
            height: hei,
        });
    }

    funchelp(str){
        var ss = str.split('\n');
        return(
            <div style={{ height: '300px', width: '100%', overflow: 'scroll', wordWrap: 'break-word' }}>
                {ss ? ss.map((value)=>{
                    return (<p>{value}<br/></p>)
                }) : ""}
            </div>
        )
    }
    
    FuncHelpRightClick() {        
        alert('帮助', this.funchelp(this.props.children.props.location.state.func.FuncHelp), [
            { text: '确定', onPress: () => {}}
        ],'android')
    } 

    render() {    
        let sty ={
            "height":this.state.height,
            "overflow":'auto'
        }

        return (
            <div>
                <CNavBar midtitle={this.state.title||(this.props.children.props.location.state
                && this.props.children.props.location.state.func 
                && this.props.children.props.location.state.func.name?
                            this.props.children.props.location.state.func.name:"EMCS")} 
                                hideLeftIcon={this.state.hideLeftIcon}
                                leftContent={this.state.leftContent}
                                leftClick={this.state.leftClick}
                                rightContent={this.state.rightContent?this.state.rightContent:
                                    (this.props.children.props.location.state &&
                                        this.props.children.props.location.state.func && this.props.children.props.location.state.func.FuncHelp)?
                                    (<div style={{display: 'table-cell', verticalAlign: 'middle'}} 
                                    onClick={this.FuncHelpRightClick}><span>帮助</span></div>):""}
                                rightClick={this.state.rightClick}
                        />
                <div ref={el=>this.lv = el} id="rightWrap" style={sty}>
                    {this.props.children}
                </div>
            </div>
        )
    }   
}