import React from 'react';
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent';
import { Input } from 'antd';

const Search = Input.Search;

export default class DevPage extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            monitorIP: localStorage.getItem('monitorIP') || ''
        }
    }

    onSaveIp(value) {
        value = value || '';
        let ipArr = value.split('.');
        if (ipArr && ipArr.length === 4) {
            localStorage.setItem('monitorIP', value);
        }
    }

    render(){
        let props = this.props;
        let {headerInfo , changePages} = props;
        let monitorIP = this.state.monitorIP;
        return(
            <div>
                <HeaderComponent
                    showHeader={CONFIG.headerStatus[1]}
                    headerInfo={headerInfo}
                />
                <div className="machineInfo" style={{textAlign:'center', marginTop:'3rem'}}>
                    <p style={{padding: '10px'}}>当前环境 {process.env.PAD_ENV}</p>
                   <p style={{padding: '10px'}}>当前版本号 {CURVERSION}</p>
                   <p style={{padding: '10px'}}>monitor端口 {CONFIG.config.domainPort} </p>
                   <div style={{padding: '10px'}}>
                    monitor ip: <Search
                                defaultValue={monitorIP}
                                style={{width: '200px'}}
                                placeholder="请输入ip"
                                enterButton="确定"
                                onSearch={value => this.onSaveIp(value)}
                            />
                   </div>
                   <Button text={'回首页'} btnContainer={'colfff font30'} style={{background:'#ff7860',marginLeft:'50%',transform:' translate(-50%)',marginTop:'.5rem'}} option={()=>changePages(CONFIG.showPage[13])} />
                </div>
            </div>

        )
    }
}