<template>
  <el-menu-item :index="name" :key="name">
    <img
      class="svg-icon"
      :src="getIconUrl(meta.svgIcon, isActiveRoute(name))"
      v-if="meta.svgIcon"
    />
    <i :class="'iconfont ' + meta.icon" v-else-if="meta.icon"></i>
    <span>{{ meta.title }}</span>
  </el-menu-item>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { router } from "@/router";
defineProps<{ meta: any; name: string }>();

const isActiveRoute = computed(() => (name: string) => {
  return router.currentRoute.value.name === name;
});
const getIconUrl = computed(() => (name: string, isActive: boolean) => {
  const url = isActive
    ? new URL(`../../../assets/icon/${name}_active.svg`, import.meta.url)
    : new URL(`../../../assets/icon/${name}.svg`, import.meta.url);
  // console.log("当前URL", url);
  return String(url);
});
</script>
<style scoped>
.svg-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
:global(.is-active .svg-icon) {
  fill: var(--el-menu-active-color);
  /* color: var(--el-menu-active-color); */
}
</style>
