<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- 顶部导航栏 -->
    <nav class="bg-white dark:bg-gray-800 shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">用户管理</h1>
          </div>
          <div class="flex items-center space-x-4">
            <button 
              @click="handleExportReport"
              class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center space-x-2"
            >
              <DownloadIcon class="h-5 w-5" />
              <span>导出报表</span>
            </button>
            <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
              <SettingsIcon class="h-6 w-6" />
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 搜索和筛选区域 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="relative">
            <input
              v-model="searchText"
              @input="handleSearch"
              type="text"
              placeholder="搜索用户名/手机号..."
              class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
            <SearchIcon class="absolute left-3 top-2.5 h-5 w-5 text-gray-400 dark:text-gray-500" />
          </div>
          <select 
            v-model="userLevel"
            @change="handleLevelChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有等级</option>
            <option value="diamond">钻石会员</option>
            <option value="platinum">铂金会员</option>
            <option value="gold">黄金会员</option>
            <option value="silver">白银会员</option>
            <option value="bronze">青铜会员</option>
          </select>
          <select 
            v-model="userStatus"
            @change="handleStatusChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有状态</option>
            <option value="active">正常</option>
            <option value="inactive">禁用</option>
            <option value="banned">封禁</option>
          </select>
          <select 
            v-model="timeRange"
            @change="handleTimeRangeChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有时间</option>
            <option value="today">今天</option>
            <option value="week">本周</option>
            <option value="month">本月</option>
            <option value="quarter">本季度</option>
          </select>
        </div>
      </div>

      <!-- 用户统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
              <UsersIcon class="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">总用户数</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">1,234</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
              <UserPlusIcon class="h-6 w-6 text-green-600 dark:text-green-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">活跃用户</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">1,024</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900">
              <UserCheckIcon class="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">新增用户</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">56</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-red-100 dark:bg-red-900">
              <UserXIcon class="h-6 w-6 text-red-600 dark:text-red-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">封禁用户</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">12</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户分析图表 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">用户增长趋势</h3>
          <div class="h-64">
            <!-- 这里可以集成图表库，如 ECharts 或 Chart.js -->
            <div ref="growthChartRef" class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
              用户增长趋势图表
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">用户等级分布</h3>
          <div class="h-64">
            <!-- 这里可以集成图表库，如 ECharts 或 Chart.js -->
            <div ref="levelChartRef" class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400">
              用户等级分布图表
            </div>
          </div>
        </div>
      </div>

      <!-- 用户列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">用户信息</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">等级</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">消费</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              <tr v-for="user in paginatedUsers" :key="user.id" class="hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <img :src="user.avatar" :alt="user.name" class="h-10 w-10 rounded-full object-cover" />
                    <div class="ml-4">
                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{ user.name }}</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ user.phone }}</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4">
                  <span 
                    :class="[
                      'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
                      getLevelClass(user.level)
                    ]"
                  >
                    {{ getLevelText(user.level) }}
                  </span>
                </td>
                <td class="px-6 py-4">
                  <div class="text-sm text-gray-900 dark:text-white">总消费: ¥{{ user.totalSpent }}</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">订单数: {{ user.totalOrders }}</div>
                </td>
                <td class="px-6 py-4">
                  <span 
                    :class="[
                      'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
                      getStatusClass(user.status)
                    ]"
                  >
                    {{ getStatusText(user.status) }}
                  </span>
                </td>
                <td class="px-6 py-4 text-sm font-medium">
                  <button 
                    @click="handleViewUser(user)"
                    class="action-button view-button"
                  >
                    <EyeIcon class="h-4 w-4 inline-block mr-1" />
                    查看
                  </button>
                  <button 
                    @click="handleEditUser(user)"
                    class="action-button edit-button"
                  >
                    <EditIcon class="h-4 w-4 inline-block mr-1" />
                    编辑
                  </button>
                  <button 
                    v-if="user.status === 'active'"
                    @click="handleDeactivateUser(user)"
                    class="action-button deactivate-button"
                  >
                    <XIcon class="h-4 w-4 inline-block mr-1" />
                    禁用
                  </button>
                  <button 
                    v-if="user.status === 'inactive'"
                    @click="handleActivateUser(user)"
                    class="action-button activate-button"
                  >
                    <CheckIcon class="h-4 w-4 inline-block mr-1" />
                    启用
                  </button>
                  <button 
                    v-if="user.status !== 'banned'"
                    @click="handleBanUser(user)"
                    class="action-button ban-button"
                  >
                    <BanIcon class="h-4 w-4 inline-block mr-1" />
                    封禁
                  </button>
                  <button 
                    v-if="user.status === 'banned'"
                    @click="handleUnbanUser(user)"
                    class="action-button unban-button"
                  >
                    <CheckIcon class="h-4 w-4 inline-block mr-1" />
                    解封
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 分页 -->
      <div class="bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6 mt-4">
        <div class="flex-1 flex justify-between sm:hidden">
          <button 
            @click="handlePageChange(currentPage - 1)"
            :disabled="currentPage === 1"
            class="pagination-button"
          >
            上一页
          </button>
          <button 
            @click="handlePageChange(currentPage + 1)"
            :disabled="currentPage === totalPages"
            class="pagination-button"
          >
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700 dark:text-gray-300">
              显示 <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span> 到 
              <span class="font-medium">{{ Math.min(currentPage * pageSize, filteredUsers.length) }}</span> 条，共 
              <span class="font-medium">{{ filteredUsers.length }}</span> 条
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <button 
                @click="handlePageChange(currentPage - 1)"
                :disabled="currentPage === 1"
                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <ChevronLeftIcon class="h-5 w-5" />
              </button>
              <button 
                v-for="page in totalPages"
                :key="page"
                @click="handlePageChange(page)"
                :class="[
                  'relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium',
                  currentPage === page ? 'bg-blue-600 text-white border-blue-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
                ]"
              >
                {{ page }}
              </button>
              <button 
                @click="handlePageChange(currentPage + 1)"
                :disabled="currentPage === totalPages"
                class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <ChevronRightIcon class="h-5 w-5" />
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { 
  SearchIcon, 
  SettingsIcon, 
  ChevronLeftIcon, 
  ChevronRightIcon,
  UsersIcon,
  UserPlusIcon,
  UserCheckIcon,
  UserXIcon,
  DownloadIcon,
  EyeIcon,
  EditIcon,
  XIcon,
  CheckIcon,
  BanIcon
} from 'lucide-vue-next'

// 注册必要的组件
echarts.use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 状态管理
const isLoading = ref(false)
const searchText = ref('')
const userLevel = ref('')
const userStatus = ref('')
const timeRange = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 默认头像
const defaultAvatars = {
  user: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEBUlEQVR4nO2ZW2xUVRSGv332TCEtIKEUaAFpr1MohVIuBQR5ACUhQIIGNAiJGjU+mKgPhsc+mJj4ZnwxPGiMiS+YmPCggdfyBgYwXKo2bQu9wXRKW2hLQzstM3P2MmtnmDpzOXPOzGnGhC+ZzGT2Xmv/e6+91r/2PpBFFllkcV9DZOj5R4EaYDFQCRQDjwA5wDAwCPQCHUArcAXoS3fgc4EVwBrgKaAEcAO3gF7gGtAO/AacBy6lK/A5wBvAJmAp4FDPbwHtwFngKHAU6Eg18BXA28BmoAiIAt3AZeAX4CegCXCppzwDlALPAi8DS4AQcAP4DvgU+DtVwZcBe4E3gTzgH+Bb4ABwGQhPc48LmA+sB94DCoCbwD7gY2AgmcCdwHvAHiAPGAK+BD4HupK0FQKeB3YBK1GJ8RnwITCWqOHpgp8PfA28gkqNg8AO4K9EjE6BPOBd4ANUBF0H3gL+iNdgLPgKoAFYBUSAE8B24Ho8RuNEIfA5sA6VvZuB0/EYmQq+GDgGrARGgQ+AvcBEPM4kCQ+wE9iOyqQNqNSyhakS1wkcRlV4E/A6cCbNgWtYDHyPyqpDwHOoEjwJU0XgEFAH9APrUWlxr1AHnEJl1yFUdk2CUQTygB9QjasHVd/jqtWpQj6wGngcGADOAX8m4lgYeAn4EVUTXgSak3UoTKwDXkWVxH5UF3fTxPUxwQW8BXyPqh1vAr/H61wYeAb4CVWXX0A1qVSiEHgT1bQGUHPHzXgMCQNPAidRPf0lVHNKJfKBN1DzSQj4CrXKiAlhoBo4gxoRNqMWK6lCLrAJtcgJo0aov+MxJAxUAedQe5x3UNuGVMAN7ES1YwF8gtrexIQwUIZqVB5UlE4n61UMeBc1vLpQK9+EtuhC/VMXqnF4UWueZGeCqVAAfIJa0oaAXcDtRA0KA0WoXlwEDKMWLYkOa9PBi1qwlKM6x/vASDKGhIEC4AiwDBhDzaiJjA5TwY1KmzWoPtOI2m0lDWHABzSgFiNjwFbUGjwZuFE7uZdQPf4gqhZpIQwsBH5GbXy7gDXA70k4WITqM2tRmfI1qlZoQxjwoyJQixoZVgHnE3SwCjUvPInqM4dRtSIlEAb8qGVtDaqULQdaYnRqAXAC1UlvAT+gcyE+HYSBYlS0lqP6wkrgYhQHK1ELlGpUvW9EVXVtGXMvIQyUACeAJ1DbjyrgV+AhVKrUo3p8EHX8sB1VKjMGYeARVCotQW0cV6B2aDtQJ3EBVOm8YpfjwsA84EdgHjAJIeAuKlXuOQxGwIVKFTdqOHVkKvAsspgW/wGLGwDVYvNCYQAAAABJRU5ErkJggg=='
}

// 模拟数据
const mockUsers = ref([
  {
    id: 'U1001',
    name: '张三',
    phone: '13800138001',
    email: 'zhangsan@example.com',
    avatar: defaultAvatars.user,
    level: 'diamond',
    status: 'active',
    registerTime: '2024-01-15 10:30:00',
    lastLogin: '2024-03-20 15:45:00',
    totalOrders: 50,
    totalSpent: 99999
  },
  {
    id: 'U1002',
    name: '李四',
    phone: '13800138002',
    email: 'lisi@example.com',
    avatar: defaultAvatars.user,
    level: 'platinum',
    status: 'active',
    registerTime: '2024-02-01 14:20:00',
    lastLogin: '2024-03-19 09:15:00',
    totalOrders: 30,
    totalSpent: 49999
  },
  {
    id: 'U1003',
    name: '王五',
    phone: '13800138003',
    email: 'wangwu@example.com',
    avatar: defaultAvatars.user,
    level: 'gold',
    status: 'inactive',
    registerTime: '2023-12-10 16:45:00',
    lastLogin: '2024-03-15 11:30:00',
    totalOrders: 20,
    totalSpent: 29999
  },
  {
    id: 'U1004',
    name: '赵六',
    phone: '13800138004',
    email: 'zhaoliu@example.com',
    avatar: defaultAvatars.user,
    level: 'silver',
    status: 'banned',
    registerTime: '2024-03-01 09:10:00',
    lastLogin: '2024-03-20 16:20:00',
    totalOrders: 10,
    totalSpent: 9999
  },
  {
    id: 'U1005',
    name: '钱七',
    phone: '13800138005',
    email: 'qianqi@example.com',
    avatar: defaultAvatars.user,
    level: 'bronze',
    status: 'active',
    registerTime: '2023-11-20 11:25:00',
    lastLogin: '2024-03-20 14:35:00',
    totalOrders: 5,
    totalSpent: 4999
  }
])

// 用户统计数据
const userStats = ref({
  totalUsers: 1234,
  activeUsers: 1024,
  newUsers: 56,
  bannedUsers: 12
})

// 用户增长趋势数据
const userGrowthTrends = ref([
  { date: '2024-03-01', newUsers: 120, activeUsers: 800 },
  { date: '2024-03-02', newUsers: 150, activeUsers: 850 },
  { date: '2024-03-03', newUsers: 180, activeUsers: 900 },
  { date: '2024-03-04', newUsers: 200, activeUsers: 950 },
  { date: '2024-03-05', newUsers: 220, activeUsers: 1000 },
  { date: '2024-03-06', newUsers: 250, activeUsers: 1050 },
  { date: '2024-03-07', newUsers: 280, activeUsers: 1100 }
])

// 用户等级分布数据
const userLevelDistribution = ref([
  { level: 'diamond', count: 100, percentage: 8 },
  { level: 'platinum', count: 200, percentage: 16 },
  { level: 'gold', count: 300, percentage: 24 },
  { level: 'silver', count: 400, percentage: 32 },
  { level: 'bronze', count: 234, percentage: 19 }
])

// 计算属性
const filteredUsers = computed(() => {
  let result = [...mockUsers.value]
  
  // 搜索过滤
  if (searchText.value) {
    result = result.filter(user => 
      user.name.includes(searchText.value) ||
      user.phone.includes(searchText.value)
    )
  }
  
  // 等级过滤
  if (userLevel.value) {
    result = result.filter(user => user.level === userLevel.value)
  }
  
  // 状态过滤
  if (userStatus.value) {
    result = result.filter(user => user.status === userStatus.value)
  }
  
  // 时间范围过滤
  if (timeRange.value) {
    const now = new Date()
    result = result.filter(user => {
      // 这里可以根据实际需求添加时间过滤逻辑
      return true
    })
  }
  
  return result
})

const paginatedUsers = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredUsers.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredUsers.value.length / pageSize.value)
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleLevelChange = () => {
  currentPage.value = 1
}

const handleStatusChange = () => {
  currentPage.value = 1
}

const handleTimeRangeChange = () => {
  currentPage.value = 1
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const getLevelClass = (level) => {
  const classes = {
    diamond: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
    platinum: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
    gold: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
    silver: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300',
    bronze: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300'
  }
  return classes[level] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
}

const getLevelText = (level) => {
  const texts = {
    diamond: '钻石会员',
    platinum: '铂金会员',
    gold: '黄金会员',
    silver: '白银会员',
    bronze: '青铜会员'
  }
  return texts[level] || level
}

const getStatusClass = (status) => {
  const classes = {
    active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
    inactive: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300',
    banned: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
  }
  return classes[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
}

const getStatusText = (status) => {
  const texts = {
    active: '正常',
    inactive: '禁用',
    banned: '封禁'
  }
  return texts[status] || status
}

const handleViewUser = (user) => {
  console.log('查看用户:', user)
}

const handleEditUser = (user) => {
  console.log('编辑用户:', user)
}

const handleActivateUser = (user) => {
  console.log('启用用户:', user)
}

const handleDeactivateUser = (user) => {
  console.log('禁用用户:', user)
}

const handleBanUser = (user) => {
  console.log('封禁用户:', user)
}

const handleUnbanUser = (user) => {
  console.log('解封用户:', user)
}

const handleExportReport = () => {
  console.log('导出报表')
}

// 图表相关
const growthChartRef = ref(null)
const levelChartRef = ref(null)
let growthChart = null
let levelChart = null

// 初始化用户增长趋势图表
const initGrowthChart = () => {
  if (!growthChartRef.value) return
  
  if (growthChart) {
    growthChart.dispose()
  }
  
  growthChart = echarts.init(growthChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>{a0}: {c0}人<br/>{a1}: {c1}人'
    },
    legend: {
      data: ['新增用户', '活跃用户']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: userGrowthTrends.value.map(item => item.date),
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      name: '用户数量'
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        data: userGrowthTrends.value.map(item => item.newUsers),
        smooth: true,
        areaStyle: {
          opacity: 0.3
        },
        lineStyle: {
          width: 3
        },
        itemStyle: {
          color: '#4F46E5'
        }
      },
      {
        name: '活跃用户',
        type: 'line',
        data: userGrowthTrends.value.map(item => item.activeUsers),
        smooth: true,
        areaStyle: {
          opacity: 0.3
        },
        lineStyle: {
          width: 3
        },
        itemStyle: {
          color: '#10B981'
        }
      }
    ]
  }
  growthChart.setOption(option)
}

// 初始化用户等级分布图表
const initLevelChart = () => {
  if (!levelChartRef.value) return
  
  if (levelChart) {
    levelChart.dispose()
  }
  
  levelChart = echarts.init(levelChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '用户等级',
        type: 'pie',
        radius: '50%',
        data: userLevelDistribution.value.map(item => ({
          value: item.count,
          name: getLevelText(item.level)
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {c}人'
        }
      }
    ]
  }
  levelChart.setOption(option)
}

// 监听窗口大小变化
const handleResize = () => {
  if (growthChart) growthChart.resize()
  if (levelChart) levelChart.resize()
}

// 生命周期钩子
onMounted(() => {
  // 初始化图表
  initGrowthChart()
  initLevelChart()
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  if (growthChart) growthChart.dispose()
  if (levelChart) levelChart.dispose()
})
</script>

<style scoped>
@media (max-width: 475px) {
  .grid {
    @apply grid-cols-1;
  }
  table {
    @apply block overflow-x-auto whitespace-nowrap;
  }
}

/* 操作按钮样式 */
.action-button {
  @apply text-sm font-medium mr-3;
}

.view-button {
  @apply text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300;
}

.edit-button {
  @apply text-yellow-600 dark:text-yellow-400 hover:text-yellow-900 dark:hover:text-yellow-300;
}

.activate-button {
  @apply text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300;
}

.deactivate-button {
  @apply text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300;
}

.ban-button {
  @apply text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300;
}

.unban-button {
  @apply text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300;
}

/* 分页样式 */
.pagination-button {
  @apply relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600;
}

.pagination-button-active {
  @apply bg-blue-600 text-white border-blue-600;
}

/* 加载动画 */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}
</style> 