<script setup>
import { ref, onMounted, computed } from "vue"
import AOS from "aos"
import "aos/dist/aos.css"
import { message, Upload } from "ant-design-vue"

onMounted(() => {
  AOS.init({
    duration: 800,
    offset: 120,
    easing: "ease-out-cubic",
    once: false,
  })
})

// 角色数据
const roleOptions = [
  { id: 1, name: "管理员" },
  { id: 2, name: "编辑" },
  { id: 3, name: "普通用户" },
  { id: 4, name: "访客" },
]

// 权限数据
const allPermissions = [
  { id: 1, name: "用户管理" },
  { id: 2, name: "内容管理" },
  { id: 3, name: "订单管理" },
  { id: 4, name: "系统设置" },
  { id: 5, name: "数据统计" },
  { id: 6, name: "财务管理" },
  { id: 7, name: "客户管理" },
  { id: 8, name: "营销管理" },
]

// 用户状态选项
const statusOptions = [
  { value: "启用", label: "启用" },
  { value: "禁用", label: "禁用" },
]

// 模拟用户数据
const dataSource = ref([
  {
    id: 1,
    username: "admin",
    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
    email: "admin@example.com",
    phone: "13800138000",
    role: roleOptions[0],
    status: "启用",
    createdAt: "2024-01-15T08:30:00Z",
    lastLogin: "2024-03-28T10:15:30Z",
    permissions: [
      allPermissions[0],
      allPermissions[1],
      allPermissions[2],
      allPermissions[3],
      allPermissions[4],
    ],
  },
  {
    id: 2,
    username: "editor",
    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
    email: "editor@example.com",
    phone: "13900139000",
    role: roleOptions[1],
    status: "启用",
    createdAt: "2024-02-10T14:20:00Z",
    lastLogin: "2024-03-27T16:45:12Z",
    permissions: [allPermissions[1], allPermissions[2]],
  },
  {
    id: 3,
    username: "user1",
    avatar: "https://randomuser.me/api/portraits/men/22.jpg",
    email: "user1@example.com",
    phone: "13700137000",
    role: roleOptions[2],
    status: "启用",
    createdAt: "2024-02-20T09:15:00Z",
    lastLogin: "2024-03-25T11:30:45Z",
    permissions: [allPermissions[2]],
  },
  {
    id: 4,
    username: "user2",
    avatar: "https://randomuser.me/api/portraits/women/24.jpg",
    email: "user2@example.com",
    phone: "13600136000",
    role: roleOptions[2],
    status: "禁用",
    createdAt: "2024-03-05T16:40:00Z",
    lastLogin: "2024-03-20T09:10:22Z",
    permissions: [allPermissions[2]],
  },
  {
    id: 5,
    username: "guest",
    avatar: "https://randomuser.me/api/portraits/men/67.jpg",
    email: "guest@example.com",
    phone: "13500135000",
    role: roleOptions[3],
    status: "启用",
    createdAt: "2024-03-10T11:25:00Z",
    lastLogin: "2024-03-15T14:20:18Z",
    permissions: [],
  },
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(dataSource.value.length)

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

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

// 搜索和筛选
const searchQuery = ref("")
const filterRole = ref("all")
const filterStatus = ref("all")

const filteredData = computed(() => {
  return dataSource.value.filter(
      (user) =>
          (searchQuery.value === "" ||
              user.username.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
              user.email.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
              user.phone.includes(searchQuery.value)) &&
          (filterRole.value === "all" || user.role.id === parseInt(filterRole.value)) &&
          (filterStatus.value === "all" || user.status === filterStatus.value)
  )
})

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

// 模态框
const showModal = ref(false)
const currentItem = ref(null)
const formLoading = ref(false)

// 头像上传相关
const fileList = ref([])
const uploading = ref(false)
const previewVisible = ref(false)
const previewImage = ref("")

const handlePreview = (file) => {
  previewImage.value = file.url || file.preview
  previewVisible.value = true
}

const handleUploadChange = (info) => {
  if (info.file.status === "uploading") {
    uploading.value = true
    return
  }
  if (info.file.status === "done") {
    // 模拟上传成功后获取图片URL
    currentItem.value.avatar = "https://randomuser.me/api/portraits/men/32.jpg"
    uploading.value = false
    message.success("头像上传成功")
  }
  if (info.file.status === "error") {
    uploading.value = false
    message.error("头像上传失败")
  }
}

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png"
  if (!isJpgOrPng) {
    message.error("只能上传JPG或PNG格式的图片!")
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error("图片大小不能超过2MB!")
  }
  return isJpgOrPng && isLt2M
}

const customRequest = ({ onSuccess }) => {
  // 模拟上传
  setTimeout(() => {
    onSuccess("ok", { status: "done" })
  }, 800)
}

const openModal = (item = null) => {
  currentItem.value = item
      ? JSON.parse(JSON.stringify(item)) // 深拷贝避免直接修改原对象
      : {
        username: "",
        avatar: "",
        email: "",
        phone: "",
        role: roleOptions[2], // 默认为普通用户
        status: "启用",
        permissions: [],
      }

  // 重置文件列表
  fileList.value = []
  if (currentItem.value.avatar) {
    fileList.value = [
      {
        uid: "-1",
        name: "avatar.jpg",
        status: "done",
        url: currentItem.value.avatar,
      },
    ]
  }

  showModal.value = true
}

const closeModal = () => {
  showModal.value = false
}

// 确认删除模态框
const showDeleteConfirm = ref(false)
const itemToDelete = ref(null)

const openDeleteConfirm = (id) => {
  itemToDelete.value = id
  showDeleteConfirm.value = true
}

const closeDeleteConfirm = () => {
  showDeleteConfirm.value = false
  itemToDelete.value = null
}

const handleDelete = () => {
  if (itemToDelete.value) {
    dataSource.value = dataSource.value.filter((item) => item.id !== itemToDelete.value)
    totalItems.value = dataSource.value.length
    closeDeleteConfirm()
    message.success("用户删除成功")
  }
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" })
}

const handleSubmit = () => {
  formLoading.value = true

  // 模拟API请求
  setTimeout(() => {
    if (currentItem.value.id) {
      // 更新现有用户
      const index = dataSource.value.findIndex((item) => item.id === currentItem.value.id)
      if (index !== -1) {
        dataSource.value[index] = { ...currentItem.value }
      }
      message.success("用户更新成功")
    } else {
      // 添加新用户
      const newId = Math.max(...dataSource.value.map((item) => item.id), 0) + 1
      dataSource.value.push({
        ...currentItem.value,
        id: newId,
        createdAt: new Date().toISOString(),
        lastLogin: null,
      })
      totalItems.value = dataSource.value.length
      message.success("用户创建成功")
    }

    formLoading.value = false
    closeModal()
  }, 800)
}

// 权限管理
const permissionInputValue = ref("")
const handleAddPermission = () => {
  if (permissionInputValue.value) {
    // 检查是否已存在该权限
    const existingPermission = allPermissions.find(
        (permission) => permission.name.toLowerCase() === permissionInputValue.value.toLowerCase()
    )

    // 如果存在且未添加到当前用户，则添加
    if (
        existingPermission &&
        !currentItem.value.permissions.some((permission) => permission.id === existingPermission.id)
    ) {
      currentItem.value.permissions.push(existingPermission)
    }
    // 如果不存在，创建新权限并添加
    else if (!existingPermission) {
      const newPermissionId = Math.max(...allPermissions.map((permission) => permission.id), 0) + 1
      const newPermission = { id: newPermissionId, name: permissionInputValue.value }
      allPermissions.push(newPermission)
      currentItem.value.permissions.push(newPermission)
    }

    permissionInputValue.value = ""
  }
}

const removePermission = (index) => {
  currentItem.value.permissions.splice(index, 1)
}

// 重置密码模态框
const showResetPasswordModal = ref(false)
const resetPasswordUserId = ref(null)
const resetPasswordUsername = ref("")
const newPassword = ref("")
const confirmPassword = ref("")
const resetPasswordLoading = ref(false)
const passwordError = ref("")

const openResetPasswordModal = (user) => {
  resetPasswordUserId.value = user.id
  resetPasswordUsername.value = user.username
  newPassword.value = ""
  confirmPassword.value = ""
  passwordError.value = ""
  showResetPasswordModal.value = true
}

const closeResetPasswordModal = () => {
  showResetPasswordModal.value = false
}

const handleResetPassword = () => {
  // 验证密码
  if (!newPassword.value) {
    passwordError.value = "请输入新密码"
    return
  }

  if (newPassword.value.length < 6) {
    passwordError.value = "密码长度不能少于6位"
    return
  }

  if (newPassword.value !== confirmPassword.value) {
    passwordError.value = "两次输入的密码不一致"
    return
  }

  resetPasswordLoading.value = true

  // 模拟API请求
  setTimeout(() => {
    message.success(`用户 ${resetPasswordUsername.value} 的密码已重置`)
    resetPasswordLoading.value = false
    closeResetPasswordModal()
  }, 800)
}
</script>

<template>
  <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6" data-aos="fade-up">
    <!-- 页面标题和新建按钮 -->
    <div class="mb-6 flex justify-between items-center">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white">用户管理</h2>
      <button
          class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
          @click="openModal()"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        新建用户
      </button>
    </div>

    <!-- 搜索和筛选 -->
    <div class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="relative">
        <input
            v-model="searchQuery"
            type="text"
            class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
            placeholder="搜索用户名、邮箱或电话"
        />
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      <div>
        <select
            v-model="filterRole"
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer"
        >
          <option value="all">所有角色</option>
          <option v-for="role in roleOptions" :key="role.id" :value="role.id">{{ role.name }}</option>
        </select>
      </div>

      <div>
        <select
            v-model="filterStatus"
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer"
        >
          <option value="all">所有状态</option>
          <option v-for="status in statusOptions" :key="status.value" :value="status.value">{{ status.label }}</option>
        </select>
      </div>
    </div>

    <!-- 表格 -->
    <div class="rounded-2xl border border-gray-200 dark:border-gray-700">
      <div class="overflow-x-auto" style="height: 60vh">
        <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 scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
              用户信息
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
              联系方式
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
              角色
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
              状态
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">
              最后登录
            </th>
            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-700 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 filteredAndPaginatedData" :key="user.id" class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center space-x-3">
                <div class="flex-shrink-0 h-10 w-10 rounded-full overflow-hidden">
                  <img :src="user.avatar" :alt="user.username" class="h-full w-full object-cover" />
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-900 dark:text-white">{{ user.username }}</div>
                  <div class="text-xs text-gray-500 dark:text-gray-400">ID: {{ user.id }}</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">{{ user.email }}</div>
              <div class="text-xs text-gray-500 dark:text-gray-400">{{ user.phone }}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
              {{ user.role.name }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span
                    :class="`px-2 py-1 text-xs font-medium rounded-full ${
                    user.status === '启用'
                      ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
                      : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                  }`"
                >
                  {{ user.status }}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
              {{ user.lastLogin ? formatDate(user.lastLogin) : '从未登录' }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <div class="flex justify-end space-x-2">
                <button
                    class="p-1.5 text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg transition-colors cursor-pointer"
                    title="编辑"
                    @click="openModal(user)"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                </button>
                <button
                    class="p-1.5 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors cursor-pointer"
                    title="重置密码"
                    @click="openResetPasswordModal(user)"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                  </svg>
                </button>
                <button
                    class="p-1.5 text-rose-600 hover:text-rose-800 dark:text-rose-400 dark:hover:text-rose-300 hover:bg-rose-50 dark:hover:bg-rose-900/20 rounded-lg transition-colors cursor-pointer"
                    title="删除"
                    @click="openDeleteConfirm(user.id)"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
            </td>
          </tr>
          <tr v-if="filteredAndPaginatedData.length === 0">
            <td colspan="6" class="px-6 py-10 text-center text-gray-500 dark:text-gray-400">
              没有找到匹配的用户
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="bg-white dark:bg-gray-800 px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <div class="text-sm text-gray-700 dark:text-gray-300">
          共 {{ filteredData.length }} 条记录
        </div>
        <div class="flex space-x-1">
          <button
              class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
              :disabled="currentPage === 1"
              :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
              @click="currentPage > 1 && changePage(currentPage - 1)"
          >
            上一页
          </button>
          <button
              v-for="page in Math.ceil(filteredData.length / pageSize)"
              :key="page"
              class="px-3 py-1 border rounded-md text-sm font-medium cursor-pointer"
              :class="page === currentPage
              ? 'bg-rose-600 text-white border-rose-600 dark:bg-rose-600 dark:border-rose-600'
              : 'border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'"
              @click="changePage(page)"
          >
            {{ page }}
          </button>
          <button
              class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
              :disabled="currentPage === Math.ceil(filteredData.length / pageSize)"
              :class="{ 'opacity-50 cursor-not-allowed': currentPage === Math.ceil(filteredData.length / pageSize) }"
              @click="currentPage < Math.ceil(filteredData.length / pageSize) && changePage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 用户表单模态框 -->
  <div v-if="showModal" class="fixed inset-0 z-50 overflow-y-scroll" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div
          class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
          aria-hidden="true"
          @click="closeModal"
      ></div>

      <!-- 使模态框居中 -->
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

      <!-- 模态框内容 -->
      <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
        <div class="bg-white dark:bg-gray-800 px-6 pt-5 pb-4 sm:p-6">
          <div class="flex justify-between items-center mb-5">
            <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white" id="modal-title">
              {{ currentItem?.id ? '编辑用户' : '新建用户' }}
            </h3>
            <button
                class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 cursor-pointer"
                @click="closeModal"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          <form @submit.prevent="handleSubmit" class="space-y-6">
            <!-- 基本信息 -->
            <div class="grid grid-cols-1 gap-6">
              <!-- 用户名 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">用户名</label>
                <input
                    v-model="currentItem.username"
                    type="text"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                    placeholder="请输入用户名"
                    required
                />
              </div>

              <!-- 邮箱 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">邮箱</label>
                <input
                    v-model="currentItem.email"
                    type="email"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                    placeholder="请输入邮箱"
                    required
                />
              </div>

              <!-- 电话 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">电话</label>
                <input
                    v-model="currentItem.phone"
                    type="text"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                    placeholder="请输入电话"
                />
              </div>

              <!-- 角色 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">角色</label>
                <select
                    v-model="currentItem.role"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer"
                >
                  <option v-for="role in roleOptions" :key="role.id" :value="role">
                    {{ role.name }}
                  </option>
                </select>
              </div>

              <!-- 状态 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">状态</label>
                <select
                    v-model="currentItem.status"
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white cursor-pointer"
                >
                  <option v-for="option in statusOptions" :key="option.value" :value="option.value">
                    {{ option.label }}
                  </option>
                </select>
              </div>

              <!-- 头像上传 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">头像</label>
                <div class="border border-gray-300 dark:border-gray-600 rounded-xl p-4 dark:bg-gray-700">
                  <Upload
                      v-model:file-list="fileList"
                      list-type="picture-card"
                      :before-upload="beforeUpload"
                      :custom-request="customRequest"
                      @preview="handlePreview"
                      @change="handleUploadChange"
                      :show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
                      :maxCount="1"
                  >
                    <div v-if="fileList.length < 1">
                      <div class="ant-upload-text flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <span>点击上传头像</span>
                      </div>
                    </div>
                  </Upload>
                  <div class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                    支持JPG、PNG格式，大小不超过2MB
                  </div>
                </div>
              </div>

              <!-- 权限 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">权限</label>
                <div class="flex flex-wrap gap-2 mb-2">
                  <span
                      v-for="(permission, index) in currentItem.permissions"
                      :key="index"
                      class="px-3 py-1.5 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-300 text-sm font-medium rounded-lg flex items-center"
                  >
                    {{ permission.name }}
                    <button
                        type="button"
                        class="ml-1.5 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-200 cursor-pointer"
                        @click="removePermission(index)"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    </button>
                  </span>
                </div>
                <div class="flex">
                  <select
                      v-model="permissionInputValue"
                      class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-xl focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  >
                    <option value="">选择权限</option>
                    <option v-for="permission in allPermissions" :key="permission.id" :value="permission.name">
                      {{ permission.name }}
                    </option>
                  </select>
                  <button
                      type="button"
                      class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-r-xl transition-colors cursor-pointer"
                      @click="handleAddPermission"
                  >
                    添加
                  </button>
                </div>
              </div>
            </div>

            <!-- 表单按钮 -->
            <div class="flex justify-end space-x-3 pt-4">
              <button
                  type="button"
                  class="px-5 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
                  @click="closeModal"
              >
                取消
              </button>
              <button
                  type="submit"
                  class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
                  :disabled="formLoading"
              >
                <span v-if="formLoading" class="mr-2">
                  <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                </span>
                {{ currentItem?.id ? '保存修改' : '创建用户' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除确认模态框 -->
  <div v-if="showDeleteConfirm" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div
          class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
          aria-hidden="true"
          @click="closeDeleteConfirm"
      ></div>

      <!-- 使模态框居中 -->
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

      <!-- 模态框内容 -->
      <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
        <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/30 sm:mx-0 sm:h-10 sm:w-10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
                确认删除
              </h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                  确定要删除这个用户吗？此操作无法撤销。
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button
              type="button"
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm cursor-pointer"
              @click="handleDelete"
          >
            确认
          </button>
          <button
              type="button"
              class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm cursor-pointer"
              @click="closeDeleteConfirm"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 重置密码模态框 -->
  <div v-if="showResetPasswordModal" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div
          class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
          aria-hidden="true"
          @click="closeResetPasswordModal"
      ></div>

      <!-- 使模态框居中 -->
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

      <!-- 模态框内容 -->
      <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
        <div class="bg-white dark:bg-gray-800 px-6 pt-5 pb-4 sm:p-6">
          <div class="flex justify-between items-center mb-5">
            <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white" id="modal-title">
              重置密码 - {{ resetPasswordUsername }}
            </h3>
            <button
                class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 cursor-pointer"
                @click="closeResetPasswordModal"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          <form @submit.prevent="handleResetPassword" class="space-y-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">新密码</label>
              <input
                  v-model="newPassword"
                  type="password"
                  class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                  placeholder="请输入新密码"
                  required
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">确认密码</label>
              <input
                  v-model="confirmPassword"
                  type="password"
                  class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-rose-500 focus:border-rose-500 dark:bg-gray-700 dark:text-white"
                  placeholder="请再次输入新密码"
                  required
              />
            </div>

            <div v-if="passwordError" class="text-sm text-red-600 dark:text-red-400">
              {{ passwordError }}
            </div>

            <div class="flex justify-end space-x-3 pt-4">
              <button
                  type="button"
                  class="px-5 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
                  @click="closeResetPasswordModal"
              >
                取消
              </button>
              <button
                  type="submit"
                  class="px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
                  :disabled="resetPasswordLoading"
              >
                <span v-if="resetPasswordLoading" class="mr-2">
                  <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                </span>
                确认重置
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 图片预览模态框 -->
  <div v-if="previewVisible" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div
          class="fixed inset-0 transition-opacity backdrop-blur-xl bg-gray-500/80 dark:bg-gray-900/80"
          aria-hidden="true"
          @click="previewVisible = false"
      ></div>

      <!-- 使模态框居中 -->
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

      <!-- 模态框内容 -->
      <div class="inline-block align-bottom bg-transparent rounded-lg text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full relative z-50">
        <div class="relative">
          <button
              class="absolute top-2 right-2 p-2 rounded-full bg-gray-800/50 text-white hover:bg-gray-700/50 transition-colors cursor-pointer"
              @click="previewVisible = false"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          <img :src="previewImage" class="max-h-[80vh] max-w-full rounded-lg shadow-xl" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 自定义样式 */

/* 毛玻璃效果增强 */
.backdrop-blur-xl {
  backdrop-filter: blur(16px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* 上传组件暗黑模式适配 */
:deep(.ant-upload-list-picture-card .ant-upload-list-item) {
  border-color: #4b5563;
}

:deep(.ant-upload.ant-upload-select-picture-card) {
  background-color: transparent;
  border-color: #4b5563;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.7);
}

/* 暗黑模式滚动条 */
.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(75, 85, 99, 0.5);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(75, 85, 99, 0.7);
}
</style>