import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx';
import {
	WeaCascader,
	WeaTextarea,
} from 'ecCom'
import {
	Spin,
	message,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

import TextArea from './TextArea';

@inject('hrmSalaryItemsSet')
@observer
export default class Calculator extends React.Component {
	constructor(props) {
		super(props);
		this.conditionItems = [7, 8, 9, '<', '>', 4, 5, 6, '≤', '≥', 1, 2, 3, '&', '||', 0, '.', '←', '='];
		this.formulaItems = [7, 8, 9, '+', '-', 4, 5, 6, '×', '÷', 1, 2, 3, '(', ')', 0, '.', '←', '='];
	}

	componentDidMount() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			cal,
			formInfo,
			getCascaderDatas,
		} = hrmSalaryItemsSet, {
			itemType,
			calMode
		} = formInfo;

		if (!(itemType == '9' && calMode == '2' && cal.position.colIndex == 'formula')) getCascaderDatas();
	}

	componentWillUnmount() {
		this.props.hrmSalaryItemsSet.refreshCalculator();
	}

	getClassName = (index) => {
		let cn = 'hrm-calculator-item'

		if ((index < 15) && ((index + 2) % 5 == 0 || (index + 1) % 5 == 0)) {
			cn = `${cn} hrm-calculator-item-special`;
		}

		if (index == 14) {
			cn = `${cn} hrm-calculator-item-or`
		}
		if (index == 16) {
			cn = `${cn} hrm-calculator-item-dot`
		}
		if (index == 17) {
			cn = `${cn} hrm-calculator-item-arrow`
		}
		if (index == 18) {
			cn = `${cn} hrm-calculator-item-equal`
		}

		return cn;
	}

	clickKeyboard = (item, index) => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			popItem,
			calculator,
			textArea,
			cal,
		} = hrmSalaryItemsSet, {
			values
		} = calculator, {
			position
		} = cal;

		const lastKey = values[values.length - 1];

		if (position.colIndex == 'condition' && !lastKey) {
			message.warning(i18n.message.logicWrong());
			return
		}

		if (index !== 17) {
			this.insert(item)
		} else {
			popItem();
		}
	}

	insert = (item) => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			pushItem,
			cal,
			textArea,
		} = hrmSalaryItemsSet, {
			position
		} = cal, {
			colIndex
		} = position, {
			pageShowItems
		} = textArea;

		let temp;
		if (colIndex == 'condition') {
			if (item == '&') {
				temp = '&&';
			} else if (item == '≥') {
				temp = '>=';
			} else if (item == '≤') {
				temp = '<=';
			} else {
				temp = item;
			}

		} else {
			if (item == '×') {
				temp = '*';
			} else if (item == '÷') {
				temp = '/';
			} else {
				temp = item;
			}
		}

		pushItem(temp);

	}


	render() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			calculator,
			subDialog,
			changeCascaderValue
		} = hrmSalaryItemsSet, {
			compProps,
			values,
			loading,
		} = calculator, {
			type
		} = subDialog;

		let items = (type == 'cd') ? this.conditionItems : this.formulaItems;

		if (loading) {
			return (
				<div className='hrm-loading-center-small'>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ltxa45`} spinning={loading}></Spin>
                </div>
			)
		} else {
			return (
				<div>
					<div className='hrm-salary-cascader'>
						<WeaCascader ecId={`${this && this.props && this.props.ecId || ''}_WeaCascader@8p3r51`} compDef={toJS(compProps)} values={toJS(values)} onChange={cb => changeCascaderValue(cb)}/>
					</div>
					<div className='hrm-salary-calculator'>
						<div className='hrm-salary-textarea'>
							<TextArea ecId={`${this && this.props && this.props.ecId || ''}_TextArea@pck7qc`} />
						</div>
						<div className='hrm-calculator-wrapper'>
							{items.map( (item, index) => {
								return <div className={this.getClassName(index)} onClick={() => this.clickKeyboard(item, index)}>{item}</div>
							})}
						</div>
					</div>
				</div>
			)
		}

	}
}