<script lang="ts" setup>
import AAside from '@/pages/a-frame/AAside.tsx'
import AAvatar from '@/pages/a-frame/AAvatar.vue'
import { appName } from '@/common'
import Colls from '@/common/utils/colls.ts'
import { MenuCategory } from '@/common/app/constants.ts'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
import Nav from '@/common/router/nav.ts'
import Evt from '@/common/utils/evt.ts'

const appSettingStore = useAppSettingStore()
const id_menu_map = computed(() => {
  return Colls.keyObj(
    appSettingStore.menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog),
    (it) => it.id,
    (it) => it,
  )
})

function onMenuClick(id: string) {
  const menu = id_menu_map.value[id]
  Nav.open({
    insId: menu?.routeName ?? '',
    routeName: menu?.routeName ?? '',
  })
}

const menuTree = computed(() => {
  return Colls.toTree(
    appSettingStore.menus
      .filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog)
      .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)),
  )
})
onMounted(() => {
  Evt.emit('connect_ws')
})

onUnmounted(() => {
  Evt.emit('disconnect_ws')
})
</script>

<template>
  <ElContainer class="a-frame">
    <ElHeader>
      <div>
        <img alt="" src="@/assets/images/循环.svg"/>
        <div>{{ appName }}</div>
      </div>
      <AAvatar/>
    </ElHeader>
    <ElContainer>
      <ElAside>
        <AAside :menus="menuTree" @menu-click="onMenuClick"/>
      </ElAside>
      <ElMain>
        <RouterView #="{ Component }">
          <Transition name="el-fade-in-linear">
            <component :is="Component"/>
          </Transition>
        </RouterView>
      </ElMain>
    </ElContainer>
  </ElContainer>
</template>

<style lang="stylus" scoped>
.a-frame {
  height 100%
  width 100%;
  overflow hidden

  & > header {
    display flex
    justify-content space-between
    border-bottom 1px solid #E5E7EB;
    height 60px

    & > div:first-child {
      height: 100%;
      display: flex;
      align-items: center;
      box-sizing border-box

      img {
        height 50%
        margin-right 12px
      }

      & > div {
        color: #165DFF;
        font-weight: 700;
        font-size: 1.5rem;
      }
    }
  }

  & > section {
    width 100%;
    height calc(100% - 60px)

    & > aside {
      height 100%;
      width 300px;

      & > ul {
        height 100%
        overflow auto
      }
    }

    & > main {
      height 100%
      width calc(100% - 300px)
      padding 8px
      overflow auto
      background-color #F7F9FC
      box-shadow: inset rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
    }
  }
}
</style>
