<template>
  <div class="mx-auto max-w-screen-md px-4 py-8">
    <a-card title="个人资料" :bordered="false">
      <div class="flex items-center gap-4">
        <a-avatar :size="64" :src="avatarUrl">
          <template v-if="!avatarUrl" #icon>
            <UserOutlined />
          </template>
        </a-avatar>
        <div class="min-w-0">
          <div class="text-lg font-semibold text-gray-900">
            {{ user?.nickname || user?.username || '未命名用户' }}
          </div>
          <div class="text-gray-500">
            {{ user?.phone || (user as any)?.mobile || '' }}
          </div>
        </div>
      </div>

      <a-divider />

      <a-descriptions :column="1" size="small" bordered>
        <a-descriptions-item label="用户ID">{{ user?.userId }}</a-descriptions-item>
        <a-descriptions-item label="账号">{{ user?.username }}</a-descriptions-item>
        <a-descriptions-item label="昵称">{{ user?.nickname }}</a-descriptions-item>
        <a-descriptions-item label="手机号">{{ user?.phone || (user as any)?.mobile }}</a-descriptions-item>
        <a-descriptions-item label="租户ID">{{ tenantId }}</a-descriptions-item>
      </a-descriptions>

      <div class="mt-6 flex justify-end gap-2">
        <a-button @click="navigateTo('/')">返回首页</a-button>
        <a-button danger type="primary" @click="logout">退出登录</a-button>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined } from '@ant-design/icons-vue'
import { getUserInfo } from '@/api/layout'
import type { User } from '@/api/system/user/model'
import { getTenantId } from '@/utils/domain'
import { getToken, removeToken } from '@/utils/token-util'

const user = ref<User | null>(null)
const tenantId = computed(() => getTenantId())
const avatarUrl = computed(() => {
  const candidate =
    user.value?.avatarUrl ||
    user.value?.avatar ||
    user.value?.merchantAvatar ||
    user.value?.logo ||
    ''
  if (typeof candidate !== 'string') return ''
  const normalized = candidate.trim()
  if (!normalized || normalized === 'null' || normalized === 'undefined') return ''
  return normalized
})

function logout() {
  removeToken()
  try {
    localStorage.removeItem('TenantId')
    localStorage.removeItem('UserId')
  } catch {
    // ignore
  }
  navigateTo('/')
}

onMounted(async () => {
  if (!getToken()) {
    message.error('请先登录')
    await navigateTo('/login?from=/profile')
    return
  }
  try {
    user.value = await getUserInfo()
  } catch (e: unknown) {
    console.error(e)
    message.error('获取用户信息失败')
  }
})
</script>
