<template>
  <div class="menuItem-wrapper">

    <template v-for="(item,itemIndex) in routes">
      <el-menu-item @click="handleSelect(item)" :index="item.resourceUrl" v-if="item.children.length === 0">
        <i class="iconfont icondian iconStyle"></i>
        <span slot="title">{{item.resourceName}}</span>
      </el-menu-item>

      <el-submenu :index="itemIndex+''" v-else>
        <template slot="title">
          <i class="iconfont icondian iconStyle"></i>
          <span>{{item.resourceName}}</span>
        </template>
        <template v-for="(items,itemsIndex) in item.children">
          <el-menu-item @click="handleSelect(items)" :index="items.resourceUrl" v-if="items.children.length === 0"  class="menuSecondary">
            <i class="iconfont icondian iconStyle"></i>
            {{items.resourceName}}
          </el-menu-item>
          <el-submenu :index="itemIndex+'-'+itemsIndex" v-else class="menuSecondaryWrap">
            <template slot="title">
              <i class="iconfont icondian iconStyle"></i>
              <span>{{items.resourceName}}</span>
            </template>
            <el-menu-item @click="handleSelect(items1)" class="menuThirdGrade" :index="items1.resourceUrl" v-if="items1.children.length === 0" v-for="(items1,itemsIndex1) in items.children" :key="items1.powerId">
              <!-- <i class="iconfont icondian"></i> -->
              {{items1.resourceName}}
            </el-menu-item>
            <el-submenu :index="itemIndex+'-'+itemsIndex+'-'+itemsIndex1" v-if="items1.children.length !== 0" v-for="(items1,itemsIndex1) in items.children" :key="items1.powerId">
              <template slot="title">{{items1.resourceName}}</template>
              <el-menu-item @click="handleSelect(items2)" :index="items2.resourceUrl" v-if="items2.children.length === 0" v-for="(items2,itemsIndex1) in items1.children" :key="items2.powerId">
                <!-- <i class="iconfont icondian"></i> -->
                {{items2.resourceName}}
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </template>

      </el-submenu>

    </template>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    routes: {
      type: Array
    },
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    handleSelect(item) {
      sessionStorage.setItem("searchData",null)
      sessionStorage.setItem("pageData",null)
      sessionStorage.setItem("caseTabMark", '');
      sessionStorage.setItem("resourceCode", item.resourceCode);
    }
  }

}
</script>

<style scoped>
.router-link-active {
  text-decoration: none;
}
.iconStyleSlider {
  color: #0357AB !important;
  font-size: 20px !important;
}
.el-submenu__title {
  width: 266px;
  height: 2px;
  /* background: url(../..//assets/wisdom_images/line.png)no-repeat */
}
/* .sss{margin-right: 5px;} */
</style>
