<template>
  <router-view />
</template>

<script lang="ts" setup>
import router from '@/router'
import { watch, onMounted, ref } from 'vue'
import { useAppStore } from '@/stores/modules/app'
import { RouteLocationNormalizedLoaded } from 'vue-router'
import { useUserStore } from '@/stores/modules/user/index'
const appStore = useAppStore()
const breadcrumbs = ref<string[]>([])
const userStore = useUserStore()

const rolesIdentify = computed(() => userStore.getRoles?.map(el => el?.identify))

provide('rolesIdentify', rolesIdentify)
// get init breadcrumb
onMounted(() => {
  setActiveMenu(router.currentRoute.value)
  getBreadcrumbs(router.currentRoute.value)
})
// 监听当前路由的变化
watch(router.currentRoute, (newValue, oldValue) => {
  // 激活菜单
  if (newValue.meta.active_menu) {
    appStore.setActiveMenu(newValue.meta.active_menu)
  }
  setActiveMenu(newValue)
  getBreadcrumbs(newValue)
})
const setActiveMenu = route => {
  if (route.path !== '/') {
    // 如果是内页，并且设置激活菜单
    if (route.meta.active_menu) {
      appStore.setActiveMenu(route.meta.active_menu)
    } else {
      appStore.setActiveMenu(route.path)
    }
  }
}

// get breadcrums
function getBreadcrumbs(newRoute: RouteLocationNormalizedLoaded) {
  breadcrumbs.value = []
  breadcrumbs.value.push('首页')
  newRoute.matched.forEach(m => {
    if (m.meta.title !== undefined) {
      breadcrumbs.value.push(m.meta?.title as string)
    }
  })
}
</script>

<style lang="scss">
::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: #ebeef5;
}

::-webkit-scrollbar-thumb {
  border-radius: 30px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ccc;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba($color: #000000, $alpha: .5);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}
</style>
