import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	toJS
} from 'mobx';
import {
	WeaFormItem,
	WeaLocaleProvider
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import classnames from 'classnames';
import {
	i18n
} from '../../public/i18n';
import {
	has,
	indexOf,
	remove,
	find
}
from 'lodash';
import {
	getColumIndex,
	validDBKeys
} from '../../util/index';
import {addContentPath} from '../../util/index.js'

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

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	// this.getPinYin({labelName: WeaLocaleProvider.formatMultiLang(datas[0].fieldlabel)}).then(data => {
	// 			const {pinyin} = data;
	// 			oldRecord.fieldname = pinyin;
	// 			const arr = filter(this.tableEditConfig.fieldDef.datas, {fieldname: pinyin});
	// 			if(arr.length > 1 && pinyin != ''){
	// 				oldRecord.fieldname = pinyin + '1';
	// 			}
	// 			this.refreshFeildDef = new Date().getTime();
	// 		});

	renderForm = () => {
		const {
			store,
			record
		} = this.props;
		const {getPinYin} = store;
		const {
			form,
			fields
		} = record;
		const itemProps = {
			labelCol: {
				span: 0
			},
			tipPosition: 'bottom',
			wrapperCol: {
				span: 24
			}
		}
		const formParams = form.getFormParams();
		let children = [];
		fields.map(f => {
			f.items.map((i, index) => {
				let hasVal = false,
					fieldName = i.domkey[0],
					show = true,
					props = {};
				if (has(formParams, fieldName) && formParams[fieldName] != '') {
					hasVal = true;
				}
				const classes = classnames({
					['require']: !hasVal,
				});
				if (fieldName === 'fieldname') {
					Object.assign(i.otherParams, {
						length: 25,
						regExp: /^[a-zA-Z][a-zA-Z0-9]*$/,
						filter: (val) => {
							const {
								isValid,
								value
							} = validDBKeys(val);
							return value;
						}
					})
				}
				switch (fieldName) {
					case 'labelname':
						props.onChange = (v) => {
							const items = toJS(f.items);
							const fieldnameField = find(items, {domkey: ['fieldname']});
							if(fieldnameField != null && fieldnameField.otherParams && fieldnameField.otherParams.disabled != true){
								const labelname = v.labelname.value;
								getPinYin({labelName: WeaLocaleProvider.formatMultiLang(labelname)}).then(data => {
									const {pinyin} = data;
									form.updateFields({
										fieldname: {
											value: pinyin
										}
									})
								});
							}
						};
						break;
					case 'fieldname':
						Object.assign(i.otherParams, {
							length: 25,
							regExp: /^[a-zA-Z][a-zA-Z0-9]*$/,
							filter: (val) => {
								const {
									isValid,
									value
								} = validDBKeys(val);
								return value;
							}
						});
						break;
					case 'cusb':
						if (formParams.type === '161') {
							show = true;
						} else {
							show = false;
						}
						break;
					case 'cusbmulti':
						if (formParams.type === '162') {
							show = true;
						} else {
							show = false;
						}
						break;
				}
				show && children.push(
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@y8kl92@${index}`} className={classes} {...itemProps} error={form.getError(i)}>
					{
						this.getSwitch(i, form, props)
					}
					</WeaFormItem>
				)
			})
		})
		return children;
	}

	getSwitch = (field, form, props) => <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@t1m02x`} fieldConfig={field} form={form} {...props}/>

	renderCreateField = (condition) => {
		const {
			store
		} = this.props;
		const {
			addField
		} = store;
		const conditionTips = i18n.label.addConditionField(),
			valTips = i18n.label.addValField(),
			imgSrc = `/hrm/hrm_e9/image/matrix/${condition ? 'addCondition' : 'addVal'}.png`;
		return (
			<div className='tips'>
				<img src={addContentPath(imgSrc)} onClick={() => addField(condition)} />
				<div className='tipContent'>
					{condition ? conditionTips : valTips}
				</div>
			</div>
		)

	}

	render() {
		const {
			store,
			record
		} = this.props;
		const {
			removeField
		} = store;
		const {
			index,
			colIndex,
			form,
			fields,
			data
		} = record;
		const coms = form != null ? this.renderForm() : this.renderCreateField(data.condition);

		const headerClasses = classnames({
			['header']: true,
			['createHeader']: form == null,
		});
		const contentClasses = classnames({
			['conditionContent']: data.type === 0,
			['valContent']: data.type === 1
		});

		return (
			<div className='fieldItem'>
				<div className={headerClasses}>{colIndex}</div>
				<div className={contentClasses}>
					{
						coms
					}
					{
						data.editable === '1'
						&&
						<div className='remove' onClick={() => removeField(data.type === 0, colIndex)}>
							<img src={addContentPath('/hrm/hrm_e9/image/matrix/removeMatrixField.png')}/>
						</div>
					}
				</div>
			</div>
		)
	}
}