<template>
  <div>
    <template v-if="catalog.length">
      <el-submenu
        v-for="catalog2 in catalog"
        :index="catalog2.cat_id"
        :key="catalog2.cat_id"
      >
        <template slot="title">
          <img src="static/images/folder.png" />
          {{ catalog2.cat_name }}
        </template>
        <!-- 三级目录的页面 -->
        <template v-if="catalog2.pages">
          <el-menu-item
            v-for="page3 in catalog2.pages"
            :index="page3.page_id"
            :key="page3.page_id"
          >
            <i class="el-icon-document"></i>
            <span
              :title="page3.page_title"
              :id="'left_page_' + page3.page_id"
              >{{ page3.page_title }}</span
            >
          </el-menu-item>
        </template>

        <!-- 子目录 -->
        <LeftMenuSub
          v-if="catalog2.catalogs.length"
          :catalog="catalog2.catalogs"
        ></LeftMenuSub>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'LeftMenuSub',
  props: {
    catalog: []
  },
  data() {
    return {}
  },
  components: {},
  methods: {},
  mounted() {
    // console.log(this.catalog)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icon-folder {
  width: 18px;
  height: 15px;
  cursor: pointer;
}

.menu-icon-folder {
  margin-right: 5px;
  margin-top: -5px;
}

.el-menu-item,
.el-submenu__title {
  height: 46px;
  line-height: 46px;
}
.el-submenu .el-menu-item {
  height: 40px;
  line-height: 40px;
}
.el-menu-item {
  line-height: 40px;
  height: 40px;
  font-size: 12px;
}
.el-menu-item [class^='el-icon-'] {
  font-size: 17px;
  margin-bottom: 4px;
}
.el-submenu__title img {
  width: 14px;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 10px;
  margin-bottom: 4px;
}
</style>
