<template>
  <el-menu
    class="sidebar-el-menu"
    background-color="#000"
    text-color="#f2f2f2"
    active-text-color="#20a0ff"
    :collapse-transition="false"
    :default-active="onRoutes"
    unique-opened
    :collapse="collapsed"
  >
    <template v-for="item in menuArr" :key="item.id">
      <template v-if="!item.children || item.children.length == 0">
        <el-menu-item :index="item.path" @click="(menu) => navTo(menu, item)">
          <template #title>
            <el-icon>
              <my-icon :type="item.icon"></my-icon>
            </el-icon>
            <span>{{ item.title }}</span>
          </template>
        </el-menu-item>
      </template>
      <template v-else>
        <el-sub-menu :index="item.id + ''">
          <template #title>
            <el-icon>
              <my-icon :type="item.icon" :style="{ color: '#fff' }"></my-icon>
            </el-icon>
            <span class="sub-title">{{ item.title }}</span>
          </template>
          <template v-for="subItem in item.children" :key="subItem.id">
            <template v-if="!subItem.children || subItem.children.length == 0">
              <el-menu-item
                :index="subItem.path"
                @click="(menu) => navTo(menu, subItem)"
              >
                <template #title>
                  <span>{{ subItem.title }}</span>
                </template>
              </el-menu-item>
            </template>
            <template v-else>
              <el-sub-menu :index="subItem.id + ''">
                <template #title>
                  <span>{{ subItem.title }}</span>
                </template>
                <template
                  v-for="thirdItem in subItem.children"
                  :key="thirdItem.id"
                >
                  <el-menu-item
                    :index="thirdItem.path"
                    @click="(menu) => navTo(menu, thirdItem)"
                  >
                    <template #title>
                      <span>{{ thirdItem.title }}</span>
                    </template>
                  </el-menu-item>
                </template>
              </el-sub-menu>
            </template>
          </template>
        </el-sub-menu>
      </template>
    </template>
  </el-menu>
</template>
<script>
export default {
  name: "sideMenuCom",
};
</script>
<script setup>
import { onMounted, reactive, ref } from "@vue/runtime-core";
import { commonService } from "../../ApiService/commonService";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
const props = defineProps({
  collapsed: {
    type: Boolean,
    required: true,
    default: false,
  },
});
let menuArr = reactive([]);
let onRoutes = ref();
const $router = useRouter();
const $route = useRoute();

onMounted(() => {
  // const menus = [
  //   {
  //     icon: "icon-shezhi",
  //     isTableShow: 1,
  //     path: "",
  //     title: "用户中心",
  //     type: 2,
  //     webId: 61,
  //   },
  // ];
  // menuArr.push(...menus);
  // onRoutes.value = $route.path.replace("/", "");
  fetchSidebarData().then((res) => {
    menuArr.push(...res);

    onRoutes.value = $route.path;
  });
});
onBeforeRouteUpdate((to) => {
  onRoutes.value = to.path;
});

const fetchSidebarData = () => {
  return new Promise((resolve) => {
    commonService.sidebarData().then((res) => {
      if (res.code == 0) {
        resolve(res.data.children);
      }
    });
  });
};
const navTo = (menu, item) => {
  $router.push({
    path: item.path,
    query: { wId: item.webId, pageType: item.type },
  });
};
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
