<template>
  <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
    <span slot="title">
      <span class="anticon" v-if="menuInfo.icon">
        <span class="dc-iconfont iconfont" :class="menuInfo.icon"></span>
      </span>
      <img v-else class="anticon" style="width: 14px; height: 14px" :src="menuSvg" />
      <span class="dc-text">{{ menuInfo.title }}</span>
    </span>
    <template v-for="item in menuInfo.children">
      <a-menu-item v-if="!item.children" :key="item.key">
        <template v-if="!collapsed">
          <span class="anticon" v-if="item.icon">
            <span class="dc-iconfont iconfont" :class="item.icon"></span>
          </span>
          <span v-else class="anticon dc-rectangle-box">
            <span class="dc-rectangle"></span>
          </span>
        </template>
        <span class="dc-text">{{ item.title }}</span>
      </a-menu-item>
      <SubMenu v-else :key="item.key" :menu-info="item" :collapsed="collapsed" />
    </template>
  </a-sub-menu>
</template>

<script lang="ts">
import Vue from "vue";
import { Icon, Menu } from "ant-design-vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { MENU_SVG_XML } from "../../constants/encode-assets/svg";

const InheritSubMenu = Vue.extend({
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore: Unreachable code error
  isSubMenu: true,
});

/**
 * @description: 无限极菜单组件
 * @author ChenRui
 * @date 2020/7/29 17:33
 */
@Component({
  name: "SubMenu",
  components: {
    [Menu.SubMenu.name]: Menu.SubMenu,
    [Menu.Item.name]: Menu.Item,
    [Icon.name]: Icon,
  },
  props: {
    ...(Menu.SubMenu as any)["props"],
  },
})
export default class SubMenu extends InheritSubMenu {
  menuSvg: any = MENU_SVG_XML; // 默认菜单图标
  @Prop({ default: () => ({}) }) menuInfo!: any;
  @Prop({ default: () => false }) collapsed!: boolean; // 左侧菜单闭合标识
}
</script>

<style lang="scss" scoped>
.dc-rectangle-box {
  .dc-rectangle {
    display: inline-block;
    border-radius: 1px;
    width: 4px;
    height: 12px;
    background-color: #a3b9e0;
  }
}
.dc-text {
  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>
