<script setup lang="ts">
import { useRoute } from 'vue-router'
import { inject, Ref } from 'vue'
import MyHeader from './m-header/index.vue'
import MySider from './m-sider/index.vue'
import { SystemInfo } from '@/types/types'
import { useMenuStore } from '@/store/menu'
import { useUserStore } from '@/store/user'

const menuStore = useMenuStore()
menuStore.loadMenus()

const userStore = useUserStore()
userStore.loadPermissions()

const route = useRoute()
const systemInfo = inject<Ref<SystemInfo>>('systemInfo')
</script>

<template>
  <a-layout class="app">
    <a-layout-header>
      <my-header />
    </a-layout-header>
    <a-layout>
      <div class="flex-row">
        <a-layout v-show="systemInfo!.clientWidth > 768">
          <my-sider />
        </a-layout>
        <div class="scroll-box" style="height: calc(100vh - 60px)">
          <div class="ma-sm">
            <div
              :class="{
                main: route.path !== '/'
              }"
            >
              <router-view v-slot="{ Component }">
                <keep-alive>
                  <component :is="Component" v-if="route.meta.keepAlive" />
                </keep-alive>
                <component :is="Component" v-if="!route.meta.keepAlive" />
              </router-view>
            </div>
          </div>
          <a-back-top target-container=".scroll-box"> </a-back-top>
        </div>
      </div>
    </a-layout>
  </a-layout>
</template>

<style lang="scss">
.app {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.arco-layout-header {
  height: 60px;
  border-bottom: 1px solid var(--color-border);
  box-sizing: border-box;
  background-color: var(--color-bg-2);
}
.arco-layout-footer {
  height: 40px;
  background-color: var(--color-bg-3);
}

.arco-layout-content {
  background-color: var(--color-fill-2);
}
.main {
  background-color: var(--color-bg-2);
  padding: 16px;
}

.scroll-box {
  width: 100%;
  overflow-y: auto;
  background-color: var(--color-fill-2);
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: 8px;
    padding: 10px 0;
    background-color: var(--color-fill-2);
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: var(--color-fill-2);
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c1c1c1;
    cursor: pointer;
    &:hover {
      background-color: #7d7d7d;
    }
  }
}
// 设置暗黑模式下spin的背景色透明
body[arco-theme='dark'] {
  .scroll-box {
    background-color: var(--color-bg-3);
    &::-webkit-scrollbar {
      background-color: var(--color-bg-3);
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      background-color: var(--color-bg-3);
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      background-color: var(--color-fill-3);
      &:hover {
        background-color: var(--color-fill-4);
      }
    }
  }
}
</style>
