<template>
    <li :class="liclass">

        
        <router-link class="nav-link" :to="url" v-if="kind===1">
            <i :class="iconClass" aria-hidden="true"></i>
            <span>{{label}}</span>
        </router-link>

        <a class="nav-link" href="javascript:void(0);" v-if="kind===2" @click="toggle">
            <i :class="iconClass" aria-hidden="true"></i>
            <span>{{label}}</span>
        </a>

        <transition name="slide-fade" v-if="kind==2">
            <ul class="nav nav-children" v-if="isShowChild">
                <li v-for="item in childs" :key="item.Key">
                    <!--<a class="nav-link" :href="item.Url">

                </a>-->
                    <router-link class="nav-link" :to="item.Url">- {{item.Label}}</router-link>
                </li>
            </ul>
        </transition>

        <span v-if="kind===3">{{label}}</span>
    </li>
</template>
<script>

    export default {
        props: {
            label: {
                type: String,
                required: true,
                default: ''
            },
            kind: {
                type: Number,
                required: false,
                default: 1 //1: menu đơn, 2: menu có con, 3: menu group, 4: phân cách
            },
            url: {
                type: String,
                required: true,
                default: '/'
            },
            iconClass: {
                type: String,
                required: true,
                default: ''
            },
            childs: {
                type: Array,
                required: false,
                default: function () {
                    return [];
                }
            }
        },
        data() {
            return {
                liclass: '',
                isShowChild: false,
            }
        },
        mounted() {
            
            switch (this.kind) {
                case 1:
                    this.liclass = ""; break;
                case 2:
                    this.liclass = "nav-parent"; break;
                case 3:
                    this.liclass = "nav-group-label"; break;
                default:
                    this.liclass = ""; break;
            }
        },
        methods: {
            toggle() {
                if (this.isShowChild) {
                    this.isShowChild = false;
                    this.liclass = "nav-parent";
                    
                } else {
                    this.isShowChild = true;
                    this.liclass = "nav-parent nav-expanded";
                }
            }
        }
    }
</script>
<style scoped>
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>