<template>
    <ul class="navs-ul">
        <li v-for="(item, index) in userrole == 1?navsList:navsLists" :key="index" @click="navcliClick(item, index)" class="navs-li">
            <div class="ul-li-div flex row ai-c" :class="navsliIndex == index ? 'liactive' : ''">
                <component :is="item.icon" style="width: 18px;height: 18px;"></component>
                <!-- <img :src="/public/img/icon/taxi.png"> -->
                <span class="fw-b ml-1">{{ item.name }}</span>
            </div>
        </li>
    </ul>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs } from "vue";
import { getMethodCommon } from "../../../api/common"
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router'
 
export default defineComponent({
    name: 'Index',
    components: {

    },
    setup(props, context) {
        let data = reactive({
            navsList: [
                { name: '数据统计', icon: 'MessageBox', path: 'header' },
                { name: '数据汇总', icon: 'DocumentCopy', path: 'configmanage' },
                { name: '填报记录', icon: 'Tickets', path: 'record' },
                { name: '企业登记', icon: 'Ticket', path: 'header' },
                { name: '系统邮箱', icon: 'Message', path: 'devicemanagement' },
                { name: '用户管理', icon: 'User', path: 'header' },
                { name: '退出登录', icon: 'SwitchButton', path: 'login' }
            ],
            navsLists: [
                { name: '数据统计', icon: 'MessageBox', path: 'header' },
                { name: '数据汇总', icon: 'DocumentCopy', path: 'configmanage' },
                { name: '填报记录', icon: 'Tickets', path: 'record' },
                { name: '企业登记', icon: 'Ticket', path: 'header' },
                { name: '系统邮箱', icon: 'Message', path: 'devicemanagement' },
                { name: '退出登录', icon: 'SwitchButton', path: 'login' }
            ],
            navsliIndex: 0,
            userrole:'',
        })
        const router = useRouter()
        const route = useRoute()
        onMounted(() => {
            if(route.query.navIndex){
                data.navsliIndex = route.query.navIndex
            }else{
                data.navsliIndex = 0
            }
            data.userrole = localStorage.getItem("role")
        })
        let methods = {
            navcliClick(item, index) {
                if (item.path == 'login') {
                    localStorage.clear()
                    router.push('/login')
                } else {
                    data.navsliIndex = index
                    router.push({
                        path: '/',
                        query: {
                            navIndex: index
                        }
                    })
                    let obj = {
                        index: index
                    }
                    context.emit('getNavsLable', obj)
                }

            }
        };
        return {
            ...methods,
            ...toRefs(data),
        };
    },
});
</script>

<style scoped>
.navs-ul li:last-child{
    position: absolute;
    bottom: 0px;
}
.navs-ul li {
    line-height: 40px;
    cursor: pointer;
}

.ul-li-div {
    height: 50px;
    line-height: 50px;
    width: calc(100% - 35px);
    padding: 0 15px 0 40px;
    color: #979CA8;
    font-size: 15px;
}

.ul-li-div.liactive {
    color: #fff;
    background: #161D26;
    border-left:2px solid #2056c0;

}

.child-box {
    line-height: 40px;
    background: #161D26;
    padding-left: 30px;
    color: #979CA8;
}

.child-box:hover {
    font-weight: 600;
}

.child-box.childactive {
    color: #2056c0;
    background: #eef2fa;
    font-weight: 600;
}</style>