import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    WeaTop,
    WeaTab,
    WeaFormItem,
    WeaRightMenu,
} from 'ecCom'
import {
    Row,
    Col,
    Spin,
    Modal,
    Button,
    message,
    Switch
} from 'antd'
import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx'
import {
    i18n
} from '../../public/i18n';

import '../../style/common.less';

import NewAndEditDialog from '../NewAndEditDialog';
import { renderNoright } from '../../util';


const toJS = mobx.toJS;
const confirm = Modal.confirm;


@inject('group')
@observer
export default class Group extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
    }

    componentDidMount() {
        this.init();
    }

    componentWillReceiveProps(nextProps) {
        const {
            group
        } = this.props;

        if (this.props.location.key !== nextProps.location.key) {
            this.init();
        }
    }

    init() {
        const {
            group
        } = this.props;
        group.getGroupForm();
        group.getHasRight();
    }

    getTopMenuBtns() {
        const {
            group
        } = this.props;
        const {
            topMenu,
            tableStore
        } = group;

        let btns = [];
        topMenu.map((item, i) => {
            btns.push(<Button type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
        });
        return btns;
    }

    getDropMenuDatas() {
        const {
            group
        } = this.props;
        const {
            rightMenu
        } = group;

        let menus = [];
        toJS(rightMenu).map((item, index) => {
            let obj = {
                key: item.menuFun,
                icon: <i className={`${item.menuIcon}`} />,
                content: item.menuName,
            }
            if (item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
                obj.disabled = true;
            }
            menus.push(obj);
        })
        return menus;
    }



    doEdit(id) {
        const {
            group
        } = this.props;

        group.setNeDialogTitle(i18n.label.editGroup());
        group.setVisible(true);
        group.getForm();
    }


    handleSave() {
        const {
            group
        } = this.props;
        group.edit();
    }

    handleMenuClick(key) {
        this[key] && this[key]();
    }

    handleClick(item) {
        this[item.menuFun] && this[item.menuFun]();
    }


    changeData(key) {
        const {
            group
        } = this.props;
        group.changeData(key);
    }

    getFormField() {
        const {
            group
        } = this.props;
        const { form1, groupCondition } = group;

        const { isFormInit } = form1;
        const formParams = form1.getFormParams();
        let items = [];
        isFormInit && toJS(groupCondition).map(c => {
            c.items.map((fields, index) => {
                items.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@zzk1d0@${index}`}
                    underline={true}
                    label={`${fields.label}`}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}>
                    <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p0qhmz@${index}`} fieldConfig={fields} form={form1} formParams={formParams} />
                </WeaFormItem>);
            });
        });
        return <div className="wea-form-item-group">{items}</div>;
    }



    render() {

        const {
            group
        } = this.props;
        const {
            nEdialogTitle, visible, condition, form, dialogLoading, isEdit, topTab, selectedKey,date,hasRight
        } = group;

        if (hasRight === false) {
            return renderNoright();
        }

        return (
            hasRight && <div ref='page' style={{ height: '100%' }}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
                    datas={this.getDropMenuDatas()}
                    onClick={key => this.handleMenuClick(key)}
                >
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
                        title={i18n.label.groupInfo()}
                        icon={<i className='icon-coms-hrm' />}
                        iconBgcolor='#217346'
                        loading={true}
                        buttons={this.getTopMenuBtns()}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                        onDropMenuClick={(e) => this.handleMenuClick(e)}
                    >
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9c3zts`}
                            datas={topTab}
                            keyParam="viewCondition" //主键
                            selectedKey={selectedKey}
                            onChange={this.changeData.bind(this)}
                        />
                        <div className='organization-group'>
                            {this.getFormField()}
                        </div>
                    </WeaTop>
                </WeaRightMenu>
                <NewAndEditDialog ecId={`${this && this.props && this.props.ecId || ''}_NewAndEditDialog@q4rrwm`}
                    title={nEdialogTitle}
                    visible={visible}
                    condition={toJS(condition)}
                    form={form}
                    isFormInit={form.isFormInit}
                    loading={dialogLoading}
                    isEdit={isEdit}
                    height={250}
                    conditionLen={3}
                    save={() => this.handleSave()}
                    onCancel={() => group.setVisible(false)}
                />
            </div>
        )
    }
}