import React from 'react'
import { Layout, Spin, Icon } from 'antd'
import './layout.less'
import { connect } from 'dva'
import ChartDesignerHeader from './header'
import ChartDesignerContent from './content'
const { Header, Content } = Layout

class ChartDesigner extends React.Component {
    componentDidMount() {
        const { dispatch } = this.props;
        const { code } = this.props.match.params;
        dispatch({ type: 'chartDesigner/reset' });
        dispatch({ type: 'dataSource/fetchList' });
        if(code !== 'create') {
            dispatch({ type: 'chart/remoteDetail', code: code });
            dispatch({ type: 'chart/remoteGroupList', code: code });
        }
    }
    render() {
        const { loading } = this.props;
        return <Layout className='chartdesigner-layout'>
            <Header className='layout-header'>
                <ChartDesignerHeader />
            </Header>
            <Content className='layout-content' style={{ height: 0 }}>
                <ChartDesignerContent />
            </Content>
            <div style={{ display: loading ? 'block' : 'none', position: 'absolute', height: '100%', width: '100%', zIndex: '4', background: 'rgba(51,51,51,.1)' }}>
                <Spin style={{ display: 'inline-block', position: 'absolute', top: '50%', left: '50%', margin: '-10px' }} indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />}/>
            </div>
        </Layout>
    }
}
function mapStateToProps(state) {
    let effectsArr = ['chart/remoteDetail', 'chart/remoteGroupList', 'chartDesigner/remoteDataColumn', 'chartDesigner/fetchLineData',
        'chartDesigner/fetchBarData', 'chartDesigner/fetchPieData', 'chartDesigner/fetchScatterData', 'chartDesigner/fetchDataViewData', 'chartDesigner/fetchAggregateTableData'];
    let loading = false;
    effectsArr.map(e => {
        return state.present.loading.effects['chart/remoteDetail'];
    });
    for(let i = 0; i < effectsArr.length; i++) {
        if(state.present.loading.effects[effectsArr[i]]) {
            loading = true;
            break;
        }
    }

    return { loading }
}
export default connect(mapStateToProps)(ChartDesigner);