import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaDialog,
	WeaMoreButton,
} from 'ecCom'
import {
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

import WorkHourTab from './WorkHourTab';
import BasicSet from './BasicSet';

@inject('hrmWorkHour')
@observer
export default class MainDialog extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 700,
			height: 570,
		}
	}

	getButtons = () => {
		const {
			hrmWorkHour,
		} = this.props, {
			save,
			tabInfo,
			resetBasicSet,
			formInfo,
			signFormInfo,
		} = hrmWorkHour, {
			selectedKey
		} = tabInfo;

		const datas = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.save(),
			disabled: formInfo.loading,
			onClick: () => save(),
		}, {
			key: '1',
			icon: <i className='icon-coms-Refresh' />,
			content: i18n.button.resetSetting(),
			disabled: formInfo.loading,
			onClick: () => resetBasicSet(),
		}]

		const buttons = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j61v38`} 
				type="primary" 
				disabled={selectedKey == '0' ? formInfo.loading : signFormInfo.loading} 
				onClick={() => save()}
			>
				{i18n.button.save()}
			</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9jnq3n`} type="primary" disabled={formInfo.loading} onClick={() => resetBasicSet()}>{i18n.button.resetSetting()}</Button>),
			(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@lhx94q`} datas={(selectedKey == '0') ? datas : datas.slice(0, 1)}/>)
		];

		return (selectedKey == '0') ? buttons : buttons.slice(0, 1).concat(buttons.slice(2, 3));
	}

	getComponent = () => {
		const {
			hrmWorkHour
		} = this.props, {
			mainDialog,
			mainTable,
		} = hrmWorkHour, {
			contentType,
			visible
		} = mainDialog;

		return (contentType == 'new') ? visible && <BasicSet ecId={`${this && this.props && this.props.ecId || ''}_BasicSet@2fib2l`} /> : visible && <WorkHourTab ecId={`${this && this.props && this.props.ecId || ''}_WorkHourTab@rt0g9n`} params={{id: mainTable.selectedRowsKeys}}/>;
	}

	render() {
		const {
			hrmWorkHour
		} = this.props, {
			closeDialog,
			mainDialog,
		} = hrmWorkHour, {
			title,
			visible,
		} = mainDialog, {
			width,
			height,
		} = this.state;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@dqmpra`}
	          	title={title}
	          	icon="icon-coms-hrm"
	          	iconBgcolor="#217346"
	          	visible={visible}
	          	closable={true}
	          	hasScroll={true}
	          	onCancel={() => closeDialog('main')}
	          	buttons={this.getButtons()}
	          	style={{width: width, height: height}}
	          	onChangeHeight={(h) => this.setState({height: h})}
	        >
	          	{this.getComponent()}
	        </WeaDialog>
		)

	}
}