import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaFormItem,
	WeaCheckbox
} from 'ecCom';
import {
	Row,
	Col
} from 'antd';
import FormInfo from '../../../coms/FormInfo';
import Tabs from '../../../coms/Tabs';

@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, {
			tabConfig
		} = store;
		store.setActiveTab(tabConfig, key);
	}

	render = () => {
		const {
			store
		} = this.props;
		const {
			tabConfig,
			getTabIndex,
			formTarget,
			formItemRender,
			refreshForm,
			isSelectedAll,
			selectedAllFormFields,
			onSelectedChangeHandle,
			showError,
			refreshTab
		} = store;
		const {
			resourceForm,
			resourceFormFields
		} = formTarget;
		const tabProps = {
			tabConfig: tabConfig,
			tabChangeHandle: this.tabChangeHandle,
			activeTabInfo: {
				activeTabKey: tabConfig.activeTabKey,
				activeTabIndex: getTabIndex(tabConfig.tabs, tabConfig.activeTabKey)
			},
			store: store
		}

		return (
			<Tabs {...tabProps}>
				<div className='form'>
				<div className='selectAll'>
					<WeaCheckbox content='全选' value={isSelectedAll} onChange={(v) => selectedAllFormFields('resourceForm', v)}/>
				</div>
				{
					resourceForm != null 
					&& 
					<Row>
						<Col span={18} offset={3}>
							<FormInfo form={resourceForm} 
								formFields={resourceFormFields}
								itemRender={formItemRender}
								onSelectedChangeHandle={onSelectedChangeHandle} />
						</Col>
					</Row>
				}
			</div>
			</Tabs>
		)
	}
}