<template>
  <el-descriptions
    title="个人信息"
    style="padding: 15px"
    border
    size="large"
    :column="2">
    <el-descriptions-item>
      <template #label> 菜单名 </template>{{ menue.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label> 路径 </template>{{ menue.path }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label> 所属菜单 </template
      >{{ menue.parentId }}</el-descriptions-item
    >
    <el-descriptions-item>
      <template #label> 图标 </template>
      <el-icon>
        <component :is="menue.icon" />
      </el-icon>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>是否显示 </template>
      <el-tag type="success" v-if="menue.show">显示</el-tag>
      <el-tag type="danger" v-else>隐藏</el-tag>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { systemMenueType } from "@/types/systemMenue";
const props = defineProps<{
  data: systemMenueType;
}>();
const menue = props.data;
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  display: flex;
  align-items: center;
  .el-icon {
    margin: 0 5px;
  }
}
</style>
