import React from 'react';
import { Input, Select, Icon, Button } from 'antd';
import emitter from '../../eventManger/ev';
const Option = Select.Option;
import './header.less';

class Header extends React.Component {
    constructor(props) {
        super(props);
		this.state = {
			title: props.chartTitle || '未命名'
		};
    }

    componentDidMount() {
        // 在组件装载完成后发布事件
        this.eventEmitter = emitter.addListener('headersettitle', (title)=>{
            this.setState({
                title
            });
        });
    }

    componentWillUnmount() {
        emitter.removeAllListeners('headersettitle');
    }

    emit(eventName, params) {
        emitter.emit(eventName);
    }

    titleChange() {
        
    }

    render() {
        const { emptyTitle, title } = this.state;

        return <div className='header'>
            <div className='header-item toolbar-title'>
                <Input className='input-title' 
                    width={200} 
                    addonAfter={<Icon type="edit" />} 
                    value={title}
                    onChange={this.titleChange}
                />
            </div>
            <div className='header-item toolbar-buttons'>
                <div className=''>
                    <Button className='button-uodo' icon='undo' onClick={this.emit('undo')}>撤销</Button>
                    <Button className='button-redo' onClick={this.emit('redo')}>重做</Button>
                    <Button className='button-uodo' onClick={this.emit('Preview')}>预览</Button>
                    <Button className='button-uodo' onClick={this.emit('save')}>保存</Button>
                </div>
            </div>
        </div>
    }
}

export default Header;