import React, {
	Component
} from 'react';

import {
	WeaFormItem,
	WeaSearchGroup,
	WeaHelpfulTip,
	WeaError
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx'
import {
	Row,
	Col
} from 'antd';

import {
	observer
} from 'mobx-react';
import CustomerFormItem from './CustomerFormItem';
import _ from 'lodash';
import {
	i18n
} from '../../public/i18n';


@observer
export default class OtherSettingForm extends Component {
	row = [{
		key: 'checkkey',
		className: 'oneColInput',
		children: []
	}, {
		key: 'checkUnJob',
		className: 'switch',
		children: [{
			key: 'helper',
			info: i18n.label.leaveStaffHelper
		}]
	}];


	renderItem = () => {
		const {
			group,
			store
		} = this.props;
		const {
			basicSettingForm: form,
		} = store;
		const items = [],
			children = [];

		const map = new Map();
		group.items.map(fields => {
			map.set(fields.domkey[0].toLowerCase(), fields);
		});

		this.row.map(r => {
			const children = [],
				keys = [],
				fields = map.get(r.key.toLowerCase());

			r.children.map(child => {
				if (child.key === 'helper') {
					children.push(
						<div className="multi">
							<div><WeaHelpfulTip title={<div className='lbl' dangerouslySetInnerHTML={{__html: child.info()}}></div>} /></div>
						</div>
					);
				} else {
					const fields = map.get(child.key.toLowerCase());
					if (!_.isEmpty(fields)) {
						children.push(
							<div className="multi">
								<div>{child.label}</div>
								<div className={child.className}>
									<WeaSwitch fieldConfig={fields} form={form} />
								</div>
								<div>{child.info && child.info()}</div>
							</div>
						);

						keys.push(fields);
					}
				}
			})

			items.push({
				com: (
					<CustomerFormItem fields={fields} form={form} keys={keys}>
                    	<div className="formItem">
                    		<div className={r.className}>
                				<WeaSwitch fieldConfig={fields} form={form} />
                    		</div>
                    		{children}
                    	</div>
					</CustomerFormItem>
				),
				colSpan: 1,
			});

		});

		return <WeaSearchGroup needTigger={true} title={group.title} col={1} showGroup={group.defaultshow} items={items} />
	}

	render() {
		const {
			store
		} = this.props;
		const {
			rDate,
		} = store;
		return this.renderItem();
	}
}