<template>
  <div class="custom-menu-tree">
    <template v-for="item in dataList">
      <el-menu-item v-if="!item.children" :key="item.id" :index="String(item.id)">
        <span class="tree-icon">
          <i v-if="item.type === 'md'" class="el-icon-folder-opened" style="color: rgba(144, 198, 252, 1)" />
          <i v-else class="el-icon-files" style="color: rgba(144, 198, 252, 1)" />
        </span>
        <span class="tree-name" :title="item.name">{{ item.name }}</span>
        <slot name="menu" :menu-id="item.id" :type="item.type" :file-list="{ url: item.url, name: item.url, file_type: item.file_type }" />
      </el-menu-item>
      <el-submenu v-else :key="item.id" :index="String(item.id)">
        <template slot="title">
          <i :class="[item.icon]" />
          <span>{{ item.name }}</span>
          <slot name="submenu" :menu-data="item" :menu-id="item.id" />
        </template>
        <MenuTree :data-list="item.children">
          <template slot="menu" scope="ctx">
            <slot name="menu" :menu-id="ctx.menuId" :type="ctx.type" :file-list="ctx.fileList" />
          </template>
          <template slot="submenu" scope="ctx">
            <slot name="submenu" :menu-data="ctx.menuData" :menu-id="ctx.menuId" />
          </template>
        </MenuTree>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'MenuTree',
  props: {
    dataList: { type: Array, default: () => [] }
  }
}
</script>

<style scoped>
::v-deep .is-opened > .el-submenu__title {
  border-left: 3px solid #409EFF;
}
.tree-name {
  display: inline-block;
  width: 58%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 5px;
}
.tree-icon {
  background: rgba(232, 239, 248, 1);
  width: 14px;
  height: 14px;
  padding: 0 0 2px 2px;
  border-radius: 2px;
}
</style>
