/**
 * 右键组件
 * <pro-contextmenu disabled divided>
 *     <div slot="reference" text="鼠标右键" @handler="doHandle"/>
 *     <pro-contextmenu-item command="?" icon="" text="新建" @handler="?" divided disabled/>
 *     <pro-contextmenu-item command="?" icon="" @handler="?">删除</pro-contextmenu-item>
 *     <pro-contextmenu-item command="?" icon="" text="删除" @handler="?"/>
 *     <pro-contextmenu-item command="?" icon="" text="删除" @handler="?"/>
 * </pro-contextmenu>
 * @author xiufu.wang
 */
import Popper from 'mars-pro/src/utils/vue-popper';
import { on, off } from 'mars-pro/src/utils/dom';
import { addClass, removeClass } from 'mars-pro/src/utils/dom';
import { generateId } from 'mars-pro/src/utils/util';
import { PopupManager } from 'mars-pro/src/utils/popup';
import { stopAndPreventDomEvent } from 'mars-pro/src/pro/util';

export default {
    name: 'ProContextmenu',
    componentName: 'ProContextmenu',
    inheritAttrs: false,
    props: {
        //禁用右键菜单
        disabled: Boolean,
        //全局分割线
        divided: Boolean,
        //大小
        size: String
    },
    data() {
        return {
            showPopper: false
        }
    },
    computed: {
        contextMenuSize() {
            return this.size || (this.$ELEMENT || {}).size;
        }
    },
    created() {
        this._zIndex = PopupManager.nextZIndex()
    },
    methods: {
        openContextmenu(event) {
            event.preventDefault();
            event.stopPropagation()
            if (this.disabled) {
                this.showPopper = false
                return
            }
            const popper = this.$refs.popper;
            //每次打开重新计算Zindex
            this._zIndex = PopupManager.nextZIndex()
            this.showPopper = true
            this.$nextTick(() => {
                popper.style.visibility = 'hidden'
                let px, py
                const cx = event.clientX
                const cy = event.clientY
                const prect = popper.getBoundingClientRect()

                px = (cx + prect.width > (window.innerWidth + 10)) ? (cx - prect.width) : cx
                py = cy + prect.height > (window.innerHeight + 10) ? (cy - prect.height) : cy
                popper.style.visibility = null
                popper.style.top = py + 'px'
                popper.style.left = px + 'px'
            })
        },
        hideContextMenu(event) {
            this.showPopper = false
        }
    },
    render() {
        const _popperDatas = {
            'class': {
                'pro-contextmenu--popover': true,
                ...(this.contextMenuSize ? {['el-dropdown-menu--' + this.contextMenuSize]: true} : {})
            },
            directives: [
                {
                    name: 'show',
                    value: !this.disabled && this.showPopper
                }
            ],
            style: {
                zIndex: this._zIndex
            },
            ref: 'popper'
        }

        const _referenceDatas = {
            'class': {
                'pro-contextmenu--reference': true
            },
            ref: 'wrapper'
        }
        return (
            <span>
                <transition name="el-zoom-in-top">
                    <ul {..._popperDatas}>
                        {this.$slots.default}
                    </ul>
                </transition>
                <span {..._referenceDatas}>{this.$slots.reference}</span>
            </span>
        )
    },

    mounted() {
        const reference = this.$refs.wrapper
        const popper = this.$refs.popper;
        on(reference, 'contextmenu', this.openContextmenu)
        on(document, 'mousewheel', this.hideContextMenu);
        on(document, 'contextmenu', this.hideContextMenu);
        on(document, 'mousedown', this.hideContextMenu);
        on(popper, 'contextmenu', stopAndPreventDomEvent)

    },
    destroyed() {
        const reference = this.$refs.wrapper
        const popper = this.$refs.popper;
        off(reference, 'contextmenu', this.openContextmenu)
        off(document, 'mousewheel', this.hideContextMenu);
        off(document, 'contextmenu', this.hideContextMenu);
        off(document, 'mousedown', this.hideContextMenu);
        off(popper, 'contextmenu', stopAndPreventDomEvent)
    }
}