<script lang="ts">
import { defineComponent } from "vue";
import { computed } from "vue";
export default defineComponent({
  name: "SystemLayoutSider",
});
</script>

<script setup lang="ts">
import { reactive, ref, watch, h, onMounted } from "vue";
import type { MenuProps } from "ant-design-vue";
import { router } from "@/router/index.ts";
import UserBox from "@/components/Base/Tools/UserBox/index.vue";
import { useMain } from "@/components/Base/Layout/SystemLayout/Sider/hooks/router.ts";
import { useRouterStore } from "@/stores/modules/async-router.ts";
import type { AppRouter } from "@/router/config/index";
import SiderImg from "@/assets/images/index/sider-radar.png";

const routerStore = useRouterStore();
const routers = routerStore.ROUTERS;

const { routerFilter, routerFormat } = useMain();

// 路由表
let menus = ref<Array<AppRouter>>([]);

// 路由表组装
const createMenus = (routerList: Array<AppRouter>) => {
  const validRouter = routerFilter(routerList);
  const useRouter = routerFormat(validRouter);
  return useRouter;
};

// let menuSelectKeys = computed(() => {
//   console.log("router.currentRoute", router.currentRoute.value);
//   return [router.currentRoute.value.name];
// });

// 路由点击
const menuSelectKeys = ref<string[]>([]);

// 点击事件
const handleClick: MenuProps["onClick"] = (e) => {
  const { fullPath } = e.item;
  console.log("fullPath", e.item, routers[0].children);
  console.log("menuSelectKeys", menuSelectKeys);
  if (fullPath != router.currentRoute.value.fullPath) {
    router.push(e.item.fullPath as string);
  }
};

// 当前展开的路由菜单
const routerOpenKeys = ref<string[]>([]);

const handleOpenChange = (openKeys: string[]) => {};

// 路由表初始化
const initMenus = () => {
  //@ts-ignorex
  menus.value = createMenus(routers[0].children as AppRouter[]);
};

// 路由表选中初始化
const initMenuSelectkeys = () => {
  const curRouter = router.currentRoute.value;
  console.log("curRouter", curRouter, routers[0]);
  let key = curRouter.name as string;
  const { hidden } = curRouter.meta;
  if (hidden) {
    const routerGroup = curRouter.matched[1];
    let target = findRouter([routerGroup], key);
    console.log("targetRouter", target);
    let isSelect = true;
    while (isSelect) {
      if (target.meta.hidden) {
        if (!target.parent) {
          isSelect = false;
        } else {
          target = target.parent;
        }
      } else {
        key = target.name;
        isSelect = false;
      }
    }
  }
  menuSelectKeys.value = [key];
};

// 寻找指定路由
const findRouter = (routerList: Array<Record<string, any>>, key: string): any => {
  let router = null;
  for (let i = 0; i < routerList.length; i++) {
    const item = routerList[i];
    if (item.name == key) {
      router = item;
      break;
    }
    if (item.children) {
      router = findRouter(item.children, key);
      if (router) {
        break;
      }
    }
  }
  return router;
};

// 路由表状态初始化
const initStatus = () => {
  const { value } = router.currentRoute;
  routerOpenKeys.value = (value.meta.parentId ? [value.meta.parentId] : []) as string[];
};

const init = () => {
  initMenus();
  initStatus();
  initMenuSelectkeys();
};

const collapsed = ref(false);

onMounted(() => {
  //@ts-ignorex
  init();
});

const prefix = "_system-layout-sider";
</script>

<template>
  <a-layout-sider
    collapsible
    v-model:collapsed="collapsed"
    theme="light"
    :class="prefix"
    :trigger="null"
    width="240"
  >
    <a-menu
      v-model:openKeys="routerOpenKeys"
      v-model:selectedKeys="menuSelectKeys"
      mode="inline"
      :multiple="false"
      :inline-collapsed="collapsed"
      :items="menus"
      @click="handleClick"
      @openChange="handleOpenChange"
    >
    </a-menu>
    <img :src="SiderImg" :class="`${prefix}-marker`" />
  </a-layout-sider>
</template>

<style lang="scss" scoped>
$prefix: "_system-layout-sider";

.#{$prefix} {
  max-height: 100vh;
  overflow: hidden;
  // padding: 10px 10px;
  box-sizing: border-box;
  position: reactive;
  z-index: 10;
  box-shadow: 0px 2px 4px 0px rgba(133, 99, 244, 0.2);
  border-radius: 0px 0px 16px 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(231, 239, 251, 0.5);
  background: rgba(255, 255, 255, 0.6);
  :deep(.ant-layout-sider-children) {
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    .ant-menu-light {
      background-color: transparent;
      margin: 0;
    }
    .ant-menu-item-selected {
      background-color: #e2eaf2;
    }
    .ant-menu-root.ant-menu-inline {
      border-inline-end: none;
    }
  }
  &-header {
    padding-bottom: 15px;
    &__row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      .search-row {
        margin-top: 5px;
        padding: 5px 15px;
        border-radius: 40px;
        color: #333;
        box-sizing: border-box;
        :deep(.ant-input) {
          background-color: transparent;
        }
      }
    }
    &__collapsed {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      &:hover {
        background-color: #f0f0f0;
      }
    }
  }
  &-chats {
    flex: 1;
    width: 100%;
    flex-shrink: 0;
    align-self: stretch;
  }
  &-menus {
    padding-top: 10px;
    width: 100%;
    height: 240px;
    margin-top: auto;
  }
  &-footer {
    width: 100%;
  }
  &-marker {
    width: 339px;
    height: 319px;
    position: absolute;
    bottom: 0;
    left: -121px;
  }
}
</style>
