<template>
    <div class="system-menu" @mouseover="showSystem = true" @mouseleave="onLeave" v-if="settingsStore.showSubSystemTags">
        <div class="current-menu">
            <el-icon><Menu /></el-icon>
            <span class="ab-m-l-5">{{ currentSubsystem?.name }}</span>
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </div>
        <Transition name="subsystemilst">
            <div class="other-menu" v-show="showSystem&&allSubsystems.length>0" @mouseover="onEnter" @mouseleave="showSystem = false" :style="`background-color:${settingsStore.currentLayoutColor.navrbarBackgroundColor}`">
                <div class="item" v-for="item in allSubsystems" :key="item.id" @click="skipSubsystem(item)" :class="{active: currentSubsystem.id===item.id}" >{{ item.name }}</div>
            </div>
        </Transition>
        
    </div>
</template>

<script setup lang="ts">
import { useSettingsStore } from "@/framework/store/modules/settings";
import { getAllowAccessSubsystem } from '@/framework/api/acas/index'
const settingsStore = useSettingsStore()
const allSubsystems=ref([])
const currentSubsystem=ref({id:publicData.currentSubsystem,name:publicData.currentSubsystem})
const systemChooseColor=ref(settingsStore.currentLayoutColor.systemChooseColor)

/**加载子系统 */
const loadAllowAccessSubsystem = () => {
    allSubsystems.value=[]
    getAllowAccessSubsystem().then((data: any) => {
        for(let subsystem of data){
            allSubsystems.value.push({id:subsystem.id,name:subsystem.name,describe:subsystem.describe,auth:true, indexURL:subsystem.indexURL,logo:''})
        }
        currentSubsystem.value=allSubsystems.value.find((item: any) => item.id === publicData.currentSubsystem)
    })
}
/**跳转子系统 */
const skipSubsystem = (subsystem:any) => {
    if(currentSubsystem.value.id===subsystem.id) return
    window.open(location.origin+subsystem.indexURL+'?t='+new Date().getTime(),'_blank')
}

const showSystem = ref(false)
let timer:number = 0
const onEnter = ()=>{
    clearTimeout(timer)
}
const onLeave = ()=>{
    timer = window.setTimeout(()=>{
        showSystem.value = false
    },200)
}
onMounted(() => {
    loadAllowAccessSubsystem()
});
</script>

<style lang="scss" scoped>
.system-menu{
    display: flex;
    align-items: center;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    .current-menu{
        color: #fff;
        display: flex;
        align-items: center;
    }
    .other-menu{
        width: 480px;
        height: auto;
        color: rgba(255,255,255,0.45);
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        z-index: 100;
        top: 42px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        .item{
            width: 115px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 10px;
            &:hover{
                color: #fff;
                background-color: v-bind(systemChooseColor);
                border-radius: 8px;
            }
        }
        .active{
            color: #fff;
            background-color: v-bind(systemChooseColor);
            border-radius: 8px;
        }
    }


}

.subsystemilst-enter-active,
.subsystemilst-leave-active {
    transition: all 0.3s ease-out;
}

.subsystemilst-enter-from,
.subsystemilst-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}
</style>