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

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

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

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

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

	getTemplate = (datas) => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			openDialog,
			setPositionInfo,
		} = hrmSalaryItemsSet;

		if (datas.length > 0) {
			return {
				com: {
					scopetypecal: [{
						key: 'scopetypecal',
						label: '',
						type: 'INPUT',
						viewAttr: 1
					}],
					condition: [(<i className='icon-coms-Flow-setting' style={{fontSize: 16, cursor:'pointer',float:'left'}} onClick={() => {setPositionInfo({colIndex: 'condition'})} }/>)],
					formula: [(<i className='icon-coms-Flow-setting' style={{fontSize: 16, cursor:'pointer',float:'left'}} onClick={() =>  {setPositionInfo({colIndex: 'formula'})}}/>)]
				},
				scopetypecal: '',
			}
		} else {
			return ''
		}
	}

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

		const columns = [{
			title: i18n.label.scope(),
			dataIndex: 'scopetypecal',
			useRecord: true,
			com: [{
				type: 'CASCADER',
				key: 'scopetypecal',
				compDef: {
					type: 'SELECT',
					options: [{
						key: '0',
						selected: true,
						showname: i18n.label.all(),
					}, {
						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: {
						'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: '30%',
			colSpan: 1,
		}, {
			title: i18n.label.timeScope(),
			dataIndex: 'timescopecal',
			com: [{
				type: 'SELECT',
				key: 'timescopecal',
				options: [{
					key: '1',
					selected: false,
					showname: i18n.label._year(),
				}, {
					key: '2',
					selected: false,
					showname: i18n.label.halfYear(),
				}, {
					key: '3',
					selected: false,
					showname: i18n.label.quarter(),
				}, {
					key: '4',
					selected: false,
					showname: i18n.label.monthly(),
				}],
				width: 100,
				viewAttr: 3,
			}],
			width: '30%',
			colSpan: 1,
		}, {
			title: i18n.label.condition(),
			dataIndex: 'condition',
			key: 'condition',
			useRecord: true,
			com: [<i className='icon-coms-Flow-setting' style={{fontSize: 16, cursor:'pointer',float:'left'}} onClick={() => {setPositionInfo({colIndex: 'condition'})}}/>],
			width: '20%',
			colSpan: 1,
		}, {
			title: i18n.label.formula(),
			dataIndex: 'formula',
			key: 'formula',
			useRecord: true,
			com: [<i className='icon-coms-Flow-setting' style={{fontSize: 16, cursor:'pointer',float:'left'}} onClick={() => {setPositionInfo({colIndex: 'formula'})}}/>],
			width: '20%',
			colSpan: 1,
		}]

		return (
			<div className='hrm-salary-table hrm-formula-span'>
				<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@0i823z`}
					ref={com => exportRef(com, 'cal', index)}
					columns={columns}
					datas={datas}
					tableProps={{scroll: {y: 185}}}
					addFirstRow={true}
					addTemplate={this.getTemplate(datas)}
					bordered
					tableProps={{
						onRowClick : (record) => setPositionInfo({tableIndex: index, rowIndex:record.key || 0})
					}}
					title={<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@j5c4hr`} content={title} onChange={val => changeTableSelectedStatus(val, index, 'formula')}/>}
					onChange={datas => setFormulaDatas(datas, index)}
				/>
        	</div>
		)
	}

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

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

	}
}