import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx';
import {
	WeaFormItem,
	WeaRightMenu,
	WeaInputNumber,
	WeaSearchGroup,
} from 'ecCom'
import {
	Spin,
	Modal,
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';
const confirm = Modal.confirm;

import FormInfo from './FormInfo';
import FormulaSet from './FormulaSet';
import LevelSet from './LevelSet';
import StandardSet from './StandardSet';
import TaxRateSet from './TaxRateSet';

@inject('hrmSalaryItemsSet')
@observer
export default class ItemsSet extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillUnmount() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo,
			refreshPercent,
		} = hrmSalaryItemsSet, {
			itemType
		} = formInfo;

		(itemType == '9') && refreshPercent();
	}

	getDropMenuDatas = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo
		} = hrmSalaryItemsSet, {
			loading
		} = formInfo;

		const menu = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.save(),
			disabled: loading,
		}];

		return menu
	}

	handleMenuClick = (key) => {
		key == '0' && this.save();
	}

	save = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo,
			saveSalary,
			saveTaxRevenue,
			saveFormulaDatas,
		} = hrmSalaryItemsSet, {
			itemType
		} = formInfo;

		switch (itemType) {
			case '1':
				saveSalary();
				break;
			case '3':
				saveTaxRevenue();
				break;
			default:
				saveFormulaDatas();
		}
	}

	getGroupTwoTitle = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo
		} = hrmSalaryItemsSet, {
			itemType
		} = formInfo;

		let title;
		if (itemType == '1') {
			title = i18n.label.levelSet();
		}
		if (['3', '11'].includes(itemType)) {
			title = i18n.label.taxRateSet();
		}
		if (['4', '9'].includes(itemType)) {
			title = i18n.label.formulaSetting();
		}

		return title;
	}

	getChildren = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo,
		} = hrmSalaryItemsSet, {
			itemType,
			calMode,
		} = formInfo;

		if (itemType == '1') { //工资
			return <LevelSet ecId={`${this && this.props && this.props.ecId || ''}_LevelSet@t5x6yg`} />
		} else if (['3', '11'].includes(itemType)) { //税收
			return <TaxRateSet ecId={`${this && this.props && this.props.ecId || ''}_TaxRateSet@rm7viu`} />
		} else if (itemType == '4') { //计算
			return <FormulaSet ecId={`${this && this.props && this.props.ecId || ''}_FormulaSet@ngiuee`} />
		} else { //福利计算
			return (
				<div>
					{calMode == '1' && this.percentCom()}
					<FormulaSet ecId={`${this && this.props && this.props.ecId || ''}_FormulaSet@vknk6j`} />
				</div>
			)
		}
	}

	percentCom = () => { //个人、公司百分比
		const {
			hrmSalaryItemsSet
		} = this.props, {
			welfareCal,
			setWelfareCalPercent,
		} = hrmSalaryItemsSet, {
			personalPercent,
			companyPercent,
		} = welfareCal;

		return (
			<div style={{margin: '20px 25%'}}>
				<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@h6vfo6`}
		            label={i18n.label.personalPercent()}
		            labelCol={{span: 6}}
		            wrapperCol={{span: 18}}
          		>
            		<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@it1zw8`} 
            			value={personalPercent}
            			precision = {2}
            			onChange = {val => setWelfareCalPercent(val,'personal')}
            		/> 
            		<span style={{position: 'absolute',top: 6,right: -20}}>{'%'}</span>
          		</WeaFormItem>
          		<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@08lvzb`}
		            label={i18n.label.companyPercent()}
		            labelCol={{span: 6}}
		            wrapperCol={{span: 18}}
          		>
            		<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ft2gew`} 
            			value={companyPercent}
            			precision = {2}
            			onChange = {val => setWelfareCalPercent(val,'company')}
            		/>
            		<span style={{position: 'absolute',top: 6,right: -20}}>{'%'}</span>
          		</WeaFormItem>
			</div>
		)
	}

	add = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo,
			addTable,
		} = hrmSalaryItemsSet, {
			itemType
		} = formInfo;

		let temp;
		if (['3', '11'].includes(itemType)) { //税收
			temp = 'tax'
		}
		if (['4', '9'].includes(itemType)) { //计算
			temp = 'cal'
		}

		addTable(temp);
	}

	getCustomComponent = () => {
		return (<div>
					<i 
						className='icon-coms-plus hrm-plus-minus-btn' 
						title={i18n.button.add()} 
						onClick={() => this.add()}/>
					<i 
						className='icon-coms-Loss hrm-plus-minus-btn' 
						title={i18n.button.remove()} 
						style={{marginLeft:10, backgroundColor: this.isSelected() ? '#55A1F8' : '#D9D9D9'}} 
						onClick={() => this.remove()}/>
			    </div>)
	}

	isSelected = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			cal,
			tax,
			formInfo,
		} = hrmSalaryItemsSet, {
			itemType
		} = formInfo;

		let cbStatus = ['3', '11'].includes(itemType) ? tax.cbStatus : cal.cbStatus;

		return cbStatus.some(val => val == '1')
	}

	remove = () => {
		if (this.isSelected()) this.showConfirm();
	}

	showConfirm = () => {
		let _this = this;
		confirm({
			title: i18n.confirm.defaultTitle(),
			content: i18n.confirm.batchDeleteConfirm(),
			okText: i18n.button.ok(),
			cancelText: i18n.button.cancel(),
			onOk() {
				_this.onOk()
			},
			onCancel() {
				return false
			},
		});
	}

	onOk = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			changeTableEditStatus,
			formInfo,
		} = hrmSalaryItemsSet, {
			itemType
		} = formInfo;

		if (['3', '11'].includes(itemType)) { //税收
			changeTableEditStatus('tax');
		} else if (itemType == '4' || itemType == '9') { //计算
			changeTableEditStatus('count');
		}
	}

	render() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			formInfo
		} = hrmSalaryItemsSet, {
			loading,
			itemType
		} = formInfo;

		return (
			<div className='hrm-salary-items-set'>
				{loading  ? <div className='hrm-loading-center-small'>
								<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@t1jeud`} spinning={loading}></Spin>
						    </div>
						  
						  : <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@9xakgk`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
					          	<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@x463wm`} 
					          		title={i18n.label.basicInfo()} 
					          		children={<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@da5k4e`} />} 
					          		showGroup={true} 
					          	/>
	          					
	          					<div className='hrm-search-group-wrapper'>
		          					<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@bqc4pz`} 
		          						title={this.getGroupTwoTitle()} 
		          						children={this.getChildren()} 
		          						showGroup={true} 
		          						customComponent={itemType !== '1' ? this.getCustomComponent() : <span></span>}
		          					/>
	          					</div>

	          					{itemType == '1' && <div className='hrm-search-group-wrapper'>
		          										<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@dw8opc`} 
							          						title={i18n.label.benchmarkSet()} 
							          						children={<StandardSet ecId={`${this && this.props && this.props.ecId || ''}_StandardSet@1inqcd`} />} 
							          						showGroup={true} 
		          										/>
		          									</div>
	          					}
	          				</WeaRightMenu>
	          	}
	       	</div>
		)

	}
}