import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTab,
	WeaFormItem,
} from 'ecCom'
import {
	WeaSwitch,
} from 'comsMobx'
import {
	Row,
	Col,
	Spin,
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

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

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

		getFormInfo();
	}

	componentWillUnmount() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			resetSearchInfo
		} = hrmSalaryItemsSet;

		resetSearchInfo();
	}

	getSearchPanelButtons = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			searchPanel,
			changeSearchPanelStatus,
		} = hrmSalaryItemsSet, {
			form
		} = searchPanel;

		const btn = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2yei6u`} type="primary" onClick={() => this.handleSearch()}>{i18n.button.search()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@74dteu`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e7slk1`} onClick={() => changeSearchPanelStatus(false)}>{i18n.button.cancel()}</Button>),
		];
		return btn;
	}

	getPanelComponents = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			searchPanel,
		} = hrmSalaryItemsSet, {
			conditions,
			form,
			loading
		} = searchPanel, {
			isFormInit
		} = form;

		let arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ugmd2o@${index}`} span={10} offset={1}>
                              <div style={{marginTop: 20}}>
                                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@f6w6z3@${index}`}
                                      label={`${field.label}`}
                                      labelCol={{span: 8}}
                                      wrapperCol={{span: 16}}>
                                          {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@euskhu@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                                  </WeaFormItem>
                              </div>
                  	     </Col>)
			})
		})

		if (loading) {
			return (
				<div className='hrm-loading-center-small' style={{top:'30%'}}>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@q1craz`} spinning={loading}></Spin>
                </div>
			)
		} else {
			return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cwjp5f`}
				onKeyDown={(e) =>( e.keyCode == 13 && e.target.tagName === "INPUT")  && this.handleSearch()}
			>{arr}</Row>
		}
	}

	handleSearch = () => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			changeSearchPanelStatus,
			getTableInfo,
			searchPanel,
		} = hrmSalaryItemsSet, {
			isPanelShow
		} = searchPanel

		isPanelShow && changeSearchPanelStatus(false);
		getTableInfo();
	}

	linkage = (val) => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			searchPanel
		} = hrmSalaryItemsSet, {
			form
		} = searchPanel;

		form.updateFields({
			itemname: {
				value: val
			}
		});
	}

	render() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			searchPanel,
			changeSearchPanelStatus,
		} = hrmSalaryItemsSet, {
			form,
			isPanelShow,
			conditionCount,
		} = searchPanel;

		return (
			<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@553oq2`}
				searchType={['base','advanced']}
				showSearchAd={isPanelShow}
				hasMask={false}
				advanceHeight={Math.ceil(conditionCount / 2)*52+20}
				buttonsAd={this.getSearchPanelButtons()}
				searchsBaseValue={form.getFormParams().itemname}
				setShowSearchAd={  b => changeSearchPanelStatus(b)}
				hideSearchAd={ () => changeSearchPanelStatus(false)}
				searchsAd= {isPanelShow ? this.getPanelComponents():<div></div>}
				onSearch={() => this.handleSearch()}
				onSearchChange={val => this.linkage(val)}
			/>
		)

	}
}