<template>
<div class="dashboard-container">
    <el-card v-for="(item,index) in navList" :key="index" shadow="hover" class="box-card">
        <div v-if="item.meta.title" slot="header" class="clearfix" :class="[item.children ? 'headerFixed' : '']" >
            <span>{{item.meta.title}}</span>
        </div>
        <div class="navListContain" :class="[item.children.length <= 3 ? 'startSort' : '']">
            <div v-if="!item.children || item.children.length <= 0">{{item.title}}</div>
            <dl 
                class="navList" 
                v-for="(item_c,index_c) in item.children" 
                :key="index_c"
            >
                <dt class="navList-dt" v-if="item_c.children.length !== 0">{{item_c.meta.title}}</dt>
                <dt class="navList-dd" @click="tiaozhuan({name: item_c.name})"  v-if="!(item_c.children.length !== 0)">{{item_c.meta.title}}</dt>
                <dd class="navList-dd" v-for="(item_l,index_l) in item_c.children" :key="index_l">
                    <div 
                        class="dd-name" 
                        v-if="isHaveRole(item_l.meta.roles)"
                        @click="tiaozhuan({name: item_l.name})" 
                    >{{item_l.meta.title}}</div>
                </dd>
            </dl>
        </div>
    </el-card>
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
name: 'Dashboard',
data() {
    return {
        navList:[],
    }
},
watch: {
    permission_routes(val, oldVal) {
        val.forEach(item => {
            if(!item.hidden && item.path !== '/') {
                this.navList.push(item)
            }
        })
    }
},
computed: {
    ...mapGetters([
        'permission_routes'
    ])
},
mounted(){
    this.permission_routes.forEach(item => {
        if(!item.hidden && item.path !== '/') {
            this.navList.push(item)
        }
    })
},
methods:{
    isHaveRole(role){
        let _result = true;
        if(role == "skip"){
             _result = false;
        }
        return _result
    },
    tiaozhuan(url){
        this.$router.push(url) 
    },
}
}
</script>
<style lang="scss">
.dashboard-container{
    .el-card__body{
        padding: 0 !important;
    }
    .el-card__header{
        border-bottom: 0 !important;
    }
}
</style>
<style lang="scss" scoped>
.dashboard-container{
    .box-card{
        margin-bottom: 30px;
    }
    .navListContain{
        width: 100% !important;
        padding: 15px 30px !important;
        border-top: #e6ebf5 solid 1px;
        display: flex;
            justify-content: space-between;
        
        &.startSort{
            justify-content: start;
            .navList{
                margin-right: 80px;
                margin-bottom: 0;
            }
        }
    }
    .navList{
        .navList-dt{
            color: #333;
            margin-bottom: 15px;
        }
        .navList-dd{
            margin: 0;
            color: #1890ff;
            margin-bottom: 20px;
            cursor: pointer;
            font-size: 14px;
            opacity: 1;

            &:hover{
                opacity: 0.8;
            }
        }
    }
    
}
</style>