<!--
 * @Author: xiejiang
 * @Date: 2024-11-11 09:38:40
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 22:18:14
 * @Description: 
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <t-menu
    :collapsed="isCollapse"
    width="208px"
    :class="'collapse' + isCollapse ? 'active' : ''"
    :value="activeMenu"
    expand-mutex
    :default-value="defaultMenu"
    v-model:expanded="expanded"
  >
    <SubMenu :menu-list="menuList" />
  </t-menu>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/modules/auth'
import { useGlobalStore } from '@/stores/modules/global'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'

const route = useRoute()

const authStore = useAuthStore()
const globalStore = useGlobalStore()
const menuList = computed(() => authStore.authMenuListGet)
const activeMenu = computed(() => authStore.menuSign)
const isCollapse = computed(() => globalStore.isCollapse)
const expanded = ref<string[]>([])
const defaultMenu = ref('')

// 设置展开菜单
const expandedFunc = (name: string) => {
  expanded.value = [menuList.value.find(item => item.children?.some(em => em.menuSign === name))?.menuSign] as string[]
}

watch(activeMenu, val => {
  expandedFunc(val)
})

onMounted(() => {
  const name = route.name as string
  expandedFunc(name)
  defaultMenu.value = expanded.value[0]
})
</script>
<style lang="less">
.t-default-menu .reset-menu-item.t-is-active::after {
  background: none;
}

.t-default-menu.t-is-collapsed .t-menu .t-menu__item {
  justify-content: flex-start !important;
}

.t-default-menu .t-menu__item .t-icon {
  width: 16px !important;
  height: 16px !important;
}

.t-default-menu {
  height: calc(100% - 112px) !important;
  font-size: 13px;

  .t-submenu {
    > .t-menu__item {
      .t-menu__content {
        font-weight: 700;
      }

      > .t-icon {
        font-weight: 400;
      }
    }

    .t-is-active {
      color: var(--td-brand-color);

      > .t-icon {
        color: var(--td-brand-color);
      }
    }
  }

  .t-menu__item {
    height: 48px;
    line-height: 48px;
    color: var(--td-font-gray-1);
  }

  .t-default-menu.t-is-collapsed {
    width: 52px !important;
  }

  .t-default-menu__inner .t-menu {
    padding: var(--td-comp-paddingTB-l) 0;
  }

  // .t-default-menu .t-menu__item.t-is-opened {
  //   // color: var(--td-brand-color) !important;
  //   font-weight: 700;

  //   .t-icon {
  //     font-weight: 400;
  //   }
  // }

  .t-is-active {
    color: var(--td-brand-color);
  }

  .t-is-collapsed {
    .t-menu__item {
      border-radius: 0 8px 8px 0;
    }

    .t-is-opened {
      color: var(--td-white);
      background-color: var(--td-brand-color) !important;
      border-radius: 0 8px 8px 0;

      .t-icon {
        color: var(--td-white) !important;
      }
    }

    .t-menu__item.t-is-opened .t-icon {
      color: var(--td-brand-color);
    }

    .t-menu__item.t-is-active:not(.t-is-opened) {
      color: var(--td-white);
      background-color: var(--td-brand-color) !important;

      .t-icon {
        color: var(--td-white) !important;
      }
    }
  }
}
</style>
