<template>
    <div class="maxWidth home-header">
        <div class="commoncontainer maxHeight flex jc-sb ai-c">
            <div class="fz-30 fc-w flex ai-c">
                <img style="width: 40px;margin-right:10px" src="/public/images/logo-white.png" />
                <img style="width: 173px;margin-right:10px;margin-top:4px;" src="/public/images/logo-title.png" />
            </div>
            <div class="flex maxHeight ai-c">
                <div v-for="(item,index) in navList" :key="index" class="fc-w fz-16 maxHeight flex ai-c nav-li"
                    :class="navIndex==index?'active':''" @click.stop="navLiClick(item,index)" @mouseover="navmouseover(item,index)">
                    {{item.label}}
                </div>
            </div>
        </div>
        <div class="flex" style="position: absolute;right: 20px;top: 50%;margin-top: -14px;">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <div class="tw-mr-10" style="display: flex;align-items: center;">
                        <img style="width: 26px;height:28px;" src="/public/images/cim/user.png" alt="">
                    </div>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-if="!loginVisible" @click="logout()">登录</el-dropdown-item>
                        <el-dropdown-item  v-if="loginVisible" @click="$router.push({path:'/usercenter/myinfo'})">账号信息</el-dropdown-item>
                        <el-dropdown-item v-if="loginVisible" @click="logout()">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="childMenu maxWidth flex jc-c" v-if="childmenuVisible" >
            <div class="fc-w fz-16 maxHeight flex ai-c nav-li" v-for="(item,index) in menuList" :key="index"
                :class="menuIndex==index?'active':''" @mouseover="menumouseover(index)" @click="menuLiClick(item,index)">
                {{item.label}}
            </div>
        </div>
    </div>
</template>
<script>
import {getMethodCommon, postMethodCommon} from '../../../api/common';
import {defineComponent, reactive, onMounted, toRefs} from "vue";
import {useRouter} from 'vue-router'

export default defineComponent({
    name: 'Cim',
    setup() {
        let data = reactive({
            cimTitle: '时空大数据平台',
            navList:[
                { label: '首页' , value: 1 , path: '/'},
                { label: '数据服务' , value: 2 , path:'/serverSupermarket'},
                { label: '资源工具' , value: 4 , path: '/toolSupermarket' , status: 1},
                { label: '专题应用' , value: 5 ,children:[]},
                { label: '管理中心' , value: 6 ,children:[
                    { label: '服务管理' , value: 6-1, path: '/usercenter/myservice' },
                    { label: '工具管理' , value: 6-2, path: '/usercenter/mytool' },
                    { label: '应用管理' , value: 6-3, path: '/usercenter/myapplication' },
                    { label: '进度查询' , value: 6-4, path: '/usercenter/myapply' },
                    { label: '密钥管理' , value: 6-1, path: '/usercenter/mykey' },
                    { label: '字典管理' , value: 6-1, path: '/usercenter/myattribute' },
                ]},
                { label: '开发中心' , value: 6 ,path: '/webapi'},
            ],
            navIndex: 0,
            menuList:[],
            menuIndex: 0,
            childmenuVisible: false,
            loginVisible: true
        })
        const router = useRouter()
        onMounted(() => {
            data.navIndex = router.currentRoute.value.query.navIndex || 0
            methods.getTitles()
            methods.getMenu()
            window.addEventListener('click',methods.handleBodyClick)
            console.log('localStorage',localStorage)
            if(localStorage.length>0){
                data.loginVisible = true
            }else{
                data.loginVisible = false
            }
        })

        let methods = {
            logout() {
                localStorage.clear()
                router.push({path: "/login"})
            },
            handleBodyClick(){
                data.childmenuVisible = false
            },
            navLiClick(item,index){
                data.navIndex = index
                if(item.path){
                    data.childmenuVisible = false
                    if(item.status){
                        router.push({
                            path: item.path,
                            query:{
                                status: item.status,
                                navIndex: data.navIndex
                            }
                        })
                    }else{
                        router.push({
                            path: item.path,
                            query:{
                                navIndex: data.navIndex
                            }
                        })
                    }

                }else{
                    data.menuList = item.children
                    if(item.children){
                        data.childmenuVisible = true
                    }
                }
            },
            menuLiClick(item,index){
                if(item.code == 'application'){
                    router.push({
                        path: item.path,
                        query:{
                            type: item.type,
                            id: item.value,
                            title: item.label,
                            navIndex: data.navIndex
                        }
                    })
                }else{
                    if(item.status || item.status==0){
                        router.push({
                            path: item.path,
                            query:{
                                status: item.status,
                                dataType: item.datatype,
                                navIndex: data.navIndex
                            }
                        })
                    }else{
                        router.push({
                            path: item.path,
                            query:{
                                status: index,
                                dataType: item.datatype,
                                navIndex: data.navIndex
                            }
                        })
                    }
                }

            },
            navmouseover(item,index){
                // data.menuList = item.children
                // data.navIndex = index
                // if(item.children){
                //     data.childmenuVisible = true
                // }else{
                //     data.childmenuVisible = false
                // }

            },
            menumouseover(index){
                data.menuIndex = index
            },
            getMenu() {
                getMethodCommon("/CimApplication/GetSysCimList", {}).then(res => {
                    if (res.code === 200) {
                        let arr = []
                        res.result.forEach(item =>{
                            arr.push({
                                code: 'application',
                                label: item.name,
                                value: item.id,
                                type: item.page_code,
                                path: '/cim'
                            })
                        })
                        data.navList[3].children = arr
                    }
                })
            },
            getTitles(){
                getMethodCommon("/CimApplication/GetCimTitle", {}).then(res => {
                    data.cimTitle = res.result
                })
            },
        };
        return {
            ...methods,
            ...toRefs(data),
        };
    },
    });
</script>

<style scoped>
.home-header{
    position: relative;
    height: 71px;
    background: rgba(0,21,49,0.9000);
}
.nav-li{
    padding: 0 20px;
    cursor: pointer;
}
.childMenu{
    height: 44px;
    background: rgba(0,0,0,0.4000);
    position: absolute;
    z-index: 9;
}


.nav-li.active{
    border-bottom: 3px solid #0361EF;
    color: #0361EF;
}

.active{
    border: none;
}
.maxWidth{
    width: 100%;
}
.maxHeight{
    height: 100%;
}
.flex{
    display: flex;
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sa{
    justify-content: space-around;
}
.jc-sb{
    justify-content: space-between;
}
.fc-w{
    color: #fff;
}
.commoncontainer{
    width: 1266px;
    margin: 0 auto;
}
.fw-b{
    font-weight: bold;
}
.fz-14{
    font-size: 14px;
}
.fz-16{
    font-size: 16px;
}
.fz-18{
    font-size: 18px;
}
.fz-20{
    font-size: 20px;
}
.fz-24{
    font-size: 24px;
}
.fz-30{
    font-size: 30px;
}

</style>