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 BenchmarkSet from './BenchmarkSet';
import TaxRateSet from './TaxRateSet';

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

	componentDidMount() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			getFormInfo,
			addTableEdit,
		} = hrmSalaryItemsSet;

		getFormInfo();
		addTableEdit();
	}

	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) => {
		const {
			hrmSalaryItemsSet,
		} = this.props, {
			save,
		} = hrmSalaryItemsSet;

		key == '0' && save();
	}

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

		let title;
		if (itemType == '1') title = i18n.label.levelSet();
		if (itemType == '3') title = i18n.label.taxRateSet();
		if (itemType == '4' || itemType == '9') title = i18n.label.formulaSet();

		return title;
	}

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

		if (itemType == '1') { //工资
			return <LevelSet />
		} else if (itemType == '3') { //税收
			return <TaxRateSet />
		} else if (itemType == '4') { //计算
			return <FormulaSet />
		} else { //福利计算
			return (
				<div>
					{this.percentCom()}
					<FormulaSet />
				</div>
			)
		}
	}

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

		return (
			<div style={{margin: '20px 25%'}}>
				<WeaFormItem
		            label={i18n.label.personalPercent()}
		            labelCol={{span: 6}}
		            wrapperCol={{span: 18}}
          		>
            		<WeaInputNumber 
            			value={personalPercent}
            			precision = {2}
            			onChange = {val => setWelfareCalPercent(val,'personal')}
            		/> 
            		<span style={{position: 'absolute',top: 6,right: -20}}>{'%'}</span>
          		</WeaFormItem>
          		<WeaFormItem
		            label={i18n.label.companyPercent()}
		            labelCol={{span: 6}}
		            wrapperCol={{span: 18}}
          		>
            		<WeaInputNumber 
            			value={companyPercent}
            			precision = {2}
            			onChange = {val => setWelfareCalPercent(val,'company')}
            		/>
            		<span style={{position: 'absolute',top: 6,right: -20}}>{'%'}</span>
          		</WeaFormItem>
			</div>
		)
	}

	getAddFunc = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			addTableEdit, //新增公式设置
			addTaxRate, //新增税率设置
			formInfo,
		} = hrmSalaryItemsSet, {
			itemType
		} = formInfo;

		if (itemType == '3') { //税收
			addTaxRate();
		} else if (itemType == '4') { //计算
			addTableEdit();
		}
	}

	getCustomComponent = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			deleteTableEdit,
		} = hrmSalaryItemsSet;

		let len = 0;

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

	isSelected = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			tableEdit
		} = hrmSalaryItemsSet;

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

	deleteTableEdit = () => {
		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 (itemType == '3') { //税收
			changeTableEditStatus('tax');
		} else if (itemType == '4') { //计算
			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 spinning={loading}></Spin>
						    </div>
						  : <WeaRightMenu datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
					          	<WeaSearchGroup title={i18n.label.basicInfo()} children={<FormInfo />} showGroup={true} />
	          					<div className='hrm-level-set-tableedit'>
		          					<WeaSearchGroup 
		          						title={this.getGroupTwoTitle()} 
		          						children={this.getChildren()} 
		          						showGroup={true} 
		          						customComponent={itemType !== '1' ? this.getCustomComponent() : <span></span>}
		          					/>
	          					</div>
	          					{itemType == '1' && <div className='hrm-level-set-tableedit'>
		          										<WeaSearchGroup 
							          						title={i18n.label.benchmarkSet()} 
							          						children={<BenchmarkSet />} 
							          						showGroup={true} 
		          										/>
		          									</div>
	          					}
	          				</WeaRightMenu>
	          	}
	       	</div>
		)

	}
}