<template>
  <el-menu
    class="el-menu-vertical-demo"
    @select="selectRouter"
    :default-active="$route.path"
  >
    <template v-for="(secondRoute, secondIndex) in item.children">
      <el-menu-item
        :index="secondRoute.fullPath"
        :key="secondIndex"
        v-if="!secondRoute.children"
      >
        <template slot="title">
          <svg-icon
            v-if="
              secondRoute.meta &&
              secondRoute.meta.icon &&
              secondRoute.meta.icon !== '#'
            "
            :icon-class="secondRoute.meta.icon"
          />
          {{ secondRoute.meta.title }}
        </template>
      </el-menu-item>
      <el-submenu
        v-else
        :index="secondRoute.fullPath"
        :key="secondRoute.fullPath"
      >
        <template slot="title">
          <svg-icon
            v-if="
              secondRoute.meta &&
              secondRoute.meta.icon &&
              secondRoute.meta.icon !== '#'
            "
            :icon-class="secondRoute.meta.icon"
          />
          {{ secondRoute.meta.title }}
        </template>
        <menu-item :item="secondRoute"></menu-item>
        <!-- <el-menu-item
          v-for="(nextItem, nextIndex) in secondRoute.children"
          :key="nextIndex"
          :index="nextItem.fullPath"
        >
          <svg-icon
            v-if="
              nextItem.meta && nextItem.meta.icon && nextItem.meta.icon !== '#'
            "
            :icon-class="nextItem.meta.icon"
          />
          {{ nextItem.meta.title }}
        </el-menu-item> -->
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    selectRouter(index, indexPath) {
      this.$router.push(index);
    },
    filterActiveCss(path) {
      return this.$route.path.indexOf(path) > -1;
    },
    handlePath(item, index) {
      if (item.children) return;
      this.$router.push(item.fullPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
  overflow: hidden;
  li {
    // width: 160px;
  }
}
.menu-item {
  font-size: 18px;
  color: #ffffff;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  margin: 0 10px;
  padding: 3px 12px;
  cursor: pointer;
}
.activeCss {
  color: #192a92;
}

::v-deep .el-menu-item,
::v-deep .el-submenu__title {
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
}
</style>
