import '../../style/browserDisplayFieldSetting.less';
import React, {Component} from 'react';
import { inject, observer } from 'mobx-react';
import {WeaTop, WeaAlertPage, WeaLocaleProvider, WeaRightMenu} from 'ecCom';
import Tabs from '../../coms/Tabs';
import { i18n } from '../../public/i18n';
import HrmField from './Hrm';
import DepartmentField from './Department';
import SubcompanyField from './Subcompany';
const getLabel = WeaLocaleProvider.getLabel;

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

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

    init = () => {
        const {hrmBrowserDisplayFieldSetting: store} = this.props;
        const {
			checkAuthorized,
			init
		} = store;
		checkAuthorized('browserDisplayField', null, init);
    }

    render(){
        const {hrmBrowserDisplayFieldSetting: store} = this.props;
        const {toJS, containerInitFinished, topBtnAndMenu, tab, setActiveTab, getTabIndex} = store;
        const {btns, menus} = topBtnAndMenu();
        const topProps = {
			icon: <i className='icon-coms-hrm'/>,
			iconBgcolor: '#217346',
            showDropIcon: true,
            title: getLabel('502146','浏览框显示字段定义'),
            buttons: btns,
            dropMenuDatas: menus
        }
        const tabConfig = toJS(tab);
        const tabProps = {
            tabConfig: tabConfig,
            tabChangeHandle: setActiveTab,
            activeTabInfo: {
                activeTabKey: tabConfig.activeTabKey,
                activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
            },
            rightMenu: menus,
            store: store
        }
        
        return (
            <div className='hrm_module_container browserDisplayFieldSetting'>
            {
				containerInitFinished.init && containerInitFinished.authorized &&
				<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ytfx6z`} {...topProps}>
                    
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@cwm9di`} datas={menus}>
                {
                    tabConfig.tabs.length > 0 &&
                    <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@l3fnxl`} {...tabProps}>
                        <HrmField ecId={`${this && this.props && this.props.ecId || ''}_HrmField@9f62vu`} />
                        <DepartmentField ecId={`${this && this.props && this.props.ecId || ''}_DepartmentField@v6ll55`} />
                        <SubcompanyField ecId={`${this && this.props && this.props.ecId || ''}_SubcompanyField@yszuf5`} />
                    </Tabs>
                }
                
                </WeaRightMenu>
                </WeaTop>
			}
			{
				containerInitFinished.init && !containerInitFinished.authorized && 
              	<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@jcpdx6`}>
                  	<div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
              	</WeaAlertPage>
			}
            </div>
        )
    }
}