<script setup>
import { ref, onMounted } from 'vue'
import { UserInfoService } from '@/api/user'
import { useUserStore } from '@/stores'
import DefaultImg from '@/assets/default.png'
import BaseLayout from '@/components/BaseLayout.vue'
import { formatDateTime } from '@/utils/format'
const userStore = useUserStore()
// 模拟用户数据
const user = ref({
  id: 10,
  username: 'superadmin-test',
  account: 'superadmin',
  userPhone: 'superadmin12334',
  email: 'superadmin@qq.com',
  registerTime: '2025-06-03',
  updateTime: '2025-06-04',
  avatar:
    'http://119.29.191.232:9000/venue-sport/7311dff9c47340cfa6db1ea5414371e4.png', // 注意：此链接可能无法正常加载
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 标签页控制
const activeTab = ref('basic')
const getUserInfo = async () => {
  const {
    data: { data }
  } = await UserInfoService(userStore.user.id)
  user.value = { ...data }
  console.log(data)
}
// 页面加载时检查头像链接
onMounted(() => {
  getUserInfo()
})
</script>
<template>
  <BaseLayout>
    <div class="profile-container">
      <el-main class="profile-content">
        <el-card class="profile-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>

          <el-row :gutter="20" class="profile-header">
            <el-col :span="8">
              <div class="avatar-container">
                <el-avatar
                  :size="100"
                  :src="user.isUpload === 1 ? user.avatar : DefaultImg"
                />
              </div>
            </el-col>
            <el-col :span="16">
              <div class="user-info">
                <h3>用 户 名：{{ user.username }}</h3>

                <p>账 号：{{ user.account }}</p>
                <p>
                  注 册 时 间：{{
                    user.registerTime === null
                      ? formatDateTime(new Date())
                      : user.registerTime
                  }}
                </p>
              </div>
            </el-col>
          </el-row>

          <el-tabs v-model="activeTab" class="profile-tabs">
            <el-tab-pane label="基本信息" name="basic">
              <el-descriptions :column="1" border class="profile-details">
                <el-descriptions-item label="用户名">{{
                  user.username
                }}</el-descriptions-item>
                <el-descriptions-item label="账号">{{
                  user.account
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{
                  user.userPhone
                }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{
                  user.email
                }}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{
                  user.updateTime === null
                    ? formatDateTime(new Date())
                    : user.updateTime
                }}</el-descriptions-item>
                <el-descriptions-item label="账户余额">{{
                  Number(user.balance).toFixed(2)
                }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </div>
  </BaseLayout>
</template>

<style scoped>
.profile-container {
  max-width: 1250px;
  margin: 0 auto;
}

.profile-content {
  padding: 20px;
}

.profile-card {
  max-width: 1000px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  margin-bottom: 20px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-btn {
  margin-top: 10px;
}

.user-info {
  padding-left: 20px;
}

.user-info h3 {
  margin-bottom: 10px;
}

.profile-tabs {
  margin-top: 20px;
}

.profile-details {
  width: 100%;
}

.settings-form {
  max-width: 600px;
  margin: 0 auto;
}

.profile-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 20px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
</style>
