import '../../style/groupSetting.less';
import React, {Component} from 'react';
import {inject,observer} from 'mobx-react';
import {WeaTop, WeaAlertPage, WeaDialogFooter} from 'ecCom';
import {i18n} from '../../public/i18n';
import Info from './Info';

@inject('hrmGroupSetting')
@observer
export default class GroupInfoSingle extends Component{
    constructor(props) {
        super(props);
	}

	componentDidMount() {
		this.init();
	}

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

    init = () => {
        const {
            hrmGroupSetting: store,
            params,
            groupId,
            callback
        } = this.props;
        const {id} = params;
        store.checkAuthorized('kq/group', null, () => store.initSingle(groupId || id, callback), null, true);
    }
    
    render(){
        const {
            hrmGroupSetting: store,
            location
        } = this.props;
        const {
            single
        } = location.query;
		const {
            containerInitFinished,
            getTopProps,
        } = store;
        let title = i18n.label['389064']();
		const {buttons, menus} = getTopProps(true);
		const topProps = {
			title,
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
			showDropIcon: true,
			buttons: buttons,
			dropMenuDatas: menus
        }

        let children = [];
        if(single === '1')
            children.push(
                (
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ijbdlj`} {...topProps}>
                        <div className='tabPane tabPane-include'>
                            <Info ecId={`${this && this.props && this.props.ecId || ''}_Info@2wsslx`} store={store} />
                        </div>
                    </WeaTop>
                )
            );
        else
            children.push(
                (
                    <div>
                        <Info ecId={`${this && this.props && this.props.ecId || ''}_Info@z7afio`} store={store} />
                        <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@yxagfn`} buttons={buttons} moreBtn={{datas: menus}}/>
                    </div>
                )
            )
        
        return (
            <div className="hrm_module_container">
			{
				containerInitFinished.init && containerInitFinished.authorized && children
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@7nuggb`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
			</div>
        )
    }
}