<script setup lang="ts">
/**
 * 个人中心：左侧账号卡（头像/昵称/角色）+ 右侧 Tab（基本资料 / 修改密码）
 * 入口：顶栏头像下拉「个人中心」、工作台问候头；静态路由 /profile（hideInMenu，不走 xk_menu）
 * 资料数据统一从 auth/my-profile 实时接口拉取，子组件保存成功后回调刷新
 */
import { computed, onMounted, ref } from 'vue';

import { Profile } from '@vben/common-ui';

import { getMyProfile } from './api';
import ProfileBase from './base-setting.vue';
import ProfilePasswordSetting from './password-setting.vue';

const tabsValue = ref<string>('basic');

const tabs = ref([
  {
    label: '基本资料',
    value: 'basic',
  },
  {
    label: '修改密码',
    value: 'password',
  },
]);

/** 个人中心资料（basic tab 编辑 + 左侧账号卡展示共用一份数据） */
const profile = ref<any>({});

/**
 * 左侧账号卡数据映射
 * Profile 壳组件展示 realName（大字）与 username（小字），这里映射为 昵称 + 角色名
 * avatar 为空时必须传 undefined（不能传空串），Profile 内部才会 ?? 兜底系统默认头像
 */
const cardUserInfo = computed(() => ({
  avatar: profile.value.avatar || undefined,
  nick_name: profile.value.nick_name || '',
  userId: String(profile.value.id || ''),
  username: profile.value.role_name || '',
  realName: profile.value.nick_name || '',
}));

/** 拉取实时资料（初始化 + 保存成功后刷新） */
async function loadProfile() {
  profile.value = (await getMyProfile()) || {};
}

onMounted(loadProfile);
</script>
<template>
  <Profile
    v-model:model-value="tabsValue"
    title="个人中心"
    :user-info="cardUserInfo"
    :tabs="tabs"
  >
    <template #content>
      <ProfileBase
        v-if="tabsValue === 'basic'"
        :profile="profile"
        @saved="loadProfile"
      />
      <ProfilePasswordSetting v-if="tabsValue === 'password'" />
    </template>
  </Profile>
</template>
