<template>
    <div>
        <JqxRibbon 
            @select="select($event)"
            @unselect="unselect($event)"
            :width="getWidth" :height="300" :position="'top'" 
            :selectionMode="'click'" :animationType="'fade'">
            <ul>
                <li style="margin-left: 30px;">Browse Books</li>
                <li>Shipping</li>
                <li>About Us</li>
            </ul>
            <div>
                <div>
                    <table>
                        <tr>
                            <td>
                                <b>Fiction</b>
                            </td>
                            <td>
                                <b>Biography</b>
                            </td>
                            <td>
                                <b>Science</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Adventure</a>
                            </td>
                            <td>
                                <a href="#">Biography: General</a>
                            </td>
                            <td>
                                <a href="#">Astronomy</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Classics</a>
                            </td>
                            <td>
                                <a href="#">Diaries, Letters & Journals</a>
                            </td>
                            <td>
                                <a href="#">Biology</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Historical Fiction</a>
                            </td>
                            <td>
                                <a href="#">Memoirs</a>
                            </td>
                            <td>
                                <a href="#">Geography</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Romance</a>
                            </td>
                            <td>
                                <b>Food & Drink</b>
                            </td>
                            <td>
                                <a href="#">Mathematics</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Science Fiction</a>
                            </td>
                            <td>
                                <a href="#">General Cookery</a>
                            </td>
                            <td>
                                <a href="#">Physics</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Thrillers</a>
                            </td>
                            <td>
                                <a href="#">National Cuisine</a>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <a href="#">Quick & Easy Cooking</a>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <a href="#">Vegetarian Cookery</a>
                            </td>
                            <td>
                                <a href="#">More books >></a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    <table>
                        <tr>
                            <td>
                                <a href="#">Countries we ship to</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Delivery options</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Order cancellation and returns</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div>
                    <table>
                        <tr>
                            <td>
                                <a href="#">Contact us</a>
                            </td>
                            <td rowspan="3" style="width: 125px;"></td>
                            <td rowspan="3">
                                <img src="../../../images/bookshop.png" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Jobs</a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#">Affiliates</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </JqxRibbon>

        <div style="margin-top: 30px; font-weight: bold;">
            Events:
        </div>
        <JqxPanel ref="myPanel" :width="200" :height="250"></JqxPanel>
    </div>
</template>

<script>
    import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
    import JqxPanel from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue';

    export default {
        components: {
            JqxRibbon,
            JqxPanel
        },
        data: function () {
            return {
                getWidth: '90%'
            }
        },
        methods: {
            select: function (event) {
                const selectedIndex = event.args.selectedIndex;
                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Selected: ' + selectedIndex + '</div>');
            },
            unselect: function (event) {
                const unselectedIndex = event.args.unselectedIndex;
                this.$refs.myPanel.prepend('<div style="margin-top: 5px;">Unselected: ' + unselectedIndex + '</div>');
            }
        }
    }
</script>

<style>
    table {
        border-collapse: separate;
        border-spacing: 15px 5px;
    }

    .jqx-panel{
        border: none;
    }
</style>