<script setup lang="ts">
import {
  FilePptOutlined,
  FileSearchOutlined,
  NodeIndexOutlined,
  LogoutOutlined,
  HistoryOutlined,
  StarOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';
import { createVNode, onMounted, ref, watch } from 'vue';
import { useRoute, RouterLink } from "vue-router";
import _ from "lodash";
import { useAuthStore } from '@/stores/auth.store';
import { routeToLogin } from "@/router";
import { Modal } from 'ant-design-vue';

const selectedKeys = ref<string[]>(['/']);
const openKeys = ref<string[]>(['/']);
// 当前路由
const route = useRoute();
// 授权store
const authStore = useAuthStore();

onMounted(() => {
  openKeys.value = getOpenKeys(route.path);
  selectedKeys.value = [route.path];

  watch(
    () => route.path,
    (path: string) => {
      const currentOpenkeys = getOpenKeys(path);
      openKeys.value = _.uniq(_.concat(openKeys.value, currentOpenkeys));
      selectedKeys.value = openKeys.value;
    }
  );
});

function getOpenKeys(path: string): string[] {
  const parts = _.dropRight(path.split('/').filter(x => x != '').map(x => '/'+x), 1);
  if (parts.length == 0) {
    return ["/"];
  }
  let openKeys = parts.reduce((acc, item) => {
    if (acc.length == 0) {
      return acc.concat([item]);
    }
    return acc.concat([acc[acc.length-1] + item]);
  }, [] as string[]);
  openKeys.unshift("/");
  return openKeys;
}

function logout(e: MouseEvent) {
  authStore.logout();
  routeToLogin();
  e.stopPropagation();
}

function logoutConfirm(e: MouseEvent) {
  Modal.confirm({
    title: '正在退出系统，退出请点击确认。',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      logout(e);
    }
  });
}
</script>

<template>
  <a-menu
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
  >
    <a-sub-menu key="/report">
      <template #icon>
        <FilePptOutlined />
      </template>
      <template #title>报告管理</template>
      <a-menu-item key="/report/index">
        <RouterLink to="/report/index">我的报告</RouterLink>
      </a-menu-item>
      <a-menu-item key="/report/template">
        <RouterLink to="/report/template">模板管理</RouterLink>
      </a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="/search">
      <template #icon>
        <FileSearchOutlined />
      </template>
      <template #title>搜索</template>
      <a-menu-item key="/search/index">
        <RouterLink to="/search/index">智能搜索</RouterLink>
      </a-menu-item>
      <a-menu-item key="/search/advanced/index">
        <RouterLink to="/search/advanced/index">高级搜索</RouterLink>
      </a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="/knowledgeGraph">
      <template #icon>
        <NodeIndexOutlined />
      </template>
      <template #title>知识导航</template>
      <a-menu-item key="/knowledgeGraph/search">
        <RouterLink to="/knowledgeGraph/search">建筑工程及工程设计</RouterLink>
      </a-menu-item>
    </a-sub-menu>
    <a-menu-item key="/history">
      <template #icon>
        <history-outlined />
      </template>
      <RouterLink to="/history">历史记录</RouterLink>
    </a-menu-item>
    <a-menu-item key="/favorite">
      <template #icon>
        <star-outlined />
      </template>
      <RouterLink to="/favorite">我的收藏</RouterLink>
    </a-menu-item>
    <a-menu-item key="/logout" @click="logoutConfirm">
      <template #icon>
        <logout-outlined />
      </template>
      退出系统
    </a-menu-item>
  </a-menu>
</template>
