<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 Evt from '@/common/utils/evt.ts'

onMounted(() => {
  Evt.emit('connect_ws')
})

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

<template>
  <ElContainer class="a-frame">
    <ElHeader>
      <div>
        <img alt="" src="@/assets/images/zsy.png"/>
        <div>{{ appName }}</div>
      </div>
      <AAvatar/>
    </ElHeader>
    <ElContainer>
      <ElAside>
        <AAside/>
      </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
  box-shadow: inset rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
  background-color #F7F9FC

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

    & > 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 auto
      position relative
    }

    & > main {
      height 100%
      width calc(100% - 300px)
      padding 5px
      overflow auto
      background-color #F7F9FC
    }
  }
}
</style>
<style>
.menus:not(.el-menu--collapse) {
  width: 230px;
}
</style>
