<template>
  <div class="user-detail-page">
    <!-- 顶部导航 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" link class="back-btn">
          <el-icon><ArrowLeft /></el-icon> 返回列表
        </el-button>
        <el-divider direction="vertical" />
        <span class="page-title">用户详情</span>
      </div>
      <div class="header-right">
        <el-button type="primary" plain @click="refreshData" :loading="loading">
          <el-icon><Refresh /></el-icon> 刷新数据
        </el-button>
      </div>
    </div>

    <div class="main-content" v-loading="loading">
      <!-- 用户概览卡片 -->
      <el-card class="profile-card" shadow="never">
        <div class="profile-header">
          <div class="profile-basic">
            <div class="avatar-wrapper" @click="handleAvatarManage">
              <el-avatar :size="80" :src="currentAvatarUrl || userInfo.Avatar" :icon="UserFilled" class="user-avatar" />
              <div class="avatar-edit-hint"><el-icon><Camera /></el-icon></div>
            </div>
            <div class="user-identity">
              <div class="name-row">
                <h1 class="user-name">{{ userInfo.UserName || '未命名用户' }}</h1>
                <el-tag :type="userInfo.IsDeleted ? 'danger' : 'success'" effect="dark" round size="small" class="status-tag">
                  {{ userInfo.IsDeleted ? '已禁用' : '正常' }}
                </el-tag>
                <el-tag v-if="userInfo.UserGroup" type="info" effect="plain" round size="small" class="group-tag">
                  {{ userInfo.UserGroup?.Name }}
                </el-tag>
              </div>
              <div class="id-row">
                <span class="label">UID:</span>
                <span class="value">{{ userInfo.UserId }}</span>
                <el-divider direction="vertical" />
                <span class="label">注册时间:</span>
                <span class="value">{{ formatDate(userInfo.CreatedAt) }}</span>
              </div>
            </div>
          </div>
          <!-- 统一的用户数据概览区域 -->
          <div class="profile-stats">
            <!-- 余额数据 -->
            <div class="stat-item" v-for="balance in userBalanceList" :key="balance.id">
              <div class="stat-label">{{ balance.typeName }}</div>
              <div class="stat-value">{{ formatBalance(balance.price) }}</div>
            </div>
            <!-- 其他状态数据 -->
            <div class="stat-item">
              <div class="stat-label">实名状态</div>
              <div class="stat-value">
                <el-tag :type="userInfo.RealName?.Status === 1 ? 'success' : 'warning'" size="small" effect="light">
                  {{ getRealNameStatusText(userInfo.RealName?.Status) }}
                </el-tag>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-label">推荐人ID</div>
              <div class="stat-value">{{ userInfo.RecommendUserId || '-' }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">用户组ID</div>
              <div class="stat-value">{{ userInfo.UserGroupId || '-' }}</div>
            </div>
          </div>
        </div>
        
        <el-divider class="action-divider" />

        <!-- 快捷操作栏 -->
        <div class="quick-actions">
            <el-button type="primary" plain :icon="Edit" @click="handleEditUser">编辑信息</el-button>
            <el-button type="success" plain :icon="Wallet" @click="handleBalanceManage">余额管理</el-button>
            <el-button type="warning" plain :icon="Lock" @click="handlePasswordManage">修改密码</el-button>
            <el-button type="info" plain :icon="UserFilled" @click="handleGroupManage">用户组</el-button>
            <el-button type="primary" plain :icon="Document" @click="handleRealnameManage">实名管理</el-button>
            <el-button type="danger" plain :icon="Key" @click="handleTokenManage">管理员权限</el-button>
            <el-button type="success" plain :icon="Switch" @click="handleSimulateLogin">模拟登录</el-button>
            <el-button type="danger" plain :icon="Delete" @click="handleDeleteUser">删除用户</el-button>
        </div>
      </el-card>

      <div class="detail-grid">
        <!-- 左侧信息栏 -->
        <div class="left-column">
          <el-card class="info-section-card" shadow="never">
            <template #header>
              <div class="card-header">
                <span class="title">基本信息</span>
              </div>
            </template>
            <el-descriptions :column="1" border size="small">
              <el-descriptions-item label="手机号">{{ userInfo.Phone || '-' }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ userInfo.Email || '-' }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ formatSex(userInfo.Sex) || '-' }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ userInfo.Age || '-' }}</el-descriptions-item>
              <el-descriptions-item label="最后更新">{{ formatDate(userInfo.UpdatedAt) }}</el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-card class="info-section-card" shadow="never" style="margin-top: 20px;">
             <template #header>
              <div class="card-header">
                <span class="title">实名信息</span>
              </div>
            </template>
             <el-descriptions :column="1" border size="small">
              <el-descriptions-item label="真实姓名">{{ userInfo.RealName?.Name || '-' }}</el-descriptions-item>
              <el-descriptions-item label="身份证号">{{ userInfo.RealName?.IdCard || '-' }}</el-descriptions-item>
              <el-descriptions-item label="认证类型">{{ getRealNameTypeText(userInfo.RealName?.Type) }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>

        <!-- 右侧记录栏 -->
        <div class="right-column">
          <el-card class="tabs-card" shadow="never">
            <el-tabs v-model="activeTabName" @tab-click="handleTabClick" class="custom-tabs">
              <el-tab-pane label="登录记录" name="1">
                 <el-table :data="loginHistory" v-loading="loginHistoryLoading" stripe style="width: 100%">
                    <el-table-column prop="CreatedAt" label="时间" width="180">
                      <template #default="{row}">{{ formatDate(row.CreatedAt) }}</template>
                    </el-table-column>
                    <el-table-column prop="Host" label="IP地址" width="140" />
                    <el-table-column prop="Location" label="地点" width="120" />
                    <el-table-column prop="Origin" label="来源" show-overflow-tooltip />
                    <el-table-column label="操作" width="80" fixed="right">
                      <template #default="scope">
                        <el-button type="danger" link size="small" @click="handleDeleteLoginRecord(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                 </el-table>
                 <div class="pagination-wrapper" v-if="loginHistoryTotal > 0">
                    <el-pagination 
                      v-model:current-page="loginHistoryPage"
                      v-model:page-size="loginHistoryPageSize"
                      :total="loginHistoryTotal"
                      :page-sizes="[10, 20, 50]"
                      layout="total, prev, pager, next"
                      @size-change="handleLoginHistorySizeChange"
                      @current-change="handleLoginHistoryPageChange"
                    />
                 </div>
                 <el-empty v-else description="暂无登录记录" :image-size="100" />
              </el-tab-pane>
              <el-tab-pane label="操作记录" name="2">
                 <el-table :data="operationHistory" v-loading="operationHistoryLoading" stripe style="width: 100%">
                    <el-table-column prop="CreatedAt" label="时间" width="180">
                      <template #default="{row}">{{ formatDate(row.CreatedAt) }}</template>
                    </el-table-column>
                    <el-table-column prop="Type" label="操作类型" width="120">
                      <template #default="{row}">
                        <el-tag size="small">{{ row.Type }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="Note" label="详细内容" show-overflow-tooltip />
                    <el-table-column label="操作" width="80" fixed="right">
                      <template #default="scope">
                        <el-button type="danger" link size="small" @click="handleDeleteOperationRecord(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                 </el-table>
                 <div class="pagination-wrapper" v-if="operationHistoryTotal > 0">
                    <el-pagination 
                      v-model:current-page="operationHistoryPage"
                      v-model:page-size="operationHistoryPageSize"
                      :total="operationHistoryTotal"
                      :page-sizes="[10, 20, 50]"
                      layout="total, prev, pager, next"
                      @size-change="handleOperationHistorySizeChange"
                      @current-change="handleOperationHistoryPageChange"
                    />
                 </div>
                 <el-empty v-else description="暂无操作记录" :image-size="100" />
              </el-tab-pane>
              <el-tab-pane label="订单列表" name="3">
                 <el-table :data="userOrderList" v-loading="orderListLoading" stripe style="width: 100%">
                    <el-table-column prop="id" label="订单ID" width="100" />
                    <el-table-column prop="name" label="商品名称" min-width="150" show-overflow-tooltip />
                    <el-table-column prop="price" label="金额" width="100">
                      <template #default="{row}">¥{{ (row.price / 100).toFixed(2) }}</template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                      <template #default="{row}">
                        <el-tag :type="getOrderStatusType(row.status)" size="small">{{ getOrderStatusText(row.status) }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="创建时间" width="160">
                      <template #default="{row}">{{ formatDate(row.created_at) }}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="80" fixed="right">
                      <template #default="scope">
                        <el-button type="primary" link size="small" @click="handleViewOrder(scope.row)">详情</el-button>
                      </template>
                    </el-table-column>
                 </el-table>
                 <div class="pagination-wrapper" v-if="orderListTotal > 0">
                    <el-pagination 
                      v-model:current-page="orderListPage"
                      v-model:page-size="orderListPageSize"
                      :total="orderListTotal"
                      :page-sizes="[10, 20, 50]"
                      layout="total, prev, pager, next"
                      @size-change="handleOrderListSizeChange"
                      @current-change="handleOrderListPageChange"
                    />
                 </div>
                 <el-empty v-else description="暂无订单记录" :image-size="100" />
              </el-tab-pane>
              <el-tab-pane label="工单列表" name="4">
                 <el-table :data="userTicketList" v-loading="ticketListLoading" stripe style="width: 100%">
                    <el-table-column prop="work_id" label="工单ID" width="100" />
                    <el-table-column prop="name" label="标题" min-width="150" show-overflow-tooltip />
                    <el-table-column prop="status" label="状态" width="100">
                      <template #default="{row}">
                        <el-tag :type="getTicketStatusType(row.status)" size="small">{{ getTicketStatusText(row.status) }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="创建时间" width="160">
                      <template #default="{row}">{{ formatDate(row.created_at) }}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="80" fixed="right">
                      <template #default="scope">
                        <el-button type="primary" link size="small" @click="handleViewTicket(scope.row)">详情</el-button>
                      </template>
                    </el-table-column>
                 </el-table>
                 <div class="pagination-wrapper" v-if="ticketListTotal > 0">
                    <el-pagination 
                      v-model:current-page="ticketListPage"
                      v-model:page-size="ticketListPageSize"
                      :total="ticketListTotal"
                      :page-sizes="[10, 20, 50]"
                      layout="total, prev, pager, next"
                      @size-change="handleTicketListSizeChange"
                      @current-change="handleTicketListPageChange"
                    />
                 </div>
                 <el-empty v-else description="暂无工单记录" :image-size="100" />
              </el-tab-pane>
              <el-tab-pane label="已购商品" name="5">
                 <el-table :data="userGoodsList" v-loading="goodsListLoading" stripe style="width: 100%" table-layout="auto">
                    <el-table-column prop="id" label="ID" width="70" />
                    <el-table-column label="商品名称" min-width="120" show-overflow-tooltip>
                      <template #default="{row}">{{ row.good?.name || '-' }}</template>
                    </el-table-column>
                    <el-table-column label="标签" min-width="90">
                      <template #default="{row}">
                        <el-tag v-if="row.tag" size="small">{{ row.tag }}</el-tag>
                        <span v-else>-</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="到期时间" min-width="140">
                      <template #default="{row}">{{ formatDate(row.expireTime) }}</template>
                    </el-table-column>
                    <el-table-column label="购买时间" min-width="140">
                      <template #default="{row}">{{ formatDate(row.CreatedAt) }}</template>
                    </el-table-column>
                 </el-table>
                 <div class="pagination-wrapper" v-if="goodsListTotal > 0">
                    <el-pagination 
                      v-model:current-page="goodsListPage"
                      v-model:page-size="goodsListPageSize"
                      :total="goodsListTotal"
                      :page-sizes="[10, 20, 50]"
                      layout="total, prev, pager, next"
                      @size-change="handleGoodsListSizeChange"
                      @current-change="handleGoodsListPageChange"
                    />
                 </div>
                 <el-empty v-else description="暂无已购商品" :image-size="100" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </div>

      
    </div>

    <!-- 编辑用户对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑用户信息" width="600px" append-to-body destroy-on-close>
      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
        <el-form-item label="用户名" prop="UserName">
          <el-input v-model="editForm.UserName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="Email">
          <el-input v-model="editForm.Email" placeholder="请输入邮箱"  />
        </el-form-item>
        <el-form-item label="手机号" prop="Phone">
          <el-input v-model="editForm.Phone" placeholder="请输入手机号"  />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="editForm.Age" :min="0" :max="150" style="width: 100%" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editForm.Sex" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="true" />
            <el-option label="女" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="推荐人">
          <el-input
            v-if="recommendUserInfo.UserId"
            :model-value="`${recommendUserInfo.UserName} (ID: ${recommendUserInfo.UserId})`"
            readonly
            style="width: 100%"
          >
            <template #suffix>
              <el-icon class="clear-icon" @click="clearRecommendUser"><Close /></el-icon>
            </template>
            <template #append>
              <el-button @click="showUserSelectorDialog = true">
                <el-icon><User /></el-icon>
              </el-button>
            </template>
          </el-input>
          <el-input
            v-else
            placeholder="请选择推荐人"
            readonly
            style="width: 100%"
            @click="showUserSelectorDialog = true"
          >
            <template #append>
              <el-button @click="showUserSelectorDialog = true">
                <el-icon><User /></el-icon>
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEditForm">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户选择器（推荐人选择） -->
    <UserListSelector
      v-model="showUserSelectorDialog"
      :current-user-id="editForm.RecommendUserId"
      @confirm="handleRecommendUserSelect"
    />

    <!-- 头像选择对话框 -->
    <AvatarSelector
      v-model="showAvatarSelector"
      :user-id="route.query.user_id"
      :current-cover-id="editForm.CoverID"
      @confirm="handleAvatarConfirm"
    />

    <!-- 头像管理对话框 -->
    <el-dialog v-model="avatarDialogVisible" title="修改用户头像" width="400px" append-to-body>
      <div class="avatar-manage-content">
        <div class="current-avatar-preview" @click="showAvatarSelectorDialog">
          <el-avatar :size="100" :src="avatarPreviewUrl" fit="cover">
            <el-icon :size="40"><User /></el-icon>
          </el-avatar>
          <div class="overlay"><el-icon><Edit /></el-icon></div>
        </div>
        <p class="hint">点击头像进行更换</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="avatarDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAvatarModify">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 密码管理对话框 -->
    <el-dialog v-model="passwordDialogVisible" title="修改用户密码" width="400px" append-to-body>
      <el-form :model="passwordForm" label-width="80px">
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.password" type="password" placeholder="请输入新密码" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPasswordModify">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户组管理对话框 -->
    <el-dialog v-model="groupDialogVisible" title="修改用户组" width="400px" append-to-body>
      <el-form :model="groupForm" label-width="80px">
        <el-form-item label="用户组">
          <el-select v-model="groupForm.user_group_id" placeholder="请选择用户组" style="width: 100%">
            <el-option v-for="item in userGroupList" :key="item.Id" :label="item.Name" :value="item.Id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="groupDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitGroupModify">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 实名信息管理对话框 -->
    <el-dialog v-model="realnameDialogVisible" title="修改实名信息" width="500px" append-to-body>
      <el-form :model="realnameForm" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="realnameForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="realnameForm.id_card" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="实名类型">
          <el-select v-model="realnameForm.type" placeholder="请选择实名类型" style="width: 100%">
            <el-option label="个人" :value="0" />
            <el-option label="企业" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="实名状态">
          <el-select v-model="realnameForm.status" placeholder="请选择实名状态" style="width: 100%">
            <el-option label="未认证" :value="0" />
            <el-option label="已认证" :value="1" />
            <el-option label="认证中" :value="2" />
            <el-option label="认证失败" :value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="realnameDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRealnameModify">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- Token 展示对话框 -->
    <el-dialog v-model="tokenDialogVisible" title="模拟登录" width="450px" append-to-body>
      <div class="token-container">
        <el-form label-width="100px">
          <el-form-item label="选择环境">
            <el-select v-model="selectedEnvironment" placeholder="请选择登录环境" size="large" style="width: 100%">
              <el-option label="正式环境" value="production">
                <div class="env-option">
                  <span>正式环境</span>
                  <span class="env-url">www.007yjs.com</span>
                </div>
              </el-option>
              <el-option label="测试环境" value="test">
                <div class="env-option">
                  <span>测试环境</span>
                  <span class="env-url">apiserver.s1f.ren</span>
                </div>
              </el-option>
              <el-option label="本地环境" value="local">
                <div class="env-option">
                  <span>本地环境</span>
                  <span class="env-url">localhost:5173</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tokenDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmJump" :disabled="!selectedEnvironment">确认跳转</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 管理员权限管理对话框 -->
    <el-dialog v-model="adminDialogVisible" title="修改管理员权限" width="500px" append-to-body>
      <el-form :model="adminForm" label-width="100px">
        <el-form-item label="管理员组">
          <el-select 
            v-model="adminForm.admin_group_id" 
            placeholder="请选择管理员组" 
            style="width: 100%"
            :loading="adminGroupLoading"
            filterable
          >
            <el-option 
              v-for="item in adminGroupList" 
              :key="item.Id || item.id" 
              :label="`${item.Name || item.name} (ID: ${item.Id || item.id})`" 
              :value="item.Id || item.id" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="adminDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAdminModify">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { baseURL } from '@/utils/request'
import AvatarSelector from '@/components/admin/AvatarSelector.vue'
import UserListSelector from '@/components/admin/UserListSelector.vue'
import { 
  ArrowLeft, Refresh, Edit as EditIcon, Delete, Wallet, Avatar, Lock, 
  UserFilled, Document, Clock, List, Switch, User, Camera, Upload, 
  UploadFilled, Key, Monitor, Setting, Close 
} from '@element-plus/icons-vue'
import { getUserGroupList, getUserBalanceCount } from '@/api/admin/user'
import { getFileDetail } from '@/api/admin/file'
import { 
  getUserInfo, updateUserInfo, updateUserAvatar, updateUserPassword, 
  updateUserGroup, updateUserRealName, getUserLoginRecord, 
  getUserOperationRecord, mockUserLogin, deleteUser, updateUserAdmin 
} from '@/api/admin/user'
import { getAdminGroupList } from '@/api/admin/group'
import { getOrderList } from '@/api/admin/order'
import { getTickerList } from '@/api/ticket'
import { getUserGoodsList } from '@/api/admin/product'

const Edit = EditIcon
const route = useRoute()
const router = useRouter()

// 引入tagsViewStore
import { useTagsViewStore } from '@/store/tagsViewStore'
const tagsViewStore = useTagsViewStore()

// 用户信息
const userInfo = ref({})
const loading = ref(false)

// 标签页相关
const activeTabName = ref('1') // 默认选中登录记录

// 登录记录相关
const loginHistory = ref([])
const loginHistoryLoading = ref(false)
const loginHistoryTotal = ref(0)
const loginHistoryPage = ref(1)
const loginHistoryPageSize = ref(10)

// 操作记录相关
const operationHistory = ref([])
const operationHistoryLoading = ref(false)
const operationHistoryTotal = ref(0)
const operationHistoryPage = ref(1)
const operationHistoryPageSize = ref(10)

// 订单列表相关
const userOrderList = ref([])
const orderListLoading = ref(false)
const orderListTotal = ref(0)
const orderListPage = ref(1)
const orderListPageSize = ref(10)

// 工单列表相关
const userTicketList = ref([])
const ticketListLoading = ref(false)
const ticketListTotal = ref(0)
const ticketListPage = ref(1)
const ticketListPageSize = ref(10)

// 已购商品列表相关
const userGoodsList = ref([])
const goodsListLoading = ref(false)
const goodsListTotal = ref(0)
const goodsListPage = ref(1)
const goodsListPageSize = ref(10)

// 用户余额相关
const userBalance = ref({
  balance: 0,
  frozen_balance: 0,
  total_recharge: 0,
  total_consume: 0
})

// 用户余额列表（用于概览卡片展示）
const userBalanceList = ref([])

// 余额类型映射
const balanceTypeMap = {
  entity: { name: '云钻', type: 'cloud_diamond', color: '#409EFF' },
  general: { name: '云币', type: 'cloud_coin', color: '#67C23A' },
  withdraw: { name: '云点', type: 'cloud_points', color: '#E6A23C' }
}

// 编辑用户相关
const editDialogVisible = ref(false)
const editForm = reactive({
  UserId: '',
  UserName: '',
  Email: '',
  Phone: '',
  Age: '',
  Sex: '',
  UserGroupId: '',
  RecommendUserId: '',
  CoverID: '',
  RealName: {
    Name: '',
    IdCard: '',
    Status: 0,
    Type: 0
  }
})

const editRules = {
  UserName: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ]
}

// 头像管理相关
const avatarDialogVisible = ref(false)
const avatarForm = reactive({
  user_id: '',
  cover_id: ''
})
const avatarPreviewUrl = ref('')
const showAvatarSelector = ref(false)
const selectedAvatarId = ref('')
const currentAvatarUrl = ref('')

// 推荐人选择相关
const showUserSelectorDialog = ref(false)
const recommendUserInfo = ref({
  UserId: '',
  UserName: '',
  Avatar: ''
})


// 密码管理相关
const passwordDialogVisible = ref(false)
const passwordForm = reactive({
  user_id: '',
  password: ''
})

// 用户组管理相关
const groupDialogVisible = ref(false)
const groupForm = reactive({
  user_id: '',
  user_group_id: ''
})
const userGroupList = ref([])

// 实名信息管理相关
const realnameDialogVisible = ref(false)
const realnameForm = reactive({
  user_id: '',
  name: '',
  id_card: '',
  type: 0,
  status: 0
})

// Token 展示相关
const tokenDialogVisible = ref(false)
const loginToken = ref('')
const loginExpire = ref('')
const selectedEnvironment = ref('')

// 环境配置
const environments = {
  production: 'https://www.007yjs.com',
  test: 'https://apiserver.s1f.ren',
  local: 'http://localhost:5173'
}

// 管理员权限管理相关
const adminDialogVisible = ref(false)
const adminForm = reactive({
  user_id: '',
  admin_group_id: ''
})
const adminGroupList = ref([])
const adminGroupLoading = ref(false)

// 处理标签页点击
const handleTabClick = (tab) => {
  localStorage.setItem('userDetailActiveTab', tab.props.name);
  if (tab.props.name === '1') {
    fetchLoginHistory()
  } else if (tab.props.name === '2') {
    fetchOperationHistory()
  } else if (tab.props.name === '3') {
    fetchUserOrderList()
  } else if (tab.props.name === '4') {
    fetchUserTicketList()
  } else if (tab.props.name === '5') {
    fetchUserGoodsList()
  }
};

// 格式化性别
const formatSex = (sex) => {
  if (sex === true) {
    return '男'
  } else if (sex === false) {
    return '女'
  } else {
    return '-'
  }
}
// 获取用户信息
const fetchUserInfo = async () => {
  const userId = route.query.user_id
  if (!userId) {
    ElMessage.error('用户ID不能为空')
    goBack()
    return
  }

  loading.value = true
  try {
    const res = await getUserInfo({ user_id: userId })
    if (res.data.code === 200) {
      userInfo.value = res.data.data
      // 获取头像
      if (userInfo.value.CoverID) {
        fetchCurrentAvatar(userInfo.value.CoverID)
      }
      // 获取用户余额列表
      fetchUserBalanceList(userId)
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

// 获取用户余额列表（用于概览卡片展示）
const fetchUserBalanceList = async (userId) => {
  try {
    const res = await getUserBalanceCount({ user_id: userId })
    if (res.data.code === 200) {
      // 只保留映射类型中存在的余额
      userBalanceList.value = (res.data.data || []).filter(item => {
        return balanceTypeMap[item.type]
      }).map(item => ({
        ...item,
        typeName: balanceTypeMap[item.type]?.name || item.type,
        typeColor:  '#000000'
      }))
    }
  } catch (error) {
    console.error('获取用户余额失败:', error)
  }
}

// 刷新数据
const refreshData = () => {
  fetchUserInfo()
  fetchActiveTabData()
}

// 返回上一页
const goBack = () => {
  // 关闭当前tab
  tagsViewStore.delVisitedView(route)
  router.go(-1)
}

// 编辑用户
const handleEditUser = async () => {
  editForm.UserId = userInfo.value.UserId
  editForm.UserName = userInfo.value.UserName
  editForm.Email = userInfo.value.Email
  editForm.Phone = userInfo.value.Phone
  editForm.Age = userInfo.value.Age || ''
  editForm.Sex = userInfo.value.Sex ? "男" : "女" || ''
  editForm.UserGroupId = userInfo.value.UserGroupId
  editForm.RecommendUserId = userInfo.value.RecommendUserId || ''
  editForm.CoverID = userInfo.value.CoverID || ''
  
  // 初始化推荐人信息
  if (userInfo.value.RecommendUserId) {
    await fetchRecommendUserInfo(userInfo.value.RecommendUserId)
  } else {
    recommendUserInfo.value = { UserId: '', UserName: '', Avatar: '' }
  }
  
  editDialogVisible.value = true
}

// 获取推荐人信息
const fetchRecommendUserInfo = async (userId) => {
  try {
    const res = await getUserInfo({ user_id: userId })
    if (res.data.code === 200) {
      const user = res.data.data
      recommendUserInfo.value = {
        UserId: user.UserId || user.user_id,
        UserName: user.UserName || user.user_name,
        Avatar: user.Avatar || user.cover || ''
      }
    }
  } catch (error) {
    console.error('获取推荐人信息失败:', error)
  }
}


// 推荐人选择处理
const handleRecommendUserSelect = (user) => {
  recommendUserInfo.value = {
    UserId: user.user_id || user.UserId,
    UserName: user.user_name || user.UserName,
    Avatar: user.cover || user.Avatar || ''
  }
  editForm.RecommendUserId = user.user_id || user.UserId
}

// 清除推荐人
const clearRecommendUser = () => {
  recommendUserInfo.value = { UserId: '', UserName: '', Avatar: '' }
  editForm.RecommendUserId = ''
}


// 提交编辑表单
const submitEditForm = async () => {
  try {
    const data = {
      user_id: userInfo.value.UserId,
      user_name: editForm.UserName,
      age: editForm.Age,
      sex: editForm.Sex,
      recommend_id: editForm.RecommendUserId,
      cover_id: editForm.CoverID,
      email: editForm.Email,
      phone: editForm.Phone
    }
    console.log("提交编辑表单数据：",data)
    const res = await updateUserInfo(data)
    if (res.data.code === 200) {
      ElMessage.success('用户信息更新成功')
      editDialogVisible.value = false
      fetchUserInfo()
    }
  } catch (error) {
    ElMessage.error('用户信息更新失败')
  }
}

// 余额管理
const handleBalanceManage = () => {
  router.push({
    path: '/user/balance',
    query: { user_id: userInfo.value.UserId }
  })
}

// 头像管理
const handleAvatarManage = async () => {
  avatarForm.user_id = userInfo.value.UserId
  avatarForm.cover_id = userInfo.value.CoverID || ''
  
  // 获取头像信息进行渲染
  if (userInfo.value.CoverID) {
    try {
      const res = await getFileDetail({ file_id: userInfo.value.CoverID })
      if (res.data.code === 200) {
        avatarPreviewUrl.value = res.data.data.url
      } else {
        avatarPreviewUrl.value = ''
      }
    } catch (error) {
      console.error('获取头像信息失败:', error)
      avatarPreviewUrl.value = ''
    }
  } else {
    avatarPreviewUrl.value = ''
  }
  
  avatarDialogVisible.value = true
}

const showAvatarSelectorDialog = () => {
  showAvatarSelector.value = true
}

// 密码管理
const handlePasswordManage = () => {
  passwordForm.user_id = userInfo.value.UserId
  passwordForm.password = ''
  passwordDialogVisible.value = true
}

// 用户组管理
const handleGroupManage = () => {
  groupForm.user_id = userInfo.value.UserId
  groupForm.user_group_id = userInfo.value.UserGroupId || ''
  groupDialogVisible.value = true
  fetchUserGroupList()
}

const fetchUserGroupList = async () => {
  const res = await getUserGroupList({ page: 1, count: 10 })
  if (res.data.code == 200) {
    userGroupList.value = res.data.data.data
  }
}

// 实名信息管理
const handleRealnameManage = () => {
  realnameForm.user_id = userInfo.value.UserId
  realnameForm.name = userInfo.value.RealName?.Name || ''
  realnameForm.id_card = userInfo.value.RealName?.IdCard || ''
  realnameForm.type = userInfo.value.RealName?.Type || 0
  realnameForm.status = userInfo.value.RealName?.Status || 0
  realnameDialogVisible.value = true
}

// 获取登录记录
const fetchLoginHistory = async () => {
  if (!route.query.user_id) return
  loginHistoryLoading.value = true
  try {
    const res = await getUserLoginRecord({ 
      user_id: route.query.user_id, 
      page: loginHistoryPage.value, 
      count: loginHistoryPageSize.value 
    })
    if (res.data.code === 200) {
      loginHistory.value = res.data.data.data || []
      loginHistoryTotal.value = res.data.data.all_count || 0
    }
  } catch (error) {
    ElMessage.error('获取登录记录失败')
  } finally {
    loginHistoryLoading.value = false
  }
}

const handleLoginHistorySizeChange = (size) => {
  loginHistoryPageSize.value = size;
  loginHistoryPage.value = 1;
  fetchLoginHistory();
};

const handleLoginHistoryPageChange = (page) => {
  loginHistoryPage.value = page;
  fetchLoginHistory();
};

// 删除登录记录
const handleDeleteLoginRecord = async (record) => {
  // 暂无API
  ElMessage.info('功能开发中')
}

// 获取操作记录
const fetchOperationHistory = async () => {
  if (!route.query.user_id) return
  operationHistoryLoading.value = true
  try {
    const res = await getUserOperationRecord({ 
      user_id: route.query.user_id, 
      page: operationHistoryPage.value, 
      count: operationHistoryPageSize.value 
    })
    if (res.data.code === 200) {
      operationHistory.value = res.data.data.data || []
      operationHistoryTotal.value = res.data.data.all_count || 0
    }
  } catch (error) {
    ElMessage.error('获取操作记录失败')
  } finally {
    operationHistoryLoading.value = false
  }
}

const handleOperationHistorySizeChange = (size) => {
  operationHistoryPageSize.value = size;
  operationHistoryPage.value = 1;
  fetchOperationHistory();
};

const handleOperationHistoryPageChange = (page) => {
  operationHistoryPage.value = page;
  fetchOperationHistory();
};

// 删除操作记录
const handleDeleteOperationRecord = async (record) => {
  // 暂无API
  ElMessage.info('功能开发中')
}

// 获取用户订单列表
const fetchUserOrderList = async () => {
  if (!route.query.user_id) return
  orderListLoading.value = true
  try {
    const res = await getOrderList({ 
      user_id: route.query.user_id, 
      page: orderListPage.value, 
      count: orderListPageSize.value 
    })
    console.log('111',res)
    if (res.data.code === 200) {
      userOrderList.value = res.data.data.list || []
      orderListTotal.value = res.data.data.all_count || 0
    }
  } catch (error) {
    ElMessage.error('获取订单列表失败')
  } finally {
    orderListLoading.value = false
  }
}

const handleOrderListSizeChange = (size) => {
  orderListPageSize.value = size
  orderListPage.value = 1
  fetchUserOrderList()
}

const handleOrderListPageChange = (page) => {
  orderListPage.value = page
  fetchUserOrderList()
}

// 获取用户工单列表
const fetchUserTicketList = async () => {
  if (!route.query.user_id) return
  ticketListLoading.value = true
  try {
    const res = await getTickerList(ticketListPageSize.value, ticketListPage.value, undefined, undefined, undefined, route.query.user_id)
    if (res.code === 200) {
      userTicketList.value = res.data.data || []
      ticketListTotal.value = res.data.all_count || 0
    }
  } catch (error) {
    ElMessage.error('获取工单列表失败')
  } finally {
    ticketListLoading.value = false
  }
}

const handleTicketListSizeChange = (size) => {
  ticketListPageSize.value = size
  ticketListPage.value = 1
  fetchUserTicketList()
}

const handleTicketListPageChange = (page) => {
  ticketListPage.value = page
  fetchUserTicketList()
}

// 获取用户已购商品列表
const fetchUserGoodsList = async () => {
  if (!route.query.user_id) return
  goodsListLoading.value = true
  try {
    const res = await getUserGoodsList({ 
      user_id: route.query.user_id, 
      page: goodsListPage.value, 
      count: goodsListPageSize.value 
    })
    if (res.data.code === 200) {
      userGoodsList.value = res.data.data.data || res.data.data.list || []
      goodsListTotal.value = res.data.data.all_count || res.data.data.total || 0
    }
  } catch (error) {
    ElMessage.error('获取已购商品列表失败')
  } finally {
    goodsListLoading.value = false
  }
}

const handleGoodsListSizeChange = (size) => {
  goodsListPageSize.value = size
  goodsListPage.value = 1
  fetchUserGoodsList()
}

const handleGoodsListPageChange = (page) => {
  goodsListPage.value = page
  fetchUserGoodsList()
}

// 获取用户余额信息
const fetchUserBalance = async () => {
  if (!route.query.user_id) return
  try {
    const res = await getUserBalanceCount({ user_id: route.query.user_id })
    if (res.data.code === 200) {
      userBalance.value = {
        balance: res.data.data.balance || 0,
        frozen_balance: res.data.data.frozen_balance || 0,
        total_recharge: res.data.data.total_recharge || 0,
        total_consume: res.data.data.total_consume || 0
      }
    }
  } catch (error) {
    console.error('获取用户余额失败:', error)
  }
}

// 订单状态
const getOrderStatusText = (status) => {
  const map = { 0: '待支付', 1: '已支付', 2: '已取消', 3: '已退款', 4: '已完成' }
  return map[status] || '未知'
}

const getOrderStatusType = (status) => {
  const map = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger', 4: 'success' }
  return map[status] || 'info'
}

// 工单状态
const getTicketStatusText = (status) => {
  const map = { 0: '待处理', 1: '处理中', 2: '已回复', 3: '已关闭' }
  return map[status] || '未知'
}

const getTicketStatusType = (status) => {
  const map = { 0: 'warning', 1: 'primary', 2: 'success', 3: 'info' }
  return map[status] || 'info'
}

// 查看订单详情
const handleViewOrder = (row) => {
  router.push({
    path: '/order/list',
    query: { order_id: row.order_id }
  })
}

// 查看工单详情
const handleViewTicket = (row) => {
  router.push({
    path: '/ticket/detail',
    query: { id: row.work_id }
  })
}

// 余额操作
const handleRecharge = () => {
  router.push({
    path: '/user/balance',
    query: { user_id: userInfo.value.UserId, action: 'recharge' }
  })
}

const handleDeduct = () => {
  router.push({
    path: '/user/balance',
    query: { user_id: userInfo.value.UserId, action: 'deduct' }
  })
}

const handleViewBalanceHistory = () => {
  router.push({
    path: '/user/balance',
    query: { user_id: userInfo.value.UserId }
  })
}

// 删除用户
const handleDeleteUser = async () => {
  try {
    ElMessageBox.confirm('确定要删除该用户吗？此操作不可恢复！', '警告', {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await deleteUser({ user_id: userInfo.value.UserId })
      if (res.data.code === 200) {
        ElMessage.success('用户删除成功')
        setTimeout(() => {
          goBack()
        }, 2000)
      } else {
        ElMessage.error('用户删除失败')
      }
    }).catch(() => {});
  } catch (error) {
    ElMessage.error('删除用户失败')
  }
}

// 模拟登录
const handleSimulateLogin = async () => {
  try {
    const res = await mockUserLogin({ user_id: userInfo.value.UserId })
    if (res.data.code === 200) {
      loginToken.value = res.data.data.token || ''
      loginExpire.value = res.data.data.expire_time || ''
      selectedEnvironment.value = ''
      tokenDialogVisible.value = true
      //ElMessage.success('模拟登录成功')
    } else {
      ElMessage.error(res.data.message || '模拟登录失败')
    }
  } catch (error) {
    ElMessage.error('模拟登录失败')
  }
}

// 确认跳转
const confirmJump = () => {
  if (!selectedEnvironment.value) {
    ElMessage.warning('请选择登录环境')
    return
  }
  const baseUrl = environments[selectedEnvironment.value]
  const url = `${baseUrl}/token-login?token=${loginToken.value}&expire=${loginExpire.value}`
  window.open(url, '_blank')
  const envName = selectedEnvironment.value === 'production' ? '正式' : selectedEnvironment.value === 'test' ? '测试' : '本地'
  ElMessage.success(`正在跳转到${envName}环境`)
  tokenDialogVisible.value = false
}

// 获取实名状态文本
const getRealNameStatusText = (status) => {
  const map = { 0: '未认证', 1: '已认证', 2: '认证中', 3: '认证失败' }
  return map[status] || '未知'
}

// 获取实名类型文本
const getRealNameTypeText = (type) => {
  const map = { 0: '个人', 1: '企业', 2: '其他' }
  return map[type] || '未知'
}

// 获取当前头像
const fetchCurrentAvatar = async (coverId) => {
  if (!coverId) {
    currentAvatarUrl.value = ''
    return
  }
  try {
    const res = await getFileDetail({ file_id: coverId })
    if (res.data.code === 200) {
        currentAvatarUrl.value = res.data.data.url
    }
  } catch (error) {
    currentAvatarUrl.value = ''
  }
}

// 提交头像修改
const submitAvatarModify = async () => {
  try {
    const res = await updateUserAvatar({
      user_id: avatarForm.user_id,
      cover_id: avatarForm.cover_id
    })
    if (res.data.code == 200) {
      ElMessage.success('头像修改成功')
      avatarDialogVisible.value = false
      fetchUserInfo()
    }
  } catch (error) {
    ElMessage.error('头像修改失败')
  }
}

const handleAvatarConfirm = (data) => {
  selectedAvatarId.value = data.cover_id
  
  if (editDialogVisible.value) {
    editForm.CoverID = selectedAvatarId.value
  }
  
  if (avatarDialogVisible.value) {
    avatarForm.cover_id = data.cover_id
    avatarPreviewUrl.value = data.url
  }
  
  ElMessage.success('头像选择成功，请点击确定按钮保存')
}

// 提交密码修改
const submitPasswordModify = async () => {
  try {
    const res = await updateUserPassword({
      user_id: passwordForm.user_id,
      password: passwordForm.password
    })
    if (res.data.code === 200) {
      ElMessage.success('密码修改成功')
      passwordDialogVisible.value = false
    }
  } catch (error) {
    ElMessage.error('密码修改失败')
  }
}

// 提交用户组修改
const submitGroupModify = async () => {
  try {
    const res = await updateUserGroup({
      user_id: groupForm.user_id,
      user_group_id: groupForm.user_group_id
    })
    if (res.data.code == 200) {
      ElMessage.success('用户组修改成功')
      groupDialogVisible.value = false
      fetchUserInfo()
    }
  } catch (error) {
    ElMessage.error('用户组修改失败')
  }
}

// 提交实名信息修改
const submitRealnameModify = async () => {
  try {
    const res = await updateUserRealName({
      user_id: realnameForm.user_id,
      name: realnameForm.name,
      id_card: realnameForm.id_card,
      type: realnameForm.type,
      status: realnameForm.status
    })
    if (res.data.code == 200) {
      ElMessage.success('实名信息修改成功')
      realnameDialogVisible.value = false
      fetchUserInfo()
    }
  } catch (error) {
    ElMessage.error('实名信息修改失败')
  }
}

// 管理员权限管理
const handleTokenManage = async () => {
  adminForm.user_id = userInfo.value.UserId
  adminForm.admin_group_id = ''
  await fetchAdminGroupList()
  adminDialogVisible.value = true
}

const fetchAdminGroupList = async () => {
  adminGroupLoading.value = true
  try {
    const res = await getAdminGroupList({ params: { page: 1, count: 10 } })
    if (res.data.code === 200) {
      adminGroupList.value = res.data.data?.data || res.data.data || []
    }
  } catch (error) {
    adminGroupList.value = []
  } finally {
    adminGroupLoading.value = false
  }
}

const submitAdminModify = async () => {
  if (!adminForm.admin_group_id) {
    ElMessage.warning('请选择管理员组')
    return
  }
  try {
    const res = await updateUserAdmin({
      user_id: adminForm.user_id,
      admin_group_id: adminForm.admin_group_id
    })
    if (res.data.code === 200) {
      ElMessage.success('管理员权限修改成功')
      adminDialogVisible.value = false
      fetchUserInfo()
    } else {
      ElMessage.error(res.data.message || '管理员权限修改失败')
    }
  } catch (error) {
    ElMessage.error('管理员权限修改失败')
  }
}

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return '未设置'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit', second: '2-digit'
  })
}

// 余额格式化（分转元，保留2位小数）
const formatBalance = (price) => {
  if (price === undefined || price === null) return '0.00'
  return (price / 100).toFixed(2)
}

const fetchActiveTabData = () => {
  const tab = activeTabName.value
  if (tab === '1') fetchLoginHistory()
  else if (tab === '2') fetchOperationHistory()
  else if (tab === '3') fetchUserOrderList()
  else if (tab === '4') fetchUserTicketList()
  else if (tab === '5') fetchUserGoodsList()
}

const loadUserData = async () => {  
  if(!route.query.user_id){
    ElMessage.error('缺少用户ID参数');
    goBack();
    return;
  }
  await fetchUserInfo();
  await fetchUserBalance();
  fetchActiveTabData();
}

// 初始化
onMounted(() => {
  if (route.query.user_id) {
    const savedTab = localStorage.getItem('userDetailActiveTab');
    if (savedTab) {
      activeTabName.value = savedTab;
    }
    loadUserData();
  } else {
    ElMessage.error('缺少用户ID参数');
    goBack();
  }
})

onActivated(() => {
  loadUserData();
})
</script>

<style scoped>
.user-detail-page {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2d3d;
}

.back-btn {
  font-size: 14px;
  color: #606266;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Profile Card */
.profile-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
  overflow: visible;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 20px;
}

.profile-basic {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.avatar-wrapper {
  position: relative;
  cursor: pointer;
}

.user-avatar {
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.avatar-wrapper:hover .user-avatar {
  transform: scale(1.05);
}

.avatar-edit-hint {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #409eff;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid #fff;
}

.user-identity .name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.user-name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #303133;
}

.id-row {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 13px;
}

.id-row .value {
  color: #606266;
  font-family: monospace;
  margin-left: 4px;
}

/* 统一的用户数据概览区域 */
.profile-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  flex-wrap: wrap;
}

.profile-stats .stat-item {
  text-align: center;
  min-width: 70px;
}

.profile-stats .stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.profile-stats .stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.stats-divider {
  height: 40px;
  margin: 0 8px;
}

.action-divider {
  margin: 0 0 20px 0;
}

.quick-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 10px 10px;
}

/* Detail Grid */
.detail-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
}

.info-section-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.card-header .title {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.right-column {
  overflow: hidden;
  min-width: 0;
}

.tabs-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  min-height: 500px;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.avatar-manage-content {
  text-align: center;
  padding: 20px 0;
}

.current-avatar-preview {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.current-avatar-preview .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}

.current-avatar-preview:hover .overlay {
  opacity: 1;
}

.hint {
  color: #909399;
  font-size: 13px;
}

/* 推荐人选择器 */
/* 推荐人选择器样式 */
.clear-icon {
  cursor: pointer;
  color: #909399;
  transition: color 0.2s;
}

.clear-icon:hover {
  color: #f56c6c;
}


/* Token Dialog */
.token-container {
  padding: 20px 0;
}

.env-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.env-option span:first-child {
  font-size: 14px;
  color: #303133;
}

.env-url {
  font-size: 12px;
  color: #909399;
}

/* Balance Card */
.balance-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.balance-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.balance-card .card-header .title {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.balance-content {
  padding: 10px 0;
}

.balance-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.balance-item {
  text-align: center;
  padding: 16px;
  background: #f9fafc;
  border-radius: 8px;
}

.balance-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}

.balance-value {
  font-size: 24px;
  font-weight: 700;
}

.balance-value.primary {
  color: #409eff;
}

.balance-value.warning {
  color: #e6a23c;
}

.balance-value.success {
  color: #67c23a;
}

.balance-value.danger {
  color: #f56c6c;
}

.balance-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .profile-stats {
    width: 100%;
    justify-content: flex-start;
    background: #f9fafc;
    padding: 16px;
    border-radius: 8px;
    margin-left: 0;
  }
  
  .stats-divider {
    display: none;
  }
  
  .balance-overview {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .balance-overview {
    grid-template-columns: 1fr;
  }
  
  .profile-stats {
    gap: 16px;
  }
  
  .profile-stats .stat-item {
    min-width: 60px;
  }
}
</style>
