import '../../style/securitySetting.less';
import React, {
    Component
} from 'react';
import {
    WeaTop,
    WeaAlertPage,
    WeaDialogFooter
} from 'ecCom';
import Tabs from '../../coms/Tabs';
import BasicSetting from './BasicSetting';
import AdvanceSetting from './AdvanceSetting';
import NetworkSetting from './NetworkSetting';
import DbSetting from './DbSetting';
import Dialog from './Dialog';
import {
    inject,
    observer
} from 'mobx-react';
import {
    i18n
} from '../../public/i18n';

@inject("hrmSecuritySetting")

@observer
export default class SecuritySetting extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isSingle: false,
            type: ''
        }
    }

    componentWillMount() {
        // document.title = this.props.location.pathname === 'hrmengine/securitySetting' ? '安全设置' : '';
    }

    componentDidMount() {
        this.init();
    }

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

    init = () => {
        const {
            hrmSecuritySetting: store,
            location
        } = this.props;

        const params = {};

        if (location && location.query && location.query.type) {
            Object.assign(params,location.query);
        }else{
            Object.assign(params,this.props)
        }
        
        const {single, type} = params;

        this.setState({
            isSingle: (single == '1' ? true : false),
            type
        })
        store.initData(single, type);
    }

    tabChangeHandle = (idx) => {
        const {
            hrmSecuritySetting
        } = this.props;
        hrmSecuritySetting.setActiveTab(idx);
    }

    renderTabContent = () => {
        const {
            hrmSecuritySetting
        } = this.props;
        const {
            tabConfig,
            toJS
        } = hrmSecuritySetting;
        const {
            tabs
        } = toJS(tabConfig);
        const content = [];
        if (tabs.length == 0)
            return content;;
        tabs.map((tab, index) => {
            switch (tab.viewCondition) {
                case '1':
                    content.push(<BasicSetting ecId={`${this && this.props && this.props.ecId || ''}_BasicSetting@u7daz8@${index}`} {...this.state}/>);
                    break;
                case '2':
                    content.push(<AdvanceSetting ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSetting@vvmugo@${index}`} {...this.state}/>);
                    break;
                case '3':
                    content.push(<NetworkSetting ecId={`${this && this.props && this.props.ecId || ''}_NetworkSetting@4z4cue@${index}`} {...this.state}/>);
                    break;
                case '4':
                    content.push(<DbSetting ecId={`${this && this.props && this.props.ecId || ''}_DbSetting@h7bt8h@${index}`} {...this.state}/>);
                    break;
            }
        })
        return content;
    }

    render() {
        const {
            hrmSecuritySetting: store
        } = this.props;
        const {
            containerInitFinished,
            refreshTab
        } = store;
        const {
            tabConfig,
            btnsAndMenus,
            formTarget,
            getTabIndex
        } = store;
        const {
            btns,
            menus,
            tabBtnDef
        } = btnsAndMenus(tabConfig);
        const {
            conditionForm: form,
            conditionFormFields: fields
        } = formTarget;

        const tabProps = {
            tabConfig: tabConfig,
            tabChangeHandle: this.tabChangeHandle,
            activeTabInfo: {
                activeTabKey: tabConfig.activeTabKey,
                activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
            },
            rightMenu: menus,
            store: store,
            conditionForm: form,
            conditionFormFields: fields,
            tabBtnDef: tabBtnDef
        }

        const getComp = () => {
            if (this.state.isSingle) {
                return (
                    <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@ovqei2`} {...tabProps}>
                        {
                            this.renderTabContent()
                        }
                    </Tabs>
                )
            }
            return (
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@fk1gcs`}
                    title={i18n.module.securitySetting()}
                    icon={<i className='icon-coms-hrm'/>}
                    iconBgcolor='#217346'
                    buttons={btns}
                    showDropIcon={true}
                    dropMenuDatas={menus}
                >
                    <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@nljp3o`} {...tabProps}>
                        {
                            this.renderTabContent()
                        }
                    </Tabs>
                </WeaTop>
            )
        }

        const {
            dialog,
            subDialog,
            mainDialogStyle,
            subDialogStyle,
            subDialogBtns,
            tableObj,
            configurableForm,
        } = store, {
            comsWeaTableStore
        } = tableObj;

        return (
            <div className="hrm_module_container securitySetting">
                {
                    containerInitFinished.init && containerInitFinished.authorized &&
                    getComp()
                }
                {
                    this.state.isSingle && (['advance', 'network'].indexOf(this.state.type)) < 0 && 
                    <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@2n15ok`} buttons={btns} moreBtn={{datas: menus}}/>
                }
                {
                    containerInitFinished.init && !containerInitFinished.authorized && 
                    <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@75y9yn`}>
                        <div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
                    </WeaAlertPage>
                }
                <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@bguacm`} 
                    store={store} 
                    dialog={dialog} 
                    style={mainDialogStyle}
                    isMain={true}
                    loading={comsWeaTableStore.loading}
                />
                <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@uw23gz`} 
                    store={store} 
                    dialog={subDialog} 
                    style={subDialogStyle}
                    isMain={false}
                    buttons={subDialogBtns}
                    loading={configurableForm.loading}
                />
            </div>
        );
    }
}