<template>
    <a-menu v-show="visible" class="contextmenu" :style="style" :selectedKeys="selectedKeys" @click="handleClick">
        <a-menu-item :key="item.key" v-for="item in itemList">
            <a-icon v-if="item.icon" :type="item.icon" />
            <span>{{ item.text }}</span>
        </a-menu-item>
    </a-menu>
</template>

<script>
export default {
    name: 'Contextmenu',
    props: {
        visible: {
            type: Boolean,
            required: false,
            default: false,
        },
        itemList: {
            type: Array,
            required: true,
            default: () => [],
        },
    },
    data() {
        return {
            left: 0,
            top: 0,
            target: null,
            meta: null,
            selectedKeys: [],
        };
    },
    computed: {
        style() {
            return {
                left: this.left + 'px',
                top: this.top + 'px',
            };
        },
    },
    created() {
        window.addEventListener('click', this.closeMenu);
        window.addEventListener('contextmenu', this.setPosition);
    },
    beforeDestroy() {
        window.removeEventListener('click', this.closeMenu);
        window.removeEventListener('contextmenu', this.setPosition);
    },
    methods: {
        closeMenu() {
            this.$emit('update:visible', false);
        },
        setPosition(e) {
            this.left = e.clientX;
            this.top = e.clientY;
            this.target = e.target;
            this.meta = e.meta;
        },
        handleClick({ key }) {
            this.$emit('select', key, this.target, this.meta);
            this.closeMenu();
        },
    },
};
</script>

<style lang="less" scoped>
.contextmenu {
    position: fixed;
    z-index: 1000;
    border-radius: 4px;
    box-shadow: -4px 4px 16px 1px @shadow-color !important;
}
.ant-menu-item {
    // 菜单项之间的缝隙会影响点击
    margin: 0 !important;
}
</style>
