<template>
  <div class="menu-wrapper">
    <template v-for="item in routes">
      <router-link
        v-if="!item.children"
        :to="item.url"
        :key="item.id"
        @click.native="childFn(item.url,item.id,item.name)"
      >
        <el-menu-item
          :index="item.id"
          :class="{'submenu-title-noDropdown':!isNest}"
          class="indexBorder indexBottom"
          @click="getLastSlideText"
        >
          <i :class="'icon iconfont'+' '+item.icon"></i>
          <span v-if="item.name" slot="title" class="test">{{item.name}}</span>
        </el-menu-item>
      </router-link>

      <el-submenu v-else :index="item.id" :key="item.id">
        <template slot="title">
          <i :class="'icon iconfont'+' '+item.icon"></i>
          <span v-if="item.name" slot="title">{{item.name}}</span>
        </template>

        <template v-for="child in item.children">
          <sidebar-item
            :is-nest="true"
            class="nest-menu"
            v-if="child.children"
            :routes="[child]"
            :key="child.id"
          ></sidebar-item>
          <router-link
            v-else
            :to="child.url"
            :key="child.id"
            @click.native="childFn(child.url,child.id,child.name)"
          >
            <el-menu-item :index="child.id" class="indexTop" @click="getLastSlideText">
              <i :class="'icon iconfont'+' '+item.icon"></i>
              <span v-if="child.name" slot="title">{{child.name}}</span>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import { producers } from "@/api/login/login";
export default {
  name: "SidebarItem",
  props: {
    routes: {
      type: Array
    },
    isNest: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // list: this.routes
      menuRoutes:[],
    }
  },
  created() {
    if(this.routes){
      this.menuRoutes = this.routes;
    }else{
      this.menuRoutes = JSON.parse(window.localStorage.getItem('routes'));
    }
    console.log(this.menuRoutes,'routes')
    // for (let i = 0; i < this.routes.length; i++) {
    //   if (this.routes[i].children.length === 0) {
    //     this.routes[i].alwaysShow = false
    //   }
    // }
  },
  methods: {
    // i报表
    childFn(hrefIfr, id, orders) {

      console.log(hrefIfr,5555)
      let objData = {
        action: "page_Access_Log",
        object: {
          systemCode: "40",
          systemName: "云南省粮食局管理平台",
          userId: localStorage.getItem("idportal"),
          userName: localStorage.getItem('userName'),
          userDeviceIp: localStorage.getItem("Ip"),
          state: 1,
          logoutTime: "2019-02-21T03:05:14.604Z",
          pageName:orders,
          pageCode:id,
          userAccount:sessionStorage.getItem("LoginCode").username
        }
      };
      
      producers(objData).then(res => {
        
      });
      
      if (hrefIfr.length > 30) {
        var newHrefLast1;
        const hrefLast1 = hrefIfr.substr(hrefIfr.indexOf("?") + 1); //问号后边所有的参数
        if (hrefLast1.search("breadCrumbs") == -1) {
          newHrefLast1 = hrefLast1.substring(hrefLast1.indexOf("=") + 1);
        } else {
          newHrefLast1 = hrefLast1.substring(
            hrefLast1.indexOf("=") + 1,
            hrefLast1.lastIndexOf("&")
          );
        }
        localStorage.setItem("href", newHrefLast1.replace(/"/g, "")); //url地址
        console.log(newHrefLast1,887)
      } else {
        return;
      }
    },
    hasKey(item) {
      console.log(item);
    },
    // hasOneShowingChildren(children) {
    //   const showingChildren = children.filter(item => {
    //     return !item.hidden
    //   })
    //   if (showingChildren.length === 1) {
    //     return true
    //   }
    //   return false
    // },
    getLastSlideText(e) {
      let arr = [];
      let arrVal = [];
      let loop = function(e) {
        if (e.parentMenu) {
          arr.unshift(e.$el.textContent.trim().split(" ")[0]);
          loop(e.parentMenu);
        } else {
          return arr;
        }
      };
      loop(e);
      window.sessionStorage.setItem("levelList", arr);
    }
  }
};
</script>
<style lang="scss" scoped>
.menu-wrapper {
  .icon {
    color: #41afb8;
  }
}
</style>
<style>
.el-submenu__icon-arrow {
  right: 8px;
}
.el-submenu .el-submenu__title {
  border-bottom: 1px transparent solid;
  /* border-image:linear-gradient(to left,#fbfcfd,#e0ebf2,#fbfcfd) 1 10; */
  border-image: linear-gradient(to left, #eef2f6, #dfeaf2, #eef2f6) 1 10;
  box-sizing: border-box;
  /* border-bottom: 1px solid #dfeaf2;
  border-top: 1px solid #fff; */
}
.el-menu-item {
  border-top: 1px transparent solid;
  border-image: linear-gradient(to left, #eef2f6, #dfeaf2, #eef2f6) 1 10;
  box-sizing: border-box;
}
.indexBorder {
  border-top: none;
  border-bottom: 1px transparent solid;
  border-image: linear-gradient(to left, #eef2f6, #dfeaf2, #eef2f6) 1 10;
  box-sizing: border-box;
}
/* .router-link-exact-active .indexBottom{
  border-bottom: none;
}
.router-link-exact-active .indexTop{
  border-top: none;
}
.router-link-exact-active + a li.indexTop{
  border-top: none;
}
.nest-menu .el-submenu .el-submenu__title{
  border-bottom: none;
} */
</style>