<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { SimpleScrollbar } from '@sa/materials';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useRouterPush } from '@/hooks/common/router';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
import { api_permission } from '@/api';

defineOptions({
  name: 'VerticalMenu'
});



const route = useRoute();
const appStore = useAppStore();
const themeStore = useThemeStore();
const routeStore = useRouteStore();
const { routerPushByKeyWithMetaQuery } = useRouterPush();

// ===================================== 开源框架权限中转， 临时处理 | S
// author chengtsui
// time 2024/10/18

let keys = reactive<string[]>([]);
let routes = reactive([]);
const getPermission = async () => {
  await api_permission().then(res => {
    if (res.data && res.data.code === 200) {
      keys = res.data.data.map(item => item.label);
      console.log("________________________  routerList", keys)

      let _routes = [];

      // 拿
      for (let key of keys) for (let router of routeStore.menus) {
        if (key.includes(router.key)) {
          !key.includes('_') && _routes.push(router);
          break;
        }
      }

      // 重新排序
      ['home', 'algorithmconfiguration', 'videoanalysistask', 'webcamconfiguration', 'alarmcenter','manage'].forEach(orderKey => {
        _routes.forEach(item => item.key.includes(orderKey) && routes.push(item))
      });
    }
  })
}



// home 首页
// algorithmconfiguration 算法配置
// videoanalysistask 视频分析任务
// webcamconfiguration 摄像头配置

// manage 系统管理
// manage_role 角色管理
// manage_user 用户管理

// alarmcenter 报警中心
// alarmcenter_alarmlog 报警日志
// alarmcenter_alarmpush 报警推送
// alarmcenter_alarmreminder 报警提醒

// ===================================== 开源框架权限中转， 临时处理 | E

const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);

const selectedKey = computed(() => {
  const { hideInMenu, activeMenu } = route.meta;
  const name = route.name as string;

  const routeName = (hideInMenu ? activeMenu : name) || name;

  return routeName;
});

const expandedKeys = ref<string[]>([]);

function updateExpandedKeys() {

  if (appStore.siderCollapse || !selectedKey.value) {
    expandedKeys.value = [];
    return;
  }

  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);

}

watch(
  () => route.name,
  () => {
    updateExpandedKeys();
  },
  { immediate: true }
);

onMounted(() => {
  getPermission();
  console.log("routeStore.menu ==================== routeStore.menu", routeStore.menus)
});
</script>

<template>
  <!-- style="border: 1px solid red;" -->
  <!--  -->
  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
    <SimpleScrollbar>
      <NMenu v-model:expanded-keys="expandedKeys" mode="vertical" :value="selectedKey"
        :collapsed="appStore.siderCollapse" :collapsed-width="themeStore.sider.collapsedWidth" :collapsed-icon-size="22"
        :options="routes" :inverted="inverted" :indent="18" @update:value="routerPushByKeyWithMetaQuery" />
    </SimpleScrollbar>
  </Teleport>
</template>

<style scoped></style>
