import { __decorate } from "tslib";
class ContextMenuService {
    /**
     * Creates an instance of ContextMenuService.
     * @memberof ContextMenuService
     */
    constructor() {
        document.addEventListener('click', () => {
            this.clearContainer();
        });
    }
    /**
     * 设置容器
     *
     * @param {Element} container
     * @memberof ContextMenuService
     */
    setContainer(container) {
        if (container) {
            this.clearContainer();
            this.container = container;
        }
        else {
            console.error('容器Dom节点不存在');
        }
    }
    /**
     * 清楚容器
     *
     * @memberof ContextMenuService
     */
    clearContainer() {
        if (this.container) {
            this.container.remove();
        }
    }
}
const service = new ContextMenuService();
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import './context-menu.less';
let ContextMenu = class ContextMenu extends Vue {
    /**
     * 显示右键菜单
     *
     * @param {*} x x轴坐标
     * @param {*} y y轴坐标
     */
    showContextMenu(x, y) {
        // 创建全屏覆盖容器
        const container = document.createElement('div');
        service.setContainer(container);
        container.oncontextmenu = () => {
            container.remove();
        };
        document.body.appendChild(container);
        // 创建Vue实例挂载
        const mount = document.createElement('div');
        container.appendChild(mount);
        let cssClass = "";
        if (y > window.innerHeight * 0.7) {
            cssClass = "context-menus-bottom";
        }
        this.renderContextMenu({
            top: y + 'px',
            left: x + 'px',
        }, mount, container, cssClass);
    }
    /**
     * 绘制菜单
     *
     * @param {*} position 菜单显示位置
     * @param {*} mount Vue实例挂载
     * @param {*} container 容器
     * @returns
     */
    renderContextMenu(position, mount, container, cssClass) {
        const self = this;
        new Vue({
            data() {
                return {
                    menus: self.menus,
                };
            },
            methods: {
                destroy($event) {
                    container.remove();
                    this.$destroy();
                    $event.stopPropagation();
                },
                onContextMenu($event) {
                    $event.preventDefault();
                },
                renderContent() {
                    let menus;
                    if (this.menus) {
                        menus = this.menus.map(item => {
                            let icon;
                            if (item.icon) {
                                icon = <img src={item.icon}/>;
                            }
                            if (item.iconcls) {
                                icon = <i class={item.iconcls}></i>;
                            }
                            return (<li class='context-menus-item' on-click={() => self.menuClick(item, self.data)}>
                                    {icon ? <div class='icon'>{icon}</div> : null}
                                    <div class='text'>{item.text}</div>
                                </li>);
                        });
                    }
                    return <ul class='context-menus'>{menus}</ul>;
                },
            },
            render() {
                let content;
                if (self.renderContent) {
                    content = self.renderContent(self.data);
                }
                if (self.$slots.content) {
                    content = self.$slots.content;
                }
                if (this.menus) {
                    content = this.renderContent();
                }
                return (<div class='context-menu-container context-menu' on-contextmenu={($event) => this.onContextMenu($event)} on-click={($event) => this.destroy($event)}>
                        <div class={`context-menu-content ${cssClass}`} style={position}>
                            {content}
                        </div>
                    </div>);
            },
        }).$mount(mount);
    }
    /**
     * 组件挂在完毕
     *
     * @memberof ContextMenu
     */
    mounted() {
        const contextRef = this.$refs.context;
        if (contextRef) {
            contextRef.oncontextmenu = (event) => {
                event.preventDefault();
                if (!this.isBlocked) {
                    this.showContextMenu(event.clientX, event.clientY);
                }
                this.$emit('showContext', event);
            };
        }
    }
    /**
     * 菜单点击
     *
     * @param {*} data
     * @memberof ContextMenu
     */
    menuClick(item, data) { }
    /**
     * 绘制内容
     *
     * @returns
     * @memberof ContextMenu
     */
    render() {
        return (<div class={'context-menu-component ' + (this.contextMenuClass || '')} style={this.contextMenuStyle} ref='context'>
                {this.$slots.default}
            </div>);
    }
};
__decorate([
    Prop()
], ContextMenu.prototype, "contextMenuClass", void 0);
__decorate([
    Prop()
], ContextMenu.prototype, "contextMenuStyle", void 0);
__decorate([
    Prop()
], ContextMenu.prototype, "data", void 0);
__decorate([
    Prop()
], ContextMenu.prototype, "renderContent", void 0);
__decorate([
    Prop()
], ContextMenu.prototype, "menus", void 0);
__decorate([
    Prop({ default: false })
], ContextMenu.prototype, "isBlocked", void 0);
__decorate([
    Emit('menu-click')
], ContextMenu.prototype, "menuClick", null);
ContextMenu = __decorate([
    Component({})
], ContextMenu);
export { ContextMenu };