<template>
  <el-menu
    :class="mobile ? 'user-menu--h' : 'user-menu--v'"
    :mode="mobile ? 'horizontal' : 'vertical'"
    router
    :default-active="$route.fullPath"
    :ellipsis="false"
  >
    <h4 v-if="!mobile" class="mb-5px text-center">个人中心</h4>
    <el-divider v-if="!mobile" />
    <el-menu-item :index="`/user/${$route.params.id}/post`">发帖记录</el-menu-item>
    <template v-if="userStore.isSelf(userInfo.id)">
      <el-divider v-if="!mobile" />
      <el-menu-item :index="`/user/${$route.params.id}/edit`">编辑信息</el-menu-item>
    </template>
  </el-menu>
</template>
<style lang="scss" scoped>
.user-menu--v {
  --el-menu-item-height: 40px;
  border: none;
  .el-menu-item {
    margin: 0 10px;
  }
}
.user-menu--h {
  width: max-content;
  min-width: 100%;
  --el-menu-horizontal-height: 40px;
  --el-menu-item-height: 40px;
  border-bottom: 0;
}
</style>
<script setup lang="ts">
import type { UserInfo } from '@/schemas/response';
import { useUserStore } from '@/stores/user';
withDefaults(defineProps<{ userInfo: UserInfo; mobile?: boolean }>(), {
  mobile: false,
});
const userStore = useUserStore();
</script>
