<script setup lang="ts">
import Logo from "./logo.vue";
import { useRoute, useRouter } from "vue-router";
import { emitter } from "@/utils/mitt";
import { transformI18n } from "@/plugins/i18n";
// import SidebarItem from "./sidebarItem.vue";
// import leftCollapse from "./leftCollapse.vue";
import { useNav } from "@/layout/hooks/useNav";
import { responsiveStorageNameSpace } from "@/config";
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
import { findRouteByPath, getParentPaths } from "@/router/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";

const route = useRoute();
const router = useRouter();
const showLogo = ref(
  storageLocal().getItem<StorageConfigs>(
    `${responsiveStorageNameSpace()}configure`
  )?.showLogo ?? true
);

const {
  device,
  pureApp,
  isCollapse,
  menuSelect
  // toggleSideBar
} = useNav();

const subMenuData = ref([]);

const menuData = computed(() => {
  return pureApp.layout === "mix" && device.value !== "mobile"
    ? subMenuData.value
    : usePermissionStoreHook().wholeMenus;
});

const loading = computed(() =>
  pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
);

const defaultActive = computed(() =>
  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
);

const activeName = ref(route.name || "Workbench");

function getSubMenuData() {
  let path = "";
  path = defaultActive.value;
  subMenuData.value = [];
  // path的上级路由组成的数组
  const parentPathArr = getParentPaths(
    path,
    usePermissionStoreHook().wholeMenus
  );
  // 当前路由的父级路由信息
  const parenetRoute = findRouteByPath(
    parentPathArr[0] || path,
    usePermissionStoreHook().wholeMenus
  );
  if (!parenetRoute?.children) return;
  subMenuData.value = parenetRoute?.children;
}

// 改变路由
function changeRoute(routes) {
  console.log("changeRoute_routes", routes);
  router.push({ path: routes.path });
  activeName.value = routes.name;
}

// const fetchMenuIcon = routes => {
//   return workbenchIcon;
// };

watch(
  () => [route.path, usePermissionStoreHook().wholeMenus],
  () => {
    if (route.path.includes("/redirect")) return;
    getSubMenuData();
    menuSelect(route.path);
  }
);

onMounted(() => {
  getSubMenuData();

  emitter.on("logoChange", key => {
    showLogo.value = key;
  });
});

onBeforeUnmount(() => {
  // 解绑`logoChange`公共事件，防止多次触发
  emitter.off("logoChange");
});
</script>

<template>
  <div v-loading="loading" :class="['sidebar-vertical-container']">
    <Logo :collapse="isCollapse" />
    <el-scrollbar
      wrap-class="scrollbar-wrapper"
      :class="[device === 'mobile' ? 'mobile' : 'pc']"
    >
      <!-- <el-menu
        router
        unique-opened
        mode="vertical"
        class="select-none outer-most"
        :collapse="isCollapse"
        :default-active="defaultActive"
        :collapse-transition="false"
      >
        <sidebar-item
          v-for="routes in menuData"
          :key="routes.path"
          :item="routes"
          :base-path="routes.path"
          class="select-none outer-most"
        />
      </el-menu> -->

      <ul class="menu_box">
        <li
          class="text-center"
          :class="[activeName === routes.name ? 'active' : '']"
          v-for="routes in menuData"
          :key="routes.path"
          @click="changeRoute(routes)"
        >
          <div class="flex justify-center">
            <i :class="['iconfont', routes.meta?.icon || 'icon-morencaidan']" />
          </div>
          <p>{{ transformI18n(routes.meta.title) }}</p>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
$--noneSelectedColor: rgb(255 255 255 / 80%);

:deep(.el-loading-mask) {
  opacity: 0.45;
}

.sidebar-vertical-container {
  width: 96px;
  background-color: #05102f;
  background-image: url("@/assets/svg/bgFooter.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  border-radius: 12px;

  .menu_box {
    font-size: 14px;
    color: $--noneSelectedColor;
    text-align: center;

    & > li {
      padding-top: 16px;
      cursor: pointer;

      & > p {
        padding-top: 6px;
      }

      .iconfont {
        width: 32px;
        height: 32px;
        font-size: 32px;
        line-height: 32px;
        border-radius: 8px;
      }

      &.active {
        color: #fff;

        /* inset: 0 8px;
        margin: 4px 0; */

        /* clear: both;
        content: "";
        background: var(--el-color-primary) !important;
        border-radius: 3px; */
        .iconfont {
          background-color: rgb(255 255 255 / 20%);
        }
      }
    }
  }
}
</style>
