import React from 'react';
import { connect } from 'dva';
import { Input, Icon, message } from 'antd'
import ChartView from './chartView';

class ViewLayoutItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editing: false,
            title: props.item.name
        };
    }

    modifyItem = (item) => {
        const { dispatch } = this.props;
        dispatch({ type: 'dashboardDesigner/modifyItem', item });
    }

    render() {
        const { dispatch, main, dashboardDesigner, item, isPreview, reload, showPreviewBox, hidePreviewBox, esMobile, contentSize } = this.props;
        const { editing, title } = this.state;
        const { currentUser } = main;
        const { code: dashboardDesignerCode, editMode, minLayoutHeight } = dashboardDesigner;
        const { code, name, viewType, layout, chartCode, chartOption } = item;
        const iconCls = editMode ? 'visible-icon' : '';

        return (
            <div className={`chartview${ isPreview ? ' chartview-preview' : (editMode ? ' chartview-edit' : '')}${esMobile?' es-mobile':''}`} style={{ height: '100%' }}>
                <div className='chartview-toolbar mover'>
                    <div className='chart-title'>
                        {editing ? <Input width={200} ref={node => this['inputRef-' + code] = node} defaultValue={name}
                            value={title}
                            style={{ marginTop: '4px' }}
                            onChange={e => {
                                let val = e.target.value + '';
                                if(val.trim().length > 20) {
                                    message.warning('名称长度不能大于20');
                                }else {
                                    this.setState({
                                        title: val
                                    });
                                }
                            }}
                            onMouseDown={e => {
                                e.stopPropagation()
                            }}
                            onBlur={(e) => {
                                let value = e.target.value;
                                this.setState({
                                    editing: false,
                                }, () => {
                                    !!value.trim() && this.modifyItem({ ...item, name: value });
                                });
                            }}
                            onPressEnter={(e) => {
                                let value = e.target.value;
                                this.setState({
                                    editing: false,
                                }, () => {
                                    !!value.trim() && this.modifyItem({ ...item, name: value });
                                });
                            }}
                        /> : <span>{name}</span>}
                        <div className='tools'>
                            {editMode && !editing && !isPreview && <Icon type='edit' title='修改' style={{ cursor: 'pointer', marginLeft: '8px' }} onClick={() => {
                                this.setState({
                                    editing: true
                                }, () => {
                                    this['inputRef-' + code].focus();
                                })
                            }}/>}
                        </div>
                    </div>
                    <div className='chart-tools'>
                        {viewType !== 'richText' && <Icon className={iconCls} type="sync" theme="outlined" onClick={() => {
                            let page = chartOption ? chartOption.page : 1;
                            let pageSize = chartOption ? chartOption.pageSize : (~~((layout.h * minLayoutHeight + (layout.h - 1) * 12 - 20 - 40 - 24 - 8 * 2)/38) + 1)
                            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize });
                        }}/>}
                        {!isPreview && viewType !== 'richText' && <Icon className={iconCls} type="fullscreen" onClick={() => showPreviewBox(item)}/>}
                        {editMode && !isPreview && (item.creatorCode === currentUser.code || currentUser.role === 'superAdmin') && viewType !== 'richText' &&  <Icon className={iconCls} type='edit' onClick={() => {
                            dispatch({ type: 'dashboard/remoteModify',hideMessage:true });
                            dispatch({ type: 'dashboardDesigner/reset' });
                            dispatch({ type: 'main/redirect', path: '/chart/' + chartCode });
                        }}/>}
                        {!isPreview && editMode && <Icon className={iconCls} type='delete' onClick={() => {
                            dispatch({ type: 'dashboardDesigner/deleteItem', item });
                            window.setTimeout(() => {
                                var e = document.createEvent("Event");
                                e.initEvent("resize", true, true);
                                window.dispatchEvent(e);
                            }, 500);
                        }} />}
                        {isPreview && <Icon className={iconCls} type="close" onClick={hidePreviewBox}/>}
                    </div>
                </div>
                <ChartView key={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload} contentSize={contentSize} esMobile={esMobile} isPreview={isPreview}/>
            </div>
        )
    }
}

export default connect(({ main, dashboardDesigner }) => ({ main, dashboardDesigner }))(ViewLayoutItem);