<template>
  <div class="aside">
    <div class="scrollbar">
      <el-scrollbar>
        <el-menu
          :default-openeds="['/BusinessManage']"
          :default-active="route.path"
          active-text-color="#1890FF"
          background-color="#fff"
          text-color="#000"
          router
        >
          <template v-for="(item, index) in asideRouter[0].children" :key="index">
            <el-sub-menu
              :index="'/' + item.path"
              v-if="item.children && item.children.filter((el) => !el.meta.hide).length > 0"
            >
              <template #title>
                <el-icon v-if="item.meta.title === '门店管理'">
                  <Notebook />
                </el-icon>
                <span> {{ item.meta.title }}</span>
              </template>
              <el-menu-item
                v-for="(ele, idx) in item.children.filter((el) => !el.meta.hide)"
                :index="'/' + item.path + '/' + ele.path"
                :key="idx"
              >
                {{ ele.meta.title }}</el-menu-item
              >
            </el-sub-menu>
            <el-menu-item :index="item.redirect || '/' + item.path" v-else-if="!item.meta.hide">
              <el-icon v-if="item.meta.title === '门店管理'">
                <Notebook />
              </el-icon>
              <el-icon v-if="item.meta.title === '工作台'">
                <Calendar />
              </el-icon>
              <el-icon v-if="item.meta.title === '企业管理'">
                <OfficeBuilding />
              </el-icon>
              <el-icon v-if="item.meta.title === 'C端管理'">
                <User />
              </el-icon>
              <el-icon v-if="item.meta.title === '门店审核'">
                <Tickets />
              </el-icon>
              <el-icon v-if="item.meta.title === '企业审核'"><Memo /></el-icon>
              <span>{{ item.meta.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { routes } from '@/router/index'
import { useUserStore } from '@/stores/user'

const isAdmin =
  useUserStore().userInfo?.jurisdictions &&
  useUserStore().userInfo?.jurisdictions?.findIndex((item) => item.code === 'superadmin') !== -1

console.log(useUserStore().userInfo)
console.log(isAdmin)

const filterRoute = (arr) => {
  const arr1 = JSON.parse(JSON.stringify(arr))
  let tempArr = []
  tempArr = arr1.filter((item) => !item.meta?.needAdmin)
  arr1.forEach((item) => {
    if (item.children && item.children.length > 0) {
      item.children = filterRoute(item.children)
    }
  })
  return tempArr
}

const asideRouter = isAdmin ? routes : filterRoute(routes)
console.log('asideRouter', asideRouter)
console.log('routes', routes)
console.log(filterRoute(routes))

const route = useRoute()
</script>

<style lang="scss" scoped>
.aside {
  height: calc(100vh - 60px);
  background-color: #fff;
  padding-top: 20px;

  .scrollbar {
    height: calc(100vh - 100px);
  }

  .el-scrollbar {
    background-color: #fff;

    .el-menu-item.is-active {
      background-color: rgba(24, 144, 255, 0.1);
    }

    .el-menu-item:hover {
      background-color: rgba(24, 144, 255, 0.1);
    }

    :deep(.el-sub-menu__title:hover) {
      background-color: rgba(24, 144, 255, 0.1);
    }
  }
}
</style>
