import React from 'react'
import { connect } from 'dva'
import { Icon, Layout, Spin } from 'antd'
import DataSourceDetailHeader from './header'
import DataSourceCreateHeader from './headerCreate'
import DataSourceDetailContent from './content'
import DataSourceCreateContent from './contentCreate'
import './layout.less'
const { Header, Content } = Layout


class DataSourceDetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            paramsType: props.match.params.type,
            paramsCode: props.match.params.code,
        }
    }

    componentDidMount() {
        const { dataSource, dispatch } = this.props;
        const { paramsType: type, paramsCode: code } = this.state;
        dispatch({ type: 'dataSourceDetail/reset' });
        if(code !== 'create') {
            dispatch({ type: 'dataSource/remoteDetail', code: code })
            dispatch({ type: 'dataSourcePolicy/fetchList', dataSourceCode: code });
        }else {
            dispatch({ type: 'dataSourceDetail/setFields', fields: [
                { name: 'type', value: type },
                { name: 'group', value: dataSource.currentGroup ? dataSource.currentGroup.code : '-1'  }
            ] });
        }
    }

    render() {
        const { paramsCode: code } = this.state;

        return <Layout className='layout-datasourcedetail'>
            <Header>
                {code === 'create' ? <DataSourceCreateHeader /> : <DataSourceDetailHeader />}
            </Header>
            <Content style={{ height: 0 }}>
                {code === 'create' ? <DataSourceCreateContent params={this.props.match.params}/> : <DataSourceDetailContent params={this.props.match.params}/>}
            </Content>
            <div style={{ display:'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>
    }

}

export default connect(({ dataSource, dataSourceDetail }) => ({ dataSource, dataSourceDetail }))(DataSourceDetail)