<template>
  <div class="sider" style="width: 100%; height: calc(100vh - 60px)">
    <a-skeleton
      :style="{ padding: collapsed ? '10px' : '20px' }"
      v-if="menuStore.loading === 'ing'"
      :animation="true"
    >
      <a-skeleton-line :rows="8" :line-height="30" :line-spacing="20" />
    </a-skeleton>
    <a-empty
      style="margin-top: 40%"
      v-if="menuStore.loading === 'done' && menuStore.showMenus.length === 0"
    >
      菜单权限为空
    </a-empty>
    <a-menu
      v-else-if="menuStore.loading === 'done'"
      :show-collapse-button="!smallScreen"
      style="width: 200px; height: 100%"
      :auto-open="true"
      v-model:selected-keys="selectedKeys"
      v-model:collapsed="collapsed"
      @menu-item-click="handleClick"
      class="un-select"
    >
      <template v-for="item in menuStore.showMenus" :key="item.path">
        <a-sub-menu v-if="item.children && item.children.length > 0">
          <template #title
            ><i :class="item.icon" style="width: 28px" aria-hidden="true"></i>
            <span>{{ item.name }}</span></template
          >
          <a-menu-item :key="child.path" v-for="child in item.children" style="padding-left: 26px">
            <span>{{ child.name }}</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item v-else :key="item.path">
          <i :class="item.icon" style="width: 28px" aria-hidden="true"></i>
          <span>{{ item.name }}</span>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>
<script setup lang="ts">
import { useRouter, onBeforeRouteUpdate, RouteLocationNormalized } from 'vue-router'
import { ref } from 'vue'
import { useMenuStore } from '@/store/menu'
import useMenu from '../m-header/use-menu'

const router = useRouter()
const selectedKeys = ref([router.currentRoute.value.path])
const menuStore = useMenuStore()
const { smallScreen, collapsed } = useMenu()

onBeforeRouteUpdate((to: RouteLocationNormalized) => {
  selectedKeys.value = [to.path]
})

const handleClick = (key: string) => {
  router.push(key)
}
</script>
<style lang="scss">
.sider {
  .arco-menu-inner {
    width: 100%;
    // padding-right: 6px !important;
    // overflow-y: hidden;
    overflow-y: auto;
    // &:hover {
    // padding-right: 0 !important;
    // overflow-y: auto;
    // }
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      width: 6px;
      background-color: var(--color-menu-light-bg);
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      border-radius: 6px;
      background-color: var(--color-menu-light-bg);
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #dfe0e2;
      cursor: pointer;
      &:hover {
        background-color: #d1d2d4;
      }
    }
  }
}

// 设置暗黑模式下spin的背景色透明
body[arco-theme='dark'] {
  .sider {
    .arco-menu-inner {
      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        background-color: #343434;
        &:hover {
          background-color: #3b3b3b;
        }
      }
    }
  }
}
</style>
