import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Row, Col, Spin } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaErrorPage, WeaSearchGroup, WeaFormItem, WeaCheckbox } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import { PortalSetting } from 'weaPortal';
import PortalMenu from '../wea-portalmenu/';

import './style/';

class SettingButton extends React.Component {
    render() {
        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fcu65c`} label={this.props.label} labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
                <div className="wea-custom-setting-btn" onClick={this.props.onSetting}>
                    <i className="icon-coms-Flow-setting" />
                </div>
            </WeaFormItem>
        );
    }
}

class SwitchButton extends React.Component {
    render() {
        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@clcuh5`} label={this.props.label} labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@3zlrjr`} display="switch" value={this.props.value} onChange={value => this.props.onSetState(value)} />
            </WeaFormItem>
        );
    }
}

@inject('weaportal_customsetting_store')
@observer
class WeaCustomSetting extends React.Component {
    constructor(props) {
        super(props);
        this.onPortalSetting = this.onPortalSetting.bind(this);
    }

    componentWillMount() {
        const { weaportal_customsetting_store } = this.props;
        weaportal_customsetting_store.getPortalData();
    }

    onPortalSetting(params) {
        this.refs.portalsetting.handleOnSetting({
            from: 'addElement',
            viewtype: 'edit',
            isSetting: true,
            ...params,
        });
    }

    render() {
        const { weaportal_customsetting_store } = this.props;
        const { state, onSetState } = weaportal_customsetting_store;
        const { loading, isRemeberTab, isOpenSortTopByUsage, isSortTopByUsage, quickSearchShowMenu, hplist } = state;

        return (
            <div>
                <PortalSetting ecId={`${this && this.props && this.props.ecId || ''}_PortalSetting@3mt0di`} ref="portalsetting" />
                <PortalMenu ecId={`${this && this.props && this.props.ecId || ''}_PortalMenu@3acdej`} ref="portalmenu" />
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ygz3re`} spinning={loading}>
                    <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@bwjnwx`} title={getLabel(17721, '菜单自定义')} showGroup={true} center={true} size="large">
                        <SettingButton ecId={`${this && this.props && this.props.ecId || ''}_SettingButton@r6r7gc`} label={getLabel(33676, '后端菜单')} onSetting={() => this.refs.portalmenu.onShow({ type: 'top' })} />
                        <SettingButton ecId={`${this && this.props && this.props.ecId || ''}_SettingButton@cjc2qu`} label={getLabel(33675, '前端菜单')} onSetting={() => this.refs.portalmenu.onShow({ type: 'left' })} />
                        {isOpenSortTopByUsage == '1' ? <SwitchButton ecId={`${this && this.props && this.props.ecId || ''}_SwitchButton@j7dmtk`} label={getLabel(385974, '前端菜单按使用频率自动排序')} value={isSortTopByUsage} onSetState={value => onSetState({ isSortTopByUsage: value })} /> : ''}
                        <SwitchButton ecId={`${this && this.props && this.props.ecId || ''}_SwitchButton@bvy9dh`} label={getLabel(385975, '快捷搜索栏显示搜索推荐')} value={quickSearchShowMenu} onSetState={value => onSetState({ quickSearchShowMenu: value })} />
                    </WeaSearchGroup>
                    <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@890kui`} title={getLabel(33434, '门户自定义')} showGroup={true} center={true} size="large">
                        {hplist.map(item => <SettingButton ecId={`${this && this.props && this.props.ecId || ''}_SettingButton@gj7x43@${item.hpid}`} label={item.title} onSetting={this.onPortalSetting.bind(this, item)} />)}
                    </WeaSearchGroup>
                    <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@569v3y`} title={getLabel(126226, '元素设置')} showGroup={true} center={true} size="large">
                        <SwitchButton ecId={`${this && this.props && this.props.ecId || ''}_SwitchButton@zj3jdr`} label={getLabel(126225, '记录最后一次选中标签')} value={isRemeberTab} onSetState={value => onSetState({ isRemeberTab: value })} />
                    </WeaSearchGroup>
                </Spin>
            </div>
        );
    }
}

export default WeaCustomSetting;