import React from 'react';
import { Button } from 'antd';
import SystemPropertiesForm from './widget/SystemPropertiesForm';
import './styles/system.less';
import * as PropTypes from 'prop-types';
import { connectAlita } from 'redux-alita';
import { withRouter } from 'react-router-dom';

 class SystemProperties extends React.Component {

    static propTypes = {
        queryConfig: PropTypes.object,
    };

    constructor(props) {
        super(props);
        this.state = {
            addModalVisible: false,
        };
        this.params = {
            page: 1,
            pageSize: 10,
            application:undefined,
            profile:undefined,
            label:undefined,
            key:undefined
        };
    }

    _refreshData() {
        this.params.page = 1;
        this._queryConfigData();
    }

    _queryConfigData(){
        let params = this.params;
        this.props.setAlitaState({funcName:'queryConfig',params});

    }

    render() {
        let {data:configList,isFetching} = this.props.queryConfig||{};
        return (<div className='page-container'>
            <div className='page-header'>
                <Button htmlType="button" type="primary" icon="sync" loading={isFetching}
                        onClick={this._refreshData.bind(this)}/>
                <Button htmlType='button' type='primary'
                        onClick={() => this.setState({ addModalVisible: true })} icon='plus'/>
            </div>

            <SystemPropertiesForm visible={this.state.addModalVisible}
                                  onHide={() => this.setState({ addModalVisible: false })}/>
            系统的基本属性配置
        </div>);
    }

}

export default connectAlita(['queryConfig'])(SystemProperties)