<template>
    <!-- 右键 -->
    <div
        class="context-menu-container"
        @click="updateContextMenu(false)"
        @contextmenu.prevent="onContextMenu"
    >
        <slot></slot>
        <contextMenu
            v-if="contextMenuList.length"
            :contextMenu="menuContext"
            @update="updateContextMenu"
        />
    </div>
</template>

<script lang="ts">
import { watchEffect } from '@vue/runtime-core';
import { defineComponent, PropType, reactive } from 'vue';
import contextMenu from './contextMenu.vue';
import { ContextMenu, MenuItem } from './interface';

export default defineComponent({
    name: 'context-menu-container',
    props: {
        contextMenuList: {
            default: [],
            type: Array as PropType<MenuItem[]>,
        },
        selectedRow: {
            default: null,
            type: Object,
        },
    },
    components: {
        contextMenu,
    },
    setup(props) {
        const menuContext = reactive<ContextMenu>({
            position: { clientX: 0, clientY: 0 },
            show: false,
            menuList: props.contextMenuList,
            selectedData: props.selectedRow,
        });
        watchEffect(() => {
            menuContext.menuList = props.contextMenuList;
        });
        function onContextMenu(value: MouseEvent) {
            if (value.type === 'contextmenu') {
                // 过滤右键表头
                const { clientX, clientY } = value;
                Object.assign(menuContext.position, { clientX, clientY });
                menuContext.show = true;
            }
        }
        // 关闭右键弹窗
        function updateContextMenu(value: boolean) {
            menuContext.show = value;
        }
        return { menuContext, onContextMenu, updateContextMenu };
    },
});
</script>

<style lang="less">
.context-menu {
    min-width: 100px;
    user-select: none;
    position: fixed;
    background-color: @m-black25;
    z-index: 999;
    border-radius: 2px;
    border: 1px solid @m-black17;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    cursor: pointer;
    li {
        padding: 6px;
        color: @m-grey2;
        font-size: 16px;
        border-bottom: 1px solid @m-black17;
        text-align: center;
        &:hover {
            color: @m-white1;
            background-color: @m-grey26;
        }
    }
}
</style>;
