<template>
  <a-sub-menu :key="menuInfo.key">
    <template #icon>
      <span class="iconfont dc-iconfont" v-if="menuInfo.icon" :class="menuInfo.icon"></span>
      <appstore-outlined v-else />
    </template>
    <template #title>
      <span class="dc-text">{{ menuInfo.title }}</span>
    </template>
    <template v-for="item in menuInfo.children">
      <a-menu-item class="dc-sub-menu-item-li" v-if="!item.children" :key="item.key">
        <template #icon>
          <div class="dc-rectangle-box">
            <div class="dc-rectangle"></div>
          </div>
        </template>
        <div class="dc-mini-text dc-text">{{ item.title }}</div>
      </a-menu-item>
      <SubMenu v-else :key="item.key" :menu-info="item" :collapsed="collapsed" />
    </template>
  </a-sub-menu>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { NavMenu } from "../../model/domain/NavMenu";

interface Props {
  menuInfo: NavMenu;
  collapsed: boolean;
}

/**
 * @description: 无限极菜单组件
 * @author ChenRui
 * @date 2020/7/29 17:33
 */
@Options({
  name: "SubMenu",
})
export default class SubMenu extends Vue {
  @Prop({ default: {} }) readonly menuInfo!: NavMenu; // 菜单信息
  @Prop({ default: false }) readonly collapsed!: boolean; // 折叠状态
}
</script>

<style lang="scss" scoped>
.dc-rectangle-box {
  .dc-rectangle {
    border-radius: 1px;
    width: 4px;
    height: 12px;
    background-color: #a3b9e0;
  }
}
.dc-mini-text {
  font-size: 12px;
}
.dc-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
</style>
