import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaTop,
	WeaFormItem,
	WeaRightMenu,
	WeaDialogFooter,
	WeaTools,
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx'
import {AttachToNumberField} from '../../util/index.js'
const { ls } = WeaTools;

//浏览框内链接的单页，没有查看权限，但是分编辑和只读的权限。
@inject('hrmBrowseBoxLinkPage')
@observer
class Base extends React.Component {
	constructor(props) {
		super(props);
	}

	//WARNING! To be deprecated in React v17. Use componentDidMount instead.
	// componentWillMount() {
	// 	const data = ls.getStr('showHelp');
	// 	if(!data){
	// 		ls.set('showHelp',{
	// 			showHelp:'true'
	// 		});
	// 	}
	// }

	getFormElements = () => {
		const {
			formElement
		} = this.props.hrmBrowseBoxLinkPage, {
			condition,
			form,
			hasSaveBtn,
		} = formElement, {
			isFormInit
		} = form;

		const formElements = [];

		isFormInit && condition.map(c => {
			c.items.map((field, index) => {
				formElements.push(
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@90m9ky@${index}`}
                        label={`${field.label}`}
                        labelCol={{span: `${field.labelcol}`}}
                        error={form.getError(field)}
                        tipPosition="bottom"
                        wrapperCol={{span: `${field.fieldcol}`}}
                        underline={!hasSaveBtn}
                        style={{padding: '5px 0'}}
                   	>
                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@xkhv2t@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={cb => this.handleChange(cb)}/>
                    	{field.domkey[0] == 'jobtitlecode' && field.viewAttr != '1' && <AttachToNumberField field={field} form={form} isEdit={true}/>}
                    </WeaFormItem>)
			})
		})

		return <div style={{padding: '30px 20%'}}>{formElements}</div>;
	}

	handleChange = (cb) => {
		const {
			getCountryDetail
		} = this.props.hrmBrowseBoxLinkPage;

		const targetKey = Object.keys(cb)[0];

		if (targetKey === 'locationcity') getCountryDetail(cb[targetKey].value)
	}

	render() {
		const {
			top,
			formElement,
			buttons,
			dropMenuDatas,
			topStaticProps
		} = this.props.hrmBrowseBoxLinkPage, {
			title
		} = top, {
			loading
		} = formElement;

		const {type} = this.props;

		const content = (
			<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@t6969h`} datas={dropMenuDatas}>
				{this.getFormElements()}
			</WeaRightMenu>
		)
		if (type ==="0") {
			return (
				<React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@xtkz4z`}>
					{content}
					<WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@9fivsg`} buttons={buttons} moreBtn={{datas:[]}}/>
				</React.Fragment>
			)
		}else{
			return (
				<div>
					<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@1hntzf`}
					    title={ typeof title === 'string' ? title : title() }
				        loading={loading}
				        buttons={buttons}
	                    dropMenuDatas={dropMenuDatas}
				        {...topStaticProps}
						showDropIcon={dropMenuDatas.length > 0}
	     			>
	     				{content}
	     			</WeaTop>
				</div>
			)
		}

	}
}

export default Base