import { observer } from 'mobx-react';
import React, {Component} from 'react';
import { WeaDialog } from 'ecCom';
import Tabs from '../../../coms/Tabs';
import Maintenancer from './Maintenancer';
import ConditionSetting from './ConditionSetting';
import ColumnSetting from './ColumnSetting';

@observer
export default class MaintenanceSettingView extends Component{
    render(){
        const {store} = this.props;
        const {
            mSettingDialog,
            settingTab,
            settingTabBtn,
            getTabIndex,
            tabChangeHandle
        } = store;
        const {
            formTarget: {
                mSettingListConditionForm: form,
                mSettingListConditionFormFields: fields
            },
		} = store;
		const tabProps = {
            tabConfig: settingTab,
			tabChangeHandle: tabChangeHandle,
			activeTabInfo: {
				activeTabKey: settingTab.activeTabKey,
				activeTabIndex: getTabIndex(settingTab.tabs, settingTab.activeTabKey)
			},
			rightMenu: [],
			store: store,
			tabBtnDef: settingTabBtn,
			conditionForm: form,
			conditionFormFields: fields
		}
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@o4wd9r`} {...mSettingDialog} onChangeHeight={v => store.mSettingDialogHeight = v}>
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@azy8rc`} {...tabProps}>
                    <Maintenancer ecId={`${this && this.props && this.props.ecId || ''}_Maintenancer@xcd2et`} />
                    <ConditionSetting ecId={`${this && this.props && this.props.ecId || ''}_ConditionSetting@4xy9tf`} />
                    <ColumnSetting ecId={`${this && this.props && this.props.ecId || ''}_ColumnSetting@f7sgui`} />
                </Tabs>
            </WeaDialog>
        )
    }
}