<template>
    <el-scrollbar>
        <div v-for="item in topMenuData" :key="item.key" class="hc-top-menu-bar-item" @click="barMenuClick(item)">
            <hc-icon v-if="item?.source" :name="item.source" />
            <span class="name">{{ item.name }}</span>
        </div>
    </el-scrollbar>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getArrValue, newWindow } from 'js-fast-way'
import { isPathUrl } from '~uti/tools'
import mainApi from '~api/system/menu-top'

//渲染完成
onMounted(() => {
    getTopMenuData()
})

//获取顶部菜单
const topMenuData = ref([])
const getTopMenuData = async () => {
    let menuData = []
    const { data } = await mainApi.getData()
    const res = getArrValue(data)
    for (let i = 0; i < res.length; i++) {
        if (isPathUrl(res[i].code)) {
            menuData.push(res[i])
        }
    }
    topMenuData.value = menuData
}

//菜单被点击
const barMenuClick = (item) => {
    if (isPathUrl(item.code)) {
        newWindow(item.code)
    }
}
</script>
