//gai
import React from 'react';
import {
	i18n
} from '../../public/i18n';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	Button
} from 'antd';
import {
	WeaTop,
	WeaFormItem,
	WeaRightMenu,
	WeaAlertPage,
} from 'ecCom';
import { WeaSwitch } from 'comsMobx'

@inject('elseSettingStore')
@observer
export default class ElseSettiing extends React.Component {
	constructor(props) {
		super(props)
		const { elseSettingStore: store } = this.props
		const { save } = store;
		this.state = {
			btns: [
				<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3ctuaf@elseSettingSave`} type="primary" onClick={save}>{`${i18n.button.save()}`}</Button>,
			],
			dropMenuDatas: [
				{
					key: "1",
					disabled: false,
					icon: <i className="icon-coms-Save-as" />,
					content: `${i18n.button.save()}`,
					onClick: save
				},
			]
		}
	}

	componentDidMount () {
		const { elseSettingStore: store } = this.props
		const { init } = store;
		init()
	}

	getForm = () => {
		const { elseSettingStore: store } = this.props;
		const { Form, FormField } = store;
		const { isFormInit } = Form;
		let arr = [];
		isFormInit && FormField.map((item => {
			item.items.map((field) => {
				arr.push(
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@r98dmq@${field.domkey[0]}`}
						label={`${field.label}`}
						labelCol={{ span: `${field.labelcol}` }}
						ratio1to2
						tipPosition="bottom"
						wrapperCol={{ span: `${field.fieldcol}` }}
						style={{ marginTop: '10px' }}
					>
						<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@997962@${field.domkey[0]}`}
							fieldConfig={field}
							form={Form}
						/>
					</WeaFormItem>
				)
			})
		}))
		return arr;
	}

	render () {
		const { containerInitFinished } = this.props.elseSettingStore;
		return (
			<div style={{ height: '100%' }}>
				{
					containerInitFinished.init && containerInitFinished.authorized ?
						<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@n2l0wz`}
							datas={this.state.dropMenuDatas}
							scrollNum={5}
							isScroll={true}
						>
							<div style={{ margin: '0', padding: '0' }}>
								<WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bzc216`}
									title={i18n.module.elseSetting()}
									icon={<i className='icon-coms-hrm' />}
									iconBgcolor='#217346'
									buttons={this.state.btns}
									showDropIcon={true}
									dropMenuDatas={this.state.dropMenuDatas}
								/>
								<div style={{ width: 800, margin: '50px auto ' }} >
									{this.getForm()}
								</div>
							</div>
						</WeaRightMenu> :
						<div style={{ height: '100%' }}>
							<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@r1gjz0`}
								iconSize='100'
							>
								<div style={{ color: '#000' }}>
									{i18n.message.authFailed()}
								</div>
							</WeaAlertPage>
						</div>
				}
			</div>
		)
	}
}