<template>
<div>
    <h2>Test for ContextMenu </h2>

             <p @contextmenu.prevent="$refs.menu.open($event)">
                Right click on me
            </p>

            <vuecontext ref="menu" :close-on-scroll="close" @close="onClose" @open="onOpen" :menu="menu">
            </vuecontext>


            <!-- <vuecontext ref="menu1" :close-on-scroll="close" @close="onClose" @open="onOpen">
                <ul slot-scope="child">
                    <li @click="onClick(child.data)">Option 3 {child.data}
                    </li>
                    <li>Option 4</li>
                </ul>
            </vuecontext> -->

    <router-link to="/">Back to Home</router-link>
</div>

</template>
<script>
import vuecontext from '../components/contextMenu/ContextMenu'
export default {
    name: 'TestMenu',
    components: {
        vuecontext
    },
    data() {
        return {
            close: true ,
            firstChild : false ,
            menu : [{ code : 1 , lebel : "Option1" , disabled : false , items : [
                    { code : 1.1 , lebel : "Option1.1" , items : null , disabled : false},
                    { code : 1.2 , lebel : "Option1.2" , items : null , disabled : false}
              ] } ,
                    { code : 2 , lebel : "Option2", disabled : false, items : [
                    { code : 2.1 , lebel : "Option2.1" , items : null , disabled : false},
                    { code : 2.2 , lebel : "Option2.2" , items : null , disabled : false}
              ] },
                    { code : 3 , lebel : "Option3" , disabled : false ,items :null, disabled : false}]

        }

    },
    methods: {
        doAction(e){
            console.log("action");



        },
        onClick (data) {
            // console.log(data);
        },

        onClose () {
            console.log('closing');
        },

        onOpen (event, data, top, left) {
            console.log(data, top, left);
        }
    }
}
</script>
