<template>
  <div :style="$store.getters.sidebarOpened ? '' : 'padding-top: 10px;padding-left: 9px;'">
    <!-- <template v-if="!props.meta.show && props.meta.show !== false"> -->
    <!--element icon-->
    <template v-if="props.meta?.icon">
      <i v-if="props.meta.icon.includes('el-icon')" class="sub-el-icon"></i>
      <!---非elemtnt icon-->
      <SvgIcon v-else-if="$store.getters.sidebarOpened" :icon="props.meta.icon"></SvgIcon>
      <!-- 菜单收缩时的ICON -->
      <template v-else>
        <SvgIcon v-if="props.meta?.iconH" :icon="props.meta.iconH" style="height: 45px;width: 45px;margin-top:10px">
        </SvgIcon>
      </template>
    </template>
    <span :style="{ paddingLeft: '12px', fontSize: getFontSize(props.level), }">
      {{ props.meta.title }}
    </span>
    <!-- </template> -->
  </div>
</template>
<script setup>
import { defineProps } from "vue";
import SvgIcon from "../../../components/SvgIcon/index.vue";

const props = defineProps({
  meta: {
    type: Object,
    default: {}
  },
  level: {
    type: Number,
    default: 1
  },
});
const getFontSize = (level) => `${16 - (level - 1) * 0.5}px`;
const getFontWeight = (level) => `${650 - (level - 1) * 10}`;
</script>

<style lang="scss" scoped>
.el-menu--collapse span {
  display: block;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
</style>
