<template>
	
	<el-menu :default-active="activeIndex" 
		class="el-menu-demo" 
		mode="horizontal" 
		text-color="#fff"
		active-text-color="#fff"
		background-color="#3b9a9c"
		@select="handleSelect"
		style="border: none;">
		<template v-for="(item, index) in sidebarRouters">
			<app-link v-if="item.meta" :to="resolvePath(item.path, item.query)">
				<el-menu-item index="1">{{item.meta.title}}{{resolvePath(item.path, item.query)}}</el-menu-item>
			</app-link>
		</template>
	</el-menu>
	
</template>

<script setup>
	import { isExternal } from '@/utils/validate';
	import { getNormalPath } from '@/utils/ruoyi';
	const store = useStore();
	const route = useRoute();
	const sidebarRouters =  computed(() => store.getters.sidebarRouters);
	const activeIndex = computed(() => {
	  const { meta, path } = route;
	  if (meta.activeMenu) {
	    return meta.activeMenu;
	  }
	  return path;
	})
	const handleSelect = function(){
		
	}
	function resolvePath(routePath, routeQuery) {
		console.log(routePath, routeQuery)
	  if (isExternal(routePath)) {
	    return routePath
	  }
	  if (isExternal(routePath)) {
	    return routePath
	  }
	  if (routeQuery) {
	    let query = JSON.parse(routeQuery);
	    return { path: getNormalPath(routePath + '/' + routePath), query: query }
	  }
	  return getNormalPath(routePath + '/' + routePath)
	}
</script>

<style>
</style>