import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaFormItem,
	WeaCheckbox,
	WeaNewScroll,
	WeaSearchGroup
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import classnames from 'classnames';
import Tabs from '../../../coms/Tabs';
import { i18n } from '../../../public/i18n';

@observer
export default class AdjustResource extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			store,
			routeProps
		} = this.props;
		store.loadFormInfo(routeProps.params);
	}

	componentWillReceiveProps(nextProps) {}

	tabChangeHandle = (key) => {
		const {
			store
		} = this.props;
		store.setActiveTab(key);
	}

	renderGroupForm = () => {
		const {
			store
		} = this.props;
		const {
			formTarget,
			onSelectedChangeHandle,
			itemRender
		} = store;
		const {
			resourceForm: form,
			resourceFormFields: formFields
		} = formTarget;
		if(form == null)
		return []
		let formParams = form.getFormParams();
		let arr = [];
		formFields.map((c, i) => {
			let _arr = [];
			c.items.map((field, index) => {
				const showCheckbox = field.checkbox || false;
				const customerRender = itemRender != null ? itemRender[field.domkey[0]] : null;
				let label = field.label;
				if (showCheckbox)
					label = <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@yfdfom@${index}`} id={index} content={label} value={field.checkboxValue} onChange={(v) => {onSelectedChangeHandle && onSelectedChangeHandle(field, v)}}/>

				const itemProps = {
					ratio1to2: true,
					label,
					labelCol: {
						span: `${window.HrmEngineLabelCol}`
					},
					error: form.getError(field),
					tipPosition: 'bottom',
					wrapperCol: {
						span: `${window.HrmEngineWrapperCol}`
					}
				}
				let coms;
				if (customerRender == null) {
					coms = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ki2c3q@${index}`} fieldConfig={field} form={form}/>;
				} else {
					coms = customerRender(field, form, formParams);
				}
				coms != null && _arr.push({
					com: (
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9gs6yn@${index}`} {...itemProps}
                        >
                            {coms}
                        </WeaFormItem>
					),
					col: field.colSpan || 1
				})
			})
			if(_arr.length == 0){
				arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@v4jl55@${i}`} center={true} title={formFields.length < 2 ? null : c.title} showGroup={c.defaultshow} fontSize={14}>
					<div style={{ color: '#ccc', textAlign: 'center' }}><span className='anticon anticon-frown'></span><span>{i18n.message.dataNone()}</span></div>
				</WeaSearchGroup>)
			}else
				arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@fc6n4t@${i}`} center={true} title={formFields.length < 2 ? null : c.title} showGroup={true} items={_arr} fontSize={14}/>);
		})
		return arr;
	}

	render(){
		const {
			store
		} = this.props;
		const {
			tabConfig,
			getTabIndex,
			isSelectedAll,
			selectedAllFormFields,
			onSelectedChangeHandle,
			refreshData,
			refreshTab
		} = store;
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			store: store
		}
		const className = classnames({
			['form']: true,
			['tabPane']: true,
			['tabPane-include']: true//store.rootStore == null ? false : store.rootStore.containerInitFinished.detachable
		})

		return (
			<Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@51a1an`} {...tabProps}>
				<div className={className}>
					<div className='selectAll'>
						<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@e8q4we`} content={i18n.button.selectAll0()} value={isSelectedAll} onChange={(v) => selectedAllFormFields('resourceForm', v)}/>
					</div>
					<div className='tabPane tabPane-include'>
						<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@slk21k`} height={'100%'} ref={ref => store.setScrollRef(ref)}>
							{this.renderGroupForm()}
						</WeaNewScroll>
					</div>
				</div>
			</Tabs>
		)
	}
}