<template>
    <ul class="context-menu" v-show="contextMenu.show" :style="{ top: y, left: x }">
        <li
            v-for="(item, index) in contextMenu.menuList"
            :key="index"
            @click.passive="choose(item.callback)"
        >{{item.lable}}</li>
    </ul>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import { ContextMenu } from './interface';

export default defineComponent({
    name: 'context-menu',
    props: {
        contextMenu: {
            default: {
                position: { clientX: 0, clientY: 0 },
                menuList: [],
                show: false,
            },
            type: Object as PropType<ContextMenu>,
        },
    },
    components: {},
    setup(props, context) {
        function choose(fn: Function) {
            context.emit('update', false);
            fn && fn(props.contextMenu.selectedData);
        }
        const x = computed(() => `${props.contextMenu.position.clientX - 10}px`);
        const y = computed(() => `${props.contextMenu.position.clientY - 10}px`);
        return { x, y, choose };
    },
});
</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>;
