<template>
    <div>
        <JqxTree ref="myTree" style="float: left"  
            :width="300" :height="450" :hasThreeStates="true" :checkboxes="true">
            <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>

        <div style="margin-left: 60px; float: left">
            <div style="margin-top: 10px">
                <JqxCheckBox @change="change($event)" :checked="true">Three Check States</JqxCheckBox>
            </div>
        </div>
    </div>
</template>

<script>
    import JqxTree from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtree.vue';
    import JqxCheckBox from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcheckbox.vue';

    export default {
        components: {
            JqxTree,
            JqxCheckBox
        },
        mounted: function () {
            const solutionsItem = document.querySelector('#solutions');

            this.$refs.myTree.selectItem(document.querySelector('#home'));
            this.$refs.myTree.expandItem(solutionsItem);
            this.$refs.myTree.checkItem(solutionsItem, true);
            this.$refs.myTree.uncheckItem(document.querySelector('#manufacturing'));
        },
        methods: {
            change: function (event) {
                const checked = event.args.checked;
                this.$refs.myTree.hasThreeStates = checked;
            }
        }
    }
</script>