/**
 * 页面头部组件
 * User: bjyangxiuwu
 * Date: 2018/12/17
 * Time: 16:23
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, DropdownMenu, Menu, MenuItem, LoadingBar, Button } from 'neatui';
import xhr from 'SERVICE/xhr';
import projectConfig from 'CONFIG/projectConfig.json';
import './header.scss';

const localHost = projectConfig.localhost || [];
localHost.push('localhost');

class Header extends React.PureComponent {
    static propTypes = {
        className: PropTypes.string.isRequired,
        history: PropTypes.string.isRequired
    };

    constructor(props, context) {
        super(props, context);
        this.env = localHost.indexOf(window.location.hostname) > -1 ? 'local.' : '';
        this.state = {
            userInfo: null
        };
        LoadingBar.start();
    }

    componentDidMount() {
        this.getUserInfo();
        LoadingBar.finish();
    }

    getUserInfo = () => {
        const url = projectConfig[`${this.env}ajax`].curUser;
        if (url) {
            xhr({
                url,
                method: 'get',
                type: 'json'
            }).then((rs) => {
                if (rs[projectConfig.codeKey] === projectConfig.code) {
                    const { account = "" } = rs.data;
                    if (window.WaterMark && account) {
                        window.WaterMark.clear();
                        window.WaterMark.mark({ 
                            text: account,
                            opacity: 0.05,
                        })
                    }
                    this.setState({
                        userInfo: rs.data
                    })
                }
            });
        }
    };

    logout = () => {
        const url = projectConfig[`${this.env}ajax`].logout;
        if (url) {
            xhr({
                url,
                method: 'get',
                type: 'json'
            }).then((rs) => { 
                if(rs[projectConfig.codeKey] === projectConfig.code) window.location.reload();
            });
        }
    }

    render() {
        const { className, history } = this.props;
        const { userInfo } = this.state;
        return (
            <header className={className}>
                <Row justify="between">
                    {
                        this.env === 'local.' ? <Button
                                variant="contained" color="success"
                                size="small"
                                style={{ margin: '0 10px 10px 10px', position: 'absolute', right: 300, top: 20, zIndex: 10 }}
                                onClick={() => { history.push(`/project`); }}>项目配置</Button> : ''
                    }
                    {
                        this.env === 'local.' ? <Button
                                variant="contained" color="success"
                                size="small"
                                style={{ margin: '0 10px 10px 10px', position: 'absolute', right: 400, top: 20, zIndex: 10 }}
                                onClick={() => { history.push(`/addmodule`); }}>添加功能</Button> : ''
                    }
                    <Button
                        variant="text" color="info" size="small"
                        style={{ margin: '0 10px 10px 10px', position: 'absolute', right: 130, top: 24, zIndex: 10 }}
                        onClick={() => { window.open('http://temp.163.com/special/ntesproject/'); }}>传送门</Button>
                    {userInfo && (
                        <Col>
                            <div className='userInfo'>
                                <DropdownMenu
                                    trigger="click"
                                    anchorEl={<span>{userInfo.name}</span>}
                                >
                                    <Menu style={{ width: 100, top: 0, right: 20, position: 'relative' }} selectable>
                                        <MenuItem value={1} onSelect={this.logout}>退出登录</MenuItem>
                                    </Menu>
                                </DropdownMenu>
                            </div>
                        </Col>
                    )}
                </Row>
            </header>
        );
    }
}

export default Header;