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

<script>
import { menuChange } from '@/api/login/login.js'
export default {
  name: "menuItem",
  props: {
    routes: {
      type: Array
    }
  },
  data() {
    return {};
  },
  created() {
    console.log(this.routes);
  },
  methods: {
    handleSelect(item) {
			console.log(item)
			// this.getUserIP(function(ip) {
			let params = {
				action: 'page_Access_Log',
				object: {
					systemName: '粮食流通动态监测',
					userId: sessionStorage.getItem('userCode'),
					userName: sessionStorage.getItem('userName'),
					userDeviceIp: sessionStorage.getItem('curIp'),
					state: 1,
					logoutTime: new Date(),
					pageName: item.resourceName,
					pageCode: item.resourceCode
				}
			}
			menuChange(params)
			// })
		}
  }
};
</script>

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