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';

import MainTable from './MainTable';

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

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

		clickTab('0', 'main');
		getFormInfo('search');
	}


	getTab = () => {
		const tabs = [{
			key: '0',
			title: i18n.label.all(),
		}, {
			key: '1',
			title: i18n.label.noOver(),
		}, {
			key: '2',
			title: i18n.label.over(),
		}]

		return tabs
	}

	getSearchPanelButtons = () => {
		const {
			hrmTrainActivity
		} = this.props, {
			mainTab,
			changeSearchPanelStatus,
		} = hrmTrainActivity, {
			form
		} = mainTab;

		const btn = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4lwwv7`} type="primary" onClick={() => this.handleSearch()}>{i18n.button.search()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qn6a0h`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8qxg9o`} onClick={() => changeSearchPanelStatus(false)}>{i18n.button.cancel()}</Button>),
		];

		return btn;
	}

	handleSearch = () => {
		const {
			hrmTrainActivity
		} = this.props, {
			changeSearchPanelStatus,
			getTableInfo,
			mainTab,
		} = hrmTrainActivity, {
			isPanelShow
		} = mainTab

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

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

		let arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2c6dcx@${index}`} span={10} offset={1}>
                              <div style={{marginTop: 20}}>
                                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jwdqa6@${index}`}
                                      label={`${field.label}`}
                                      labelCol={{span: (index % 2 == 0) ? 7 : 6}}
                                      wrapperCol={{span: (index % 2 == 0) ? 17 : 18}}>
                                          {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@uyukuv@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                                  </WeaFormItem>
                              </div>
                  	     </Col>)
			})
		})

		const com = (<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@c2rviw`} spinning={loading}>
						<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kt4c8b`}
							onKeyDown={(e) =>( e.keyCode == 13 && e.target.tagName === "INPUT")  && this.handleSearch()}
						>{arr}</Row>
					</Spin>)
		return com
	}

	handleSearchChange = (val) => {
		const {
			hrmTrainActivity
		} = this.props, {
			mainTab,
		} = hrmTrainActivity, {
			form
		} = mainTab;

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

	render() {
		const {
			hrmTrainActivity
		} = this.props, {
			clickTab,
			mainTab,
			changeSearchPanelStatus
		} = hrmTrainActivity, {
			curKey,
			isPanelShow,
			conditionCount,
			form,
		} = mainTab;

		return (
			<div style={{height: '100%'}}>
            	<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@7l8slk`}
            		datas={this.getTab()}
            		keyParam='key'
            		selectedKey={curKey}
            		onChange={key => clickTab(key,'main')}
            		searchType={['base','advanced']}
					showSearchAd={isPanelShow}
					hasMask={false}
					advanceHeight={Math.ceil(conditionCount / 2)*52+20}
					buttonsAd={this.getSearchPanelButtons()}
					searchsBaseValue={form.getFormParams().trainName}
					setShowSearchAd={  b => changeSearchPanelStatus(b)}
					hideSearchAd={ () => changeSearchPanelStatus(false)}
					searchsAd= {isPanelShow ? this.getPanelComponents():<div></div>}
					onSearch={() => this.handleSearch()}
					onSearchChange={val => this.handleSearchChange(val)}
         		/>
         		<MainTable ecId={`${this && this.props && this.props.ecId || ''}_MainTable@gors4l`} />
         	</div>
		)

	}
}