<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"
        :key="firstIndex"
      >
        <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(secondItem)"
            :index="secondItem.resourceUrl"
            :key="secondIndex"
            v-if="secondItem.children.length == 0"
            class="menuSecondaryWrap"
          >
            <span class="iconfont icondian iconStyle"></span>

            <span slot="title">{{ secondItem.resourceName }}</span>
          </el-menu-item>
          <el-submenu
            v-else
            :index="firstIndex + '-' + secondIndex"
            :key="secondIndex"
            class="menuSecondaryWrap"
          >
            <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">
              <el-menu-item
                @click="handleSelect(thirdItem)"
                :index="thirdItem.resourceUrl"
                :key="thirdIndex"
                v-if="thirdItem.children.length == 0"
                class="menuSecondaryWrap"
              >
			  <!-- {{ thirdItem.resourceName }} -->
			    <span class="iconfont icondian iconStyle"></span>
               <span slot="title">{{ thirdItem.resourceName }}</span>
              </el-menu-item>
              <el-submenu
                v-else
                :index="firstIndex + '-' + secondIndex + '-' + thirdIndex"
                :key="thirdIndex"
				class="menuSecondaryWrap"
              >
			  <template slot="title">
			    <span class="iconfont icondian iconStyle"></span>
			    <span v-if="thirdItem.resourceName" slot="title">{{
			      thirdItem.resourceName
			    }}</span>
			  </template>
			    <template v-for="(fourthItem, fourthIndex) in thirdItem.children">
                <el-menu-item
                  @click="handleSelect(fourthItem)"
                  :index="fourthItem.resourceUrl"
                  :key="fourthIndex"
                  v-if="fourthItem.children.length == 0"
                  class="menuSecondaryWrap"
                >
				<span class="iconfont icondian iconStyle"></span>
				 <span slot="title">{{ fourthItem.resourceName }}</span>
				</el-menu-item>
					<el-submenu
					  v-else
					  :index="
						firstIndex +
						'-' +
						secondIndex +
						'-' +
						thirdIndex +
						'-' +
						fourthIndex
					  "
					  :key="fourthIndex"
					>
					  <template slot="title">
						<span class="iconfont icondian iconStyle"></span>
						<span v-if="fourthItem.resourceName" slot="title">{{
						  fourthItem.resourceName
						}}</span>
					  </template>
					  <template
						v-for="(fifthItem, fifthIndex) in fourthItem.children"
					  >
						<el-menu-item
						  @click="handleSelect(fifthItem)"
						  :index="fifthItem.resourceUrl"
						  :key="fifthIndex"
						  v-if="fifthItem.children.length == 0"
						  class="menuSecondaryWrap"
						>
						<span class="iconfont icondian iconStyle"></span>
						 <span slot="title">{{ fifthItem.resourceName }}</span>
						</el-menu-item>
						<el-submenu
						  v-else
						  :index="
							firstIndex +
							'-' +
							secondIndex +
							'-' +
							thirdIndex +
							'-' +
							fourthIndex+
							'-' +
							fifthIndex
						  "
						  :key="fifthIndex"
						>
						  <template slot="title">
							<span class="iconfont icondian iconStyle"></span>
							<span v-if="fifthItem.resourceName" slot="title">{{
							  fifthItem.resourceName
							}}</span>
						  </template>
						  <template
							v-for="(sixthItem, sixthIndex) in fifthItem.children"
						  >
							<el-menu-item
							  @click="handleSelect(sixthItem)"
							  :index="sixthItem.resourceUrl"
							  :key="sixthIndex"
							  v-if="sixthItem.children.length == 0"
							  class="menuSecondaryWrap"
							>
							<span class="iconfont icondian iconStyle"></span>
							 <span slot="title">{{ sixthItem.resourceName }}</span>
							</el-menu-item>
							
						  </template>
						</el-submenu>
					  </template>
					</el-submenu>
				</template>
              </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('9990000-==========---')
      sessionStorage.setItem("searchData", null);
      sessionStorage.setItem("searchDataTab1", null);
      sessionStorage.setItem("pageForm", null);
      sessionStorage.setItem("resourceCode", item.resourceCode);

      let codeData = {
        resourceCode: item.resourceCode,
        userId: sessionStorage.getItem("userCode"),
      };
      // authorityControl(codeData).then(res => {
      //   let buttonNameList = []
      //     res.data.forEach(item => {
      //       buttonNameList.push(item.resourceName)
      //     })
      //   sessionStorage.removeItem("buttonNameList")
      //   sessionStorage.setItem("buttonNameList",JSON.stringify(buttonNameList))
      //
      // })

      // 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;
}
</style>
