<template>
  <div class="menuItem-wrapper">
    <template v-for="(firstItem, firstIndex) in routes">
      <el-menu-item
        v-if="firstItem.children.length === 0"
        :index="firstItem.resourceUrl"
        :key="firstIndex"
        @click="handleSelect(firstItem)"
      >
        <span class="iconfont icondian iconStyle"></span>
        <span v-if="firstItem.resourceName" slot="title" class="test">{{
          firstItem.resourceName
        }}</span>
      </el-menu-item>
      <el-submenu v-else :index="firstIndex + ''" :key="firstItem.resourceCode">
        <template slot="title">
          <span class="iconfont icondian iconStyle"></span>
          <span slot="title">{{ firstItem.resourceName }}</span>
        </template>
        <template v-for="(secondItem, secondIndex) in firstItem.children">
          <el-menu-item
            :index="secondItem.resourceUrl"
            :key="secondIndex"
            v-if="secondItem.children.length == 0"
            @click="handleSelect(secondItem)"
          >
            <span class="iconfont icondian iconStyle"></span>
            <span slot="title">{{ secondItem.resourceName }}</span>
          </el-menu-item>
          <el-submenu
            v-else
            :index="firstIndex + '-' + secondIndex"
            :key="secondIndex"
          >
            <template slot="title">
              <span class="iconfont icondian iconStyle"></span>
              <span v-if="secondItem.resourceName" slot="title">{{
                secondItem.resourceName
              }}</span>
            </template>
            <template v-for="(thirdItem, thirdIndex) in secondItem.children">
              <!--  <template slot="title">
                <span class="iconfont icondian iconStyle"></span>
                <span v-if="thirdItem.resourceName" slot="title">{{thirdItem.resourceName}}</span>
              </template>-->
              <el-menu-item
                :index="thirdItem.resourceUrl"
                :key="thirdIndex"
                v-if="thirdItem.children.length == 0"
                @click="handleSelect(thirdItem)"
              >
                <span slot="title">{{ thirdItem.resourceName }}</span>
              </el-menu-item>
              <el-submenu
                v-else
                :index="firstIndex + '-' + secondIndex + '-' + thirdIndex"
                :key="thirdIndex"
              >
                <template slot="title">{{ thirdItem.resourceName }}</template>
                <el-menu-item
                  :index="fourthItem.resourceUrl"
                  v-if="fourthItem.children.length === 0"
                  v-for="(fourthItem, fourthIndex) in thirdItem.children"
                  :key="fourthIndex"
                  @click="handleSelect(fourthItem)"
                >
                  {{ fourthItem.resourceName }}
                </el-menu-item>
              </el-submenu>
            </template>
          </el-submenu>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    routes: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  created() {
    // console.log(this.routes)
  },
  methods: {
    handleSelect(item) {
      sessionStorage.setItem("resourceCode", item.resourceCode);
    },
  },
};
</script>

<style scoped>
.router-link-active {
  text-decoration: none;
}
.iconStyle {
  color: #0357ab !important;
  font-size: 20px;
}
</style>
