import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaUpload,
	WeaDialog,
	WeaFormItem,
	WeaNewScroll,
	WeaMoreButton,
} from 'ecCom'
import {
	Spin,
	Button,
	message
} from 'antd'
import {
	WeaSwitch
} from 'comsMobx'
import {
	i18n
} from '../../public/i18n';
import {addContentPath} from '../../util/index.js'

@inject('hrmSignatureManagement')
@observer
export default class Editor extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 700,
			height: 370,
		}
	}

	getButtons = () => {
		const {
			hrmSignatureManagement
		} = this.props, {
			editor,
			editorSave,
		} = hrmSignatureManagement, {
			loading,
			canAdd
		} = editor;

		let buttons = [
			canAdd && (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@liou6z`} type="primary" disabled={loading} onClick={() => editorSave()}>{i18n.button.save()}</Button>),
			(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@1mo2rz`} />)
		];

		return buttons;
	}

	getForm() {
		const {
			hrmSignatureManagement
		} = this.props, {
			editor,
			setWaitingListDatas,
			setRef,
		} = hrmSignatureManagement, {
			form,
			condition,
			selectedRadioValue,
			formType,
		} = editor, {
			isFormInit
		} = form;

		let arr = [];
		isFormInit && condition.map((c, i) => {
			c.items.map((field, index) => {
				let key = field.domkey[0];
				if (selectedRadioValue == '2' && key == 'isDefault') {
					return
				}
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9u5sgd@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@m1rgtw@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={event => this.handleChange(event)}/>
                        </WeaFormItem>)
			})
			arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@uuolbh@${i}`}
			             label={i18n.label.signatureImage()}
			             labelCol={{span: 6}}
			             wrapperCol={{span: 18}}
			         >
			           <div style={{float: 'left',marginTop: -10}}>
						   <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@2x413y@${i}`}
						   	   showClearAll={false}
			                   uploadUrl={ (formType=='new' ? '/api/hrm/signature/add':'/api/hrm/signature/edit')  }
			                   uploadParams={this.getUploadParams()}
			                   ref={ref => setRef(ref)}
			                   category='string'
			                   listType='img'
			                   limitType='jpg,gif,png'
			                   maxFilesNumber={1}
			                   autoUpload={false}
			                   fileDataName={'markPic'}
			                   onUploading={status => (status == 'uploaded') && this.handleActionsAfterUpLoaded()}
			                   getShowListDatas={(listT, listB)=> setWaitingListDatas(listB)}
			               />
			           </div>
			         </WeaFormItem>)
		})
		return <div className='wea-form-item-group'>{arr}</div>
	}

	handleActionsAfterUpLoaded = () => {
		const {
			hrmSignatureManagement
		} = this.props, {
			setEditorDialogVisible,
			getTableInfo,
		} = hrmSignatureManagement;

		message.success(i18n.message.saveSuccess());
		setEditorDialogVisible(false);
		getTableInfo();
	}

	getUploadParams = () => {
		const {
			hrmSignatureManagement
		} = this.props, {
			editor,
			table
		} = hrmSignatureManagement, {
			form,
			formType
		} = editor, {
			selectedRowsKeys
		} = table;

		const params = form.getFormParams();

		if (formType == 'new') {
			Object.assign(params, {
				opera: 'add'
			});
		} else {
			Object.assign(params, {
				opera: 'edit',
				markId: selectedRowsKeys
			});
		}

		return params;
	}


	handleChange = (event) => {
		const {
			hrmSignatureManagement
		} = this.props, {
			setSelectedRadioValue
		} = hrmSignatureManagement;

		if (Object.keys(event)[0] == 'sealType') {
			setSelectedRadioValue(event.sealType.value);
		}
	}

	render() {
		const {
			hrmSignatureManagement
		} = this.props, {
			editor,
			setEditorDialogVisible
		} = hrmSignatureManagement, {
			title,
			visible,
			loading,
			date,
			imgId,
			formType = '',
		} = editor, {
			width,
			height,
		} = this.state;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@dmp5sz`}
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                onCancel={() => setEditorDialogVisible(false)}
                buttons={this.getButtons()}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({height: h})}
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@uzhcv3`} spinning={loading}>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7mrf4v`} height={height}>
                        <div className='hrm-dialog-form'>
                            {this.getForm()}
                            {!loading && <p style={{color: '#333', paddingLeft: 147}}>{i18n.label['527638']()}</p>}
                            {!loading && formType == 'edit' && imgId && <div style={{width: '100%',marginTop: 20}}><img src={ addContentPath('/weaver/weaver.file.SignatureDownLoad?markId=' + imgId ) } style={{width: '100%'}}/></div>}
                        </div>
                    </WeaNewScroll>
                </Spin>
            </WeaDialog>
		)

	}
}