import '../../style/upgrade.less';
import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {WeaAlertPage} from 'ecCom';
import {Tabs} from '../../../hrmComsPublic/index';
import Content from './Content';
import {i18n} from '../../public/i18n';

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

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

    init = () => {
        const {
            hrmUpgrade: store
        } = this.props;
        store.checkAuthorized('kq/upgrade', null, store.init, null, false);
    }

    render(){
        const {
			hrmUpgrade: store
        } = this.props;
        const {containerInitFinished} = store;
        const tabProps = {
            tabConfig: store.tabConfig,
            activeTabInfo: {
                activeTabKey: '1',
                activeTabIndex: 0
            },
            store: store
        }
        
        return (
            <div className="hrm_module_container upgrade">
            {
				containerInitFinished.init && containerInitFinished.authorized &&
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@rdhvdx`} {...tabProps}>
                    <Content ecId={`${this && this.props && this.props.ecId || ''}_Content@jqu8uq`} />
                </Tabs>
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@fcqfrx`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
            }
            </div>
        )
    }
}