<template>
    <div class="permission">
        <div v-for="(item,index) in childrenList" :key="index" :class="{active:item.name === $route.name}">
            <router-link :to="item.path">
                <span>{{item.meta.title}}</span>
            </router-link>
        </div>
        <div class="getcloud" v-if="cloudshow">
            <div class="cloudtime">最近同步时间：2022/07/28 08:11:31</div><div><el-button type="primary" class="daochu">云端同步到站</el-button></div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name: 'Header',
    data(){
        return{
            isactive:true,
        }
    },
    computed: {
        ...mapGetters(["sidebar", "name", "device", "permission_routes"]),
        cloudshow(){
            if(this.$route.name === 'CarManage' || this.$route.name === 'CarTypeManage' || this.$route.name === 'DriverManage'){
                return true
            }else{
                return false
            }
        },
        //获取子路由
        childrenList(){
            if(this.$route.matched[0].name === 'ManageLog'){
                return this.permission_routes[9].children.slice(0,6)
            }else{
                return this.permission_routes[8].children.slice(0,6)
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    .permission{
        display: flex;
        padding: 30px 35px;
        margin-left: 20px;
        .active{
            padding-bottom: 15px;
            border-bottom: 2px solid #91fdb9;
            a{
                color: #91fdb9;
            }
        }
        div{
            margin-right: 25px;
            a{
                color: white;
                font-size: 20px;
                font-weight: 600;
            }
        }
        .getcloud{
            display: flex;
            justify-content:space-between;
            position:absolute;
            margin-right: 12px;
            padding-top: 15px;
            right:0 ;
            .cloudtime{
                width: 340px;
                text-align:right;
                font-size: 16px;
                color: #a8adc8;
                line-height: 40px;
            }
            .daochu {
                background-color: #111827;
                border: #91fdb9 solid 1px;
                color: #91fdb9;
                font-size: 18px;
                font-weight: 600;
                padding:10px;
            }
        }
    }
</style>