import { observer } from "mobx-react";
import { observable, action, computed } from "mobx";
import { Icon } from 'antd';
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export const RightMenu = observer(({ store, onToggleChildren,menus }) => {
    const { left, top, visible, hasChild, childVisible, isRoot } = store;
    // console.log(data);
    
    return (
        <div className="wea-right-menu wea-right-menu-show" style={{ display: visible ? 'block' : 'none', position: 'absolute', top, left }}>
            <div className="wea-right-menu-icon-background"></div>
            <ul className="ant-menu ant-menu-vertical  ant-menu-light ant-menu-root">
                {hasChild && <li className="ant-menu-item text-elli" onClick={onToggleChildren}>
                    <li unselectable="on" class="wea-right-menu-item">
                        <span className="wea-right-menu-icon" >
                            {childVisible ? <i className="anticon anticon-folder" style={{ marginLeft: "8px" }}></i>
                                : <i className="anticon anticon-folder-open" style={{ marginLeft: "8px" }}></i>}
                        </span>
                        <span className="">{childVisible ? getLabel('26985','收起')  : getLabel('15315','展开') }</span>
                    </li>
                        
                </li>}
                {/* {onBatchReject && hasChild && data && data.current && data.status != 2 && data.arrival && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onBatchReject.bind(store, data)}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-Reset"></i></span>
                    <span className="">{getLabel('506005','批量退回')}</span>
                </li>}
                {onSetting && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onSettingHandle}>
                    <span className="wea-right-menu-icon"><i className="icon-edc-common-setting"></i></span>
                    <span className="">{getLabel('502283', '设置')}</span>
                </li>}
                {onAddChild && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onAddChildHandle}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-New-Flow"></i></span>
                    <span className="">{getLabel('502284', '添加下级')}</span>
                </li>}
                {onDeleteChild && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onDeleteChild}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-delete"></i></span>
                    <span className="">{getLabel('502285', '删除下级')}</span>
                </li>}
                {!isRoot && onDelete && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onDelete}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-delete"></i></span>
                    <span className="">{getLabel('502286', '删除')}</span>
                </li>}
                {onReject && data.status == 2 && data.parent && data.parent.current && data.parent.iscurrentnode == 1
                     && data.parent.status != 2 && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onReject.bind(store, data)}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-Reset"></i></span>
                    <span className="">{getLabel('502287', '退回')}</span> 
                </li>}
                {onSynchro &&  <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onSynchroHandle}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-Synchro"></i></span>
                    <span className="">{getLabel('506099', '同步')}</span>
                </li>} */}
                {
                    menus.length > 0 && menus.map((obj)=>{
                        return <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={(e)=>{obj.action(e)}}>
                             <li unselectable="on" class="wea-right-menu-item">
                                <span className="wea-right-menu-icon"><i className={obj.icon}></i></span>
                                <span className="">{obj.name}</span>
                            </li>
                        </li>
                    })
                }
            </ul>
        </div>
    )
});

export class RightMenuStore {
    @observable visible = false;
    @observable left = 0;
    @observable top = 0;
    @observable isRoot = false;
    @observable hasChild = false;
    @observable childVisible = false;
    @action show = (left, top, isRoot, hasChild, childVisible) => {
        this.visible = true;
        this.left = left;
        this.top = top;
        this.isRoot = isRoot;
        this.hasChild = hasChild;
        this.childVisible = childVisible;
    }
    @action hide = () => {
        this.visible = false;
    }
    @action position = (left, top) => {
        this.left = left;
        this.top = top;
    }
}