<template>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" :class="[aClass, (Status == 'Active' ? 'active' : '')]" data-toggle="dropdown" href="#">
            <div class="WM-Font-18"> {{ TitleFa }} </div> {{ TitleEn }}
        </a>
        <div class="dropdown-menu" v-if="SubItemsCount > 0">
            <template v-for="(SubItem, index) in SubItems">
                <a class="dropdown-item" href="#"> {{ SubItem.NameFa }} </a>
            </template>
        </div>
    </li>
</template>

<script>
export default {
    props: {
        TitleFa:   { default: "دسترسی سریع" },
        TitleEn:   { default: "Title" },
        color:     { default: "Black" },
        SubItems:   { type: Object, default: function () { return {} } },
        TabContent:   { default: '' },
        Status:   { default: '' },
    },
    data: function ()  {
        return {
            aClass: 'WM-' + this.color,
            TabHref: '#' + this.TabContent,
            SubItemsCount : Object.keys(this.SubItems).length,
        }
    },
    mounted: function () {
        console.log(Object.keys(this.SubItems).length)
    }
};

</script>
