<template>
  <div class="menue">
    <div class="system-title flex-center">
      <img src="@/assets/images/index.png" alt="" />
      <span>baseSystem</span>
    </div>
    <el-menu
      router
      :default-active="router.currentRoute.value.path"
      :unique-opened="true">
      <!-- <el-menu-item index="/main"
        ><el-icon> <HomeFilled /> </el-icon>首页</el-menu-item
      > -->
      <template v-for="(item, index) in menueData">
        <template v-if="!item.children">
          <el-menu-item
            :index="item.path"
            v-if="hasParent(item)"
            :class="{
              routerActive: router.currentRoute.value.path === item.path,
            }">
            <template v-if="item.meta?.icon?.type === 'elem'">
              <el-icon>
                <component :is="item.meta!.icon.value"> </component>
              </el-icon>
            </template>
            <template v-if="iconType.includes(item.meta?.icon?.type)">
              <img
                :src="'/assets/icon/' + item.meta?.icon?.value"
                alt=""
                class="nav-icon" />
            </template>
            {{ item.name }}
          </el-menu-item>
        </template>
        <template v-else
          ><el-sub-menu :index="String(index)" v-if="hasParent(item)">
            <template #title>
              <template v-if="item.meta?.icon?.type === 'elem'">
                <el-icon>
                  <component :is="item.meta!.icon.value"> </component>
                </el-icon>
              </template>
              <template v-if="iconType.includes(item.meta?.icon?.type)">
                <img
                  :src="'/assets/icon/' + item.meta?.icon?.value"
                  alt=""
                  class="nav-icon" /> </template
              >{{ item.name }}
            </template>

            <template v-for="(childrenItem, index) in item.children">
              <el-menu-item
                :index="childrenItem.path"
                v-if="hasChild(item, childrenItem)"
                :class="{
                  routerActive:
                    router.currentRoute.value.path === childrenItem.path,
                }">
                <template v-if="childrenItem.meta?.icon?.type === 'elem'">
                  <el-icon>
                    <component :is="childrenItem.meta!.icon.value"> </component>
                  </el-icon>
                </template>
                <template
                  v-if="iconType.includes(childrenItem.meta?.icon?.type)">
                  <img
                    :src="'/assets/icon/' + childrenItem.meta?.icon?.value"
                    alt=""
                    class="nav-icon" />
                </template>
                {{ childrenItem.name }}
              </el-menu-item>
            </template>
          </el-sub-menu></template
        >
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { RouteRecordRaw } from "vue-router";
import { userInfor } from "@/store/user/user";
import router from "@/routers/index";
import { ref } from "vue";
import { systemMenueType } from "@/types/systemMenue";
const props = withDefaults(
  defineProps<{
    menueData: RouteRecordRaw[];
    expand?: boolean;
  }>(),
  {
    expand: false,
  }
);

const iconType = ref(["svg", "png", "jgp"]);
const globalUserInfor = userInfor();
let userMenue = globalUserInfor.userInfor.routerMenue;

function hasParent(item: RouteRecordRaw) {
  let parent = userMenue?.find((routerItem) => routerItem.name === item.name);
  let childn = item.children?.find((childrenItem) =>
    userMenue?.find((userItem) => userItem.name === childrenItem.name)
  );
  return parent || childn;
}
function hasChild(parentItem: RouteRecordRaw, item: RouteRecordRaw) {
  let parent = userMenue?.find(
    (routerItem) => routerItem.name === parentItem.name
  );
  if (parent) {
    return parent?.children?.find(
      (userMenueItem) => userMenueItem.name === item.name
    );
  } else {
    return userMenue?.find((userMneueItem) => userMneueItem.name === item.name);
  }
}
</script>
<style lang="scss" scoped>
.parent-list {
  padding: 5px 10px;
  position: relative;

  .list-border-left {
    position: absolute;
    left: 4px;
    top: 50%;
    height: 0;
    border-left: 4px solid #66cccc;
    border-radius: 15px;
    transition: all 0.3s;
    transform: translateY(-50%);
  }

  &:hover .list-border-left {
    height: 70%;
  }
}

.menue {
  // box-shadow: #000 -25px 0 35px;
  width: 200px;
  height: 100vh;
  overflow-y: auto;
  position: absolute;
  left: 0;
  z-index: 2;
}

.routerActive {
  background-color: #f1f3f4;
}

.system-title {
  font-size: 20px;
  font-weight: bold;
  height: 95px;
  display: flex;
  position: relative;
  flex-direction: column;

  img {
    width: 60px;
  }

  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
  }
}
.nav-icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  margin-right: 10px;
}
</style>
