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

import Calculator from './Calculator';
import CalculatorCopy from './CalculatorCopy';

@inject('hrmSalaryItemsSet')
@observer
export default class SubDialog extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 800,
			height: 420,
		}
	}

	getButtons = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			clearCalculator
		} = hrmSalaryItemsSet;

		const btns = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e18wqx`} type="primary" onClick={() => this.save()}>{i18n.button.save()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bcigaw`} type="primary" onClick={() => clearCalculator()}>{i18n.button.resetSetting()}</Button>),
			(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@7dfxer`} />)
		];

		return btns;
	}

	save = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			writeToTable,
			calculator,
			cal,
		} = hrmSalaryItemsSet, {
			values
		} = calculator, {
			position
		} = cal;

		if (position.colIndex == 'condition' && !values[values.length - 1]) {
			message.warning(i18n.message.logicWrong());
			return
		}
		writeToTable();
	}

	getCalculator = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo,
			cal,
			calculator,
		} = hrmSalaryItemsSet, {
			calMode,
			itemType,
		} = formInfo, {
			loading
		} = calculator;

		if (itemType == '9' && calMode == '2' && cal.position.colIndex == 'formula') {
			if (loading) {
				return (
					<div className='hrm-loading-center-small'>
                    	<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@3seyi1`} spinning={loading}></Spin>
               		</div>
				)
			} else {
				return (
					<div className='hrm-calculators'>
						<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@r2iyoh`} title={i18n.label.personalSet()} children={<Calculator ecId={`${this && this.props && this.props.ecId || ''}_Calculator@wsymop`} />}  showGroup={true}/>
						<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@cw2ffh`} title={i18n.label.companySet()} children={<CalculatorCopy ecId={`${this && this.props && this.props.ecId || ''}_CalculatorCopy@9qdc51`} />}  showGroup={true}/>
					</div>
				)
			}

		} else {
			return <Calculator ecId={`${this && this.props && this.props.ecId || ''}_Calculator@p5lggx`} />
		}

	}

	render() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			subDialog,
			closeDialog,
			formInfo,
			cal,
		} = hrmSalaryItemsSet, {
			title,
			visible
		} = subDialog, {
			calMode
		} = formInfo, {
			width,
			height
		} = this.state;

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

	}
}