import React, { Component } from "react";
import { inject, observer } from 'mobx-react';
import { WeaBrowser, WeaFormItem, WeaLocaleProvider } from 'ecCom';
import { Authority, Top, MagicForm } from "../../public/valhalla/components/index.js";
import '../../style/adminAreaDisplaySetting.less';
const getLabel = WeaLocaleProvider.getLabel;

@inject("adminAreaDisplaySettingStore")
@observer
export default class AdminDecentralization extends Component {
	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
	}

    componentDidMount() {
       this.init();
    }

    init = () => {
    	const { adminAreaDisplaySettingStore: { init } } = this.props;
        init();
    }

    render() {
        const { adminAreaDisplaySettingStore: { authorityStore, topStore, formStore, browserConf ,setRef} } = this.props;
        return (
            <Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@otouce`} store={authorityStore}>
				<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@g6ml3t`} store={topStore}>
					<div className="adminAreaDisplaySetting">
						<div className="left">
							<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@663ctk`} store={formStore}/>
						</div>
						<div className="right">
							<div className="outter">
								<div className="title">{getLabel(221, '预览')}</div>
								{ browserConf.map((conf, i) => {
									const {type, name} = conf;
									return (
										<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@55qolm@${i}`}
											label={name}
											ratio1to2
										>
											<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@jgrmwr@${i}`} type={type} ref={ref => setRef(ref, type)}/>
										</WeaFormItem>
									)
								}) }
								<p>{getLabel(522416,"说明：显示设置保存后可通过上方浏览框预览选择后的显示效果。")}</p>
							</div>
						</div>
					</div>
				</Top>
            </Authority>
        );
    }
}