import React, {Component} from 'react';
import {observer} from 'mobx-react';
import Tabs from '../../../hrmengine/coms/Tabs';
import DaySetting from './DaySetting';
import CycleSetting from './CycleSetting';
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class DropdownOverlay extends Component{
    constructor(props){
        super(props);
    }

    componentWillReceiveProps(nextProps){
        if(this.props.v != nextProps.v){
            const {store} = this.props;
            const {editTabConfig} = store;
            const config = store.toJS(editTabConfig);
            config.tabChangeHandle('1');
        }
    }

    render(){
        if(!this.props.v)
            return <div></div>;

        const {store} = this.props;
        const {editTabConfig, serialInfo} = store;
        let config = store.toJS(editTabConfig);
        if(serialInfo == null)
            config.tabs = config.tabs.splice(0,1);
        const tabProps = {
            tabConfig: config,
            tabChangeHandle: config.tabChangeHandle,
            activeTabInfo: {
                activeTabKey: config.activeTabKey,
                activeTabIndex: store.getTabIndex(config.tabs, config.activeTabKey)
            },
            store: store
        }
        let height = 300;
        const shiftList = store.toJS(store.shiftList);
        const h = shiftList.length * 38 + 100;
        if(h < height) 
            height = h;
        return (
            <div className='scheduleSetting-edit' style={{height}}>
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@abxotu`} {...tabProps}>
                    <DaySetting ecId={`${this && this.props && this.props.ecId || ''}_DaySetting@2xe442`} {...this.props} />
                    <CycleSetting ecId={`${this && this.props && this.props.ecId || ''}_CycleSetting@stgtlx`} {...this.props} />
                </Tabs>
            </div>
        )
    }
}