<template>
  <div :class="wideScreen ? 'flex-row' : ''">
    <a-menu
      :mode="wideScreen ? undefined : 'horizontal'"
      :class="{
        menu: wideScreen
      }"
      style="border-right: 1px solid var(--color-border)"
      :default-selected-keys="[route.fullPath]"
      @menu-item-click="handleClick"
    >
      <a-menu-item key="/user/info">个人信息</a-menu-item>
      <a-menu-item key="/user/info/password">修改密码</a-menu-item>
    </a-menu>
    <div class="flex-column flex-1" style="max-width: 700px; min-height: 400px">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, inject, Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { SystemInfo } from '@/types/types'

const router = useRouter()
const route = useRoute()
const handleClick = (key: string) => {
  router.push(key)
}
const systemInfo = inject<Ref<SystemInfo>>('systemInfo')
const wideScreen = computed(() => systemInfo && systemInfo.value.isWideScreen)
</script>
<style scoped lang="scss">
.menu {
  width: 160px;
  margin-right: 10px;
}
::v-deep(.arco-menu-horizontal) {
  .arco-menu-inner {
    padding: 14px 0 !important;
  }
}
</style>
