import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaCheckbox,
	WeaTableEdit,
	WeaHelpfulTip,
	WeaLocaleProvider,
} from 'ecCom'
import {
	i18n
} from '../../public/i18n';
import {
	sectionToChinese
} from '../../public/pulic-func';
const getLabel = WeaLocaleProvider.getLabel;

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

		this.columns = [{
			title: i18n.label.scope(),
			dataIndex: 'scopetype',
			useRecord: true,
			com: [{
				type: 'CASCADER',
				key: 'scopetype',
				compDef: {
					type: 'SELECT',
					options: [{
						key: '0',
						selected: true,
						showname: i18n.label.all()
					}, {
						key: '1',
						selected: false,
						showname: i18n.label.city()
					}, {
						key: '2',
						selected: false,
						showname: i18n.label.subcompany()
					}, {
						key: '3',
						selected: false,
						showname: i18n.label.department()
					}, {
						key: '4',
						selected: false,
						showname: i18n.label.humanResource()
					}],
					parent: {
						type: 'div',
						style: {
							width: 100,
							display: 'inline-block',
							float: 'left'
						}
					},
					subChildren: {
						'1': {
							type: 'BROWSER',
							propType: '58',
							viewAttr: 3,
							maxBrowerHeight: 30,
							inputStyle: {
								width: 160
							},
							icon: 'icon-coms-hrm',
							iconBgcolor: '#217346',
							title: i18n.label.city(),
						},
						'2': {
							type: 'BROWSER',
							propType: '170',
							viewAttr: 3,
							isSingle: false,
							maxBrowerHeight: 30,
							inputStyle: {
								width: 160
							},
							tabs: [{
								isSearch: false,
								key: "2",
								name: i18n.label.organization(),
								selected: false,
								showOrder: 0
							}, {
								dataParams: {
									list: "1"
								},
								isSearch: true,
								key: "1",
								name: i18n.label.byList(),
								selected: false,
								showOrder: 0
							}],
							dataParams: {
								rightStr: 'HrmResourceComponentEdit:Edit'
							},
							icon: 'icon-coms-hrm',
							iconBgcolor: '#217346',
							title: i18n.label.decentSubcompany(),
						},
						'3': {
							type: 'BROWSER',
							propType: '168',
							viewAttr: 3,
							isSingle: false,
							maxBrowerHeight: 30,
							inputStyle: {
								width: 160
							},
							tabs: [{
								isSearch: false,
								key: "2",
								name: i18n.label.organization(),
								selected: false,
								showOrder: 0
							}, {
								dataParams: {
									list: "1"
								},
								isSearch: true,
								key: "1",
								name: i18n.label.byList(),
								selected: false,
								showOrder: 0
							}],
							dataParams: {
								rightStr: 'HrmResourceComponentEdit:Edit'
							},
							icon: 'icon-coms-hrm',
							iconBgcolor: '#217346',
							title: i18n.label.decentDepartment(),
						},
						'4': {
							type: 'BROWSER',
							propType: '17',
							viewAttr: 3,
							isSingle: false,
							maxBrowerHeight: 30,
							inputStyle: {
								width: 160
							},
							dataParams: {
								rightStr: 'HrmResourceComponentEdit:Edit'
							},
							icon: 'icon-coms-hrm',
							iconBgcolor: '#217346',
							title: i18n.label.multiResouce(),
						}
					}
				}
			}],
			width: 300,
			colSpan: 1,
		}, {
			title: (<span>
				<span style={{marginRight:5}}>{i18n.label.taxBase()}</span>
				<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@33q99f}`}
        			  width =  {196} 
        			  title={getLabel(522299,'如基准项目在计算时已扣减了基数，这里请填写成0')}
        			/>
        		</span>),
			dataIndex: 'taxbenchmark',
			useRecord: true,
			com: [{
				type: 'INPUTNUMBER',
				key: 'taxbenchmark',
				width: 120,
			}],
			width: 100,
			colSpan: 1,
		}, {
			title: i18n.label.series(),
			dataIndex: 'ranknum',
			com: [{
				type: 'INPUTNUMBER',
				key: 'ranknum',
				width: 120,
			}],
			width: 100,
			colSpan: 1,
		}, {
			title: i18n.label.taxLevelFrom(),
			dataIndex: 'ranklow',
			com: [{
				type: 'INPUTNUMBER',
				key: 'ranklow',
				width: 120,
			}],
			width: 100,
			colSpan: 1,
		}, {
			title: i18n.label.taxLevelTo(),
			dataIndex: 'rankhigh',
			com: [{
				type: 'INPUTNUMBER',
				key: 'rankhigh',
				width: 120,
			}],
			width: 100,
			colSpan: 1,
		}, {
			title: i18n.label.taxRate(),
			dataIndex: 'taxrate',
			com: [{
				type: 'INPUTNUMBER',
				key: 'taxrate',
				width: 120,
			}],
			width: 100,
			colSpan: 1,
		}, {
			title: i18n.label.quickCalDeduction(),
			dataIndex: 'subtractnum',
			com: [{
				type: 'INPUTNUMBER',
				key: 'subtractnum',
				width: 120,
			}],
			width: 100,
			colSpan: 1,
		}];

		this.template = {
			com: {
				scopetype: [{
					key: 'scopetype',
					label: '',
					type: 'INPUT',
					viewAttr: 1
				}],
				taxbenchmark: [{
					key: 'taxbenchmark',
					label: '',
					type: 'INPUT',
					viewAttr: 1
				}],
			},
			scopetype: '',
			taxbenchmark: '',
		}
	}

	componentDidMount() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			mainTable,
			addTable,
		} = hrmSalaryItemsSet, {
			selectedRowKey
		} = mainTable;

		!selectedRowKey && addTable('tax');
	}

	componentWillUnmount() {
		this.props.hrmSalaryItemsSet.refreshTableEdit('tax');
	}

	getCom = (index, datas, title) => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			exportRef,
			setTaxRateDatas,
			changeTableSelectedStatus,
		} = hrmSalaryItemsSet;

		return (
			<div className='hrm-salary-table hrm-formula-span'>
				<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@4zbgb9`}
					columns={this.columns}
					datas={toJS(datas)}
					tableProps={{scroll: {x:true,y: 185}}}
					addFirstRow={true}
					addTemplate={this.template}
					bordered
					title={<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ukt32e`} content={title} onChange={val => changeTableSelectedStatus(val, index, 'tax')}/>}
					onChange={datas => setTaxRateDatas(datas, index)}
				/>
        	</div>
		)
	}

	render() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			tax
		} = hrmSalaryItemsSet, {
			tableEditArray,
			date,
		} = tax;

		return (
			<div className='hrm-salary-tables'>
				{tableEditArray.filter(val => val =='0').map( (item, index) => {
					return this.getCom(index,tax[`datas${index}`],`${i18n.button.setting()}${index + 1}`)
				})}
			</div>
		)

	}
}