import '../../style/kqMonthReportSetting.less';
import React, {Component} from 'react';
import {inject,observer} from 'mobx-react';
import {WeaTop, WeaAlertPage} from 'ecCom';
import {i18n} from '../../public/i18n';
import {Spin} from 'antd'
import FieldTabs from './FieldTabs.js';
import CreateFieldDefine from './CreateFieldDefine.js';
import CreateGroup from './CreateGroup.js';
import GroupListSetting from './GroupListSetting.js';

@inject('kqMonthReportSetting')
@observer
export default class KQMonthReportSetting extends Component{
	componentDidMount() {
		this.init();
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
    }

    init = () => {
        const {
            kqMonthReportSetting: store
        } = this.props;
        store.checkAuthorized('kq/reportFieldDefine', null, store.init, null, false);
    }
    
    render(){
        const {
			kqMonthReportSetting: store
        } = this.props;
        const {
            containerInitFinished,
            loading,
            topProps
        } = store;
        
        return (
            <div className="hrm_module_container kqMonthReportSetting">
			{
                containerInitFinished.init && containerInitFinished.authorized &&
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4h8le8`} spinning = {loading}>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@u7retr`} {...topProps}>
                        <FieldTabs ecId={`${this && this.props && this.props.ecId || ''}_FieldTabs@79s71v`} store={store} />
                        <CreateFieldDefine ecId={`${this && this.props && this.props.ecId || ''}_CreateFieldDefine@dizbxs`} store={store} />
                        <CreateGroup ecId={`${this && this.props && this.props.ecId || ''}_CreateGroup@em7d7j`} store={store} />
                        <GroupListSetting ecId={`${this && this.props && this.props.ecId || ''}_GroupListSetting@n4v9ye`} store={store} />
                    </WeaTop>
				</Spin>
			}
			{
                containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@pwskl5`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
			</div>
        )
    }
}