<template>
    <div>
        <JqxTree ref="myTree"
            :width="300" :height="400">
            <ul>
                <li id="home">Home</li>
                <li id="solutions">
                    Solutions
                    <ul>
                        <li>Education</li>
                        <li>Financial services</li>
                        <li>Government</li>
                        <li id="manufacturing">Manufacturing</li>
                        <li>
                            Solutions
                            <ul>
                                <li>Consumer photo and video</li>
                                <li>Mobile</li>
                                <li>Rich Internet applications</li>
                                <li>Technical communication</li>
                                <li>Training and eLearning</li>
                                <li>Web conferencing</li>
                            </ul>
                        </li>
                        <li>All industries and solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC products</li>
                        <li>Mobile products</li>
                        <li>All products</li>
                    </ul>
                </li>
                <li>
                    Support
                    <ul>
                        <li>Support home</li>
                        <li>Customer Service</li>
                        <li>Knowledge base</li>
                        <li>Books</li>
                        <li>Training and certification</li>
                        <li>Support programs</li>
                        <li>Forums</li>
                        <li>Documentation</li>
                        <li>Updates</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul>
                        <li>Designers</li>
                        <li>Developers</li>
                        <li>Educators and students</li>
                        <li>Partners</li>
                        <li>
                            By resource
                            <ul>
                                <li>Labs</li>
                                <li>TV</li>
                                <li>Forums</li>
                                <li>Exchange</li>
                                <li>Blogs</li>
                                <li>Experience Design</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    Company
                    <ul>
                        <li>About Us</li>
                        <li>Press</li>
                        <li>Investor Relations</li>
                        <li>Corporate Affairs</li>
                        <li>Careers</li>
                        <li>Showcase</li>
                        <li>Events</li>
                        <li>Contact Us</li>
                        <li>Become an affiliate</li>
                    </ul>
                </li>
            </ul>
        </JqxTree>

        <JqxMenu ref="myMenu" @itemclick="itemClick($event)"
                 :width="120" :height="56" :autoOpenPopup="false" :mode="'popup'">
            <ul>
                <li>Add Item</li>
                <li>Remove Item</li>
            </ul>
        </JqxMenu>

    </div>
</template>

<script>
    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
    import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';

    export default {
        components: {
            JqxTree,
            JqxMenu
        },
        mounted: function () {
            this.$refs.myTree.selectItem(document.querySelector('#home'));
            this.$refs.myTree.expandItem(document.querySelector('#solutions'));

            document.addEventListener('contextmenu', event => {
                event.preventDefault();
                if ((event.target).classList.contains('jqx-tree-item')) {
                    this.$refs.myTree.selectItem(event.target.parentNode);
                    const scrollTop = window.scrollY;
                    const scrollLeft = window.scrollX;
                    this.$refs.myMenu.open(event.clientX + 5 + scrollLeft, event.clientY + 5 + scrollTop);
                    return false;
                } else {
                    this.$refs.myMenu.close();
                }
            });
        },
        methods: {
            itemClick: function (event) {
                const item = event.args.innerText;
                const selectedItem = this.$refs.myTree.getSelectedItem();

                switch (item) {
                    case 'Add Item':
                        if (selectedItem != null) 
                            this.$refs.myTree.addTo({ label: 'Item' }, selectedItem.element);
                        break;
                    case 'Remove Item':
                        if (selectedItem != null) 
                            this.$refs.myTree.removeItem(selectedItem.element);
                        break;
                }
            }
        }
    }
        
    
</script>