<template>
    <div class="configure-page">
        <div class="top-menu">
            <div class="item" v-for="(item, index) in menuList" :key="index"
                :class="getActive(index)"
                @click="onToggle(index, item.url)"
            >{{item.name}}</div>
        </div>
        <div class="k-content">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>

export default {
    name: 'detection',
    data(){
        return {
            menuList: [],
            current: 0
        }
    },
    mounted(){
        this.getPath();
    },
    methods: {
        // 获取是否active
        getActive(index){
            let str = 'item1';
            if(index === 0) str = 'item0';
            if(index === this.menuList.length-1) str = 'item00';
            if(index === this.current){
                return `${str} active`;
            }
            return `${str}`
        },
        // 切换菜单
        onToggle(index, url){
            this.current = index;
            this.$router.push({ path: url });
        },
        // 匹配路径
        getPath(){
            let path = this.$route.path;
            let list = this.$store.state.menu.list;
            list.map((item, index)=>{
                if(item.path.split('/')[1] === path.split('/')[1]){
                    this.menuList = item.child;
                    item.child.map((_item, _index)=>{
                        if(_item.url === path) this.current = _index;
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';

</style>