<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, Plus } from '@element-plus/icons-vue'
import { getUserList, deleteUser, updateUserStatus, getUserById, adminUpdateUser, adminUploadUserAvatar } from '../../api/admin/user'

// 用户列表
const userList = ref([])
// 总数
const total = ref(0)
// 加载状态
const loading = ref(false)
// 当前页码
const currentPage = ref(1)
// 每页大小
const pageSize = ref(5)
// 搜索关键字
const keyword = ref('')

// 编辑对话框
const editDialogVisible = ref(false)
const editForm = reactive({
  id: null,
  username: '',
  nickname: '',
  email: '',
  phone: '',
  avatar: '',
  gender: 0,
  introduction: ''
})
const editFormRules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { pattern: /^\S+@\S+\.\S+$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}
const editFormRef = ref(null)
const editLoading = ref(false)
const avatarUploading = ref(false)

const handleAvatarBeforeUpload = (file) => {
  const isAllowedType = ['image/jpeg', 'image/png', 'image/webp'].includes(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isAllowedType) {
    ElMessage.error('头像仅支持 JPG/PNG/WEBP 格式')
    return false
  }

  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB')
    return false
  }

  return true
}

const handleAvatarUpload = async ({ file }) => {
  if (!editForm.id) {
    ElMessage.error('请先选择要编辑的用户')
    return
  }

  avatarUploading.value = true
  try {
    const res = await adminUploadUserAvatar(editForm.id, file)
    if (res.code === 200) {
      editForm.avatar = res.data
      ElMessage.success('头像上传成功')
    } else {
      ElMessage.error(res.message || '头像上传失败')
    }
  } catch (error) {
    console.error('上传头像失败:', error)
    ElMessage.error('头像上传失败，请稍后再试')
  } finally {
    avatarUploading.value = false
  }
}

const handleAvatarRemove = () => {
  editForm.avatar = ''
}

// 获取用户列表
const fetchUserList = async () => {
  loading.value = true
  try {
    const res = await getUserList(currentPage.value, pageSize.value, keyword.value)
    if (res.code === 200) {
      userList.value = res.data.list
      total.value = res.data.total
    } else {
      ElMessage.error(res.message || '获取用户列表失败')
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    ElMessage.error('获取用户列表失败，请稍后再试')
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  fetchUserList()
}

// 处理每页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchUserList()
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchUserList()
}

// 处理重置搜索
const handleResetSearch = () => {
  keyword.value = ''
  currentPage.value = 1
  fetchUserList()
}

// 处理删除用户
const handleDeleteUser = (id) => {
  ElMessageBox.confirm('确定要删除该用户吗？此操作不可逆', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteUser(id)
      if (res.code === 200) {
        ElMessage.success('删除成功')
        fetchUserList()
      } else {
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error) {
      console.error('删除用户失败:', error)
      ElMessage.error('删除用户失败，请稍后再试')
    }
  }).catch(() => {
    // 取消删除
  })
}

// 处理更新用户状态
const handleUpdateUserStatus = async (id, status) => {
  try {
    const res = await updateUserStatus(id, status)
    if (res.code === 200) {
      ElMessage.success('更新成功')
      fetchUserList()
    } else {
      ElMessage.error(res.message || '更新失败')
    }
  } catch (error) {
    console.error('更新用户状态失败:', error)
    ElMessage.error('更新用户状态失败，请稍后再试')
  }
}

// 打开编辑对话框
const handleEdit = async (id) => {
  try {
    const res = await getUserById(id)
    if (res.code === 200) {
      const user = res.data
      // 填充表单
      editForm.id = user.id
      editForm.username = user.username
      editForm.nickname = user.nickname || ''
      editForm.email = user.email || ''
      editForm.phone = user.phone || ''
      editForm.avatar = user.avatar || ''
      editForm.gender = user.gender || 0
      editForm.introduction = user.introduction || ''

      // 显示对话框
      editDialogVisible.value = true
    } else {
      ElMessage.error(res.message || '获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败，请稍后再试')
  }
}

// 提交编辑表单
const submitEditForm = async () => {
  if (!editFormRef.value) return

  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      editLoading.value = true
      try {
        const res = await adminUpdateUser(editForm.id, {
          nickname: editForm.nickname,
          email: editForm.email,
          phone: editForm.phone,
          avatar: editForm.avatar,
          gender: editForm.gender,
          introduction: editForm.introduction
        })

        if (res.code === 200) {
          ElMessage.success('更新成功')
          editDialogVisible.value = false
          fetchUserList()
        } else {
          ElMessage.error(res.message || '更新失败')
        }
      } catch (error) {
        console.error('更新用户信息失败:', error)
        ElMessage.error('更新用户信息失败，请稍后再试')
      } finally {
        editLoading.value = false
      }
    }
  })
}

// 格式化角色
const formatRole = (role) => {
  return role === 1 ? '管理员' : '普通用户'
}

// 格式化状态
const formatStatus = (status) => {
  return status === 1 ? '正常' : '禁用'
}

// 格式化性别
const formatGender = (gender) => {
  switch (gender) {
    case 1:
      return '男'
    case 2:
      return '女'
    default:
      return '未知'
  }
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString()
}

onMounted(() => {
  fetchUserList()
})
</script>

<template>
  <div class="user-management">
    <div class="page-header">
      <h2>用户管理</h2>
    </div>

    <!-- 搜索区域 -->
    <div class="search-container">
      <el-input
        v-model="keyword"
        placeholder="搜索用户名、昵称或邮箱"
        clearable
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleResetSearch">重置</el-button>
    </div>

    <!-- 用户列表 -->
    <el-table
      :data="userList"
      border
      stripe
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="头像" width="80">
        <template #default="scope">
          <el-avatar :size="40" :src="scope.row.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="nickname" label="昵称" width="120" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column label="性别" width="80">
        <template #default="scope">
          {{ formatGender(scope.row.gender) }}
        </template>
      </el-table-column>
      <el-table-column label="角色" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.role === 1 ? 'danger' : 'info'">
            {{ formatRole(scope.row.role) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ formatStatus(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.row.id)"
          >
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button
            v-if="scope.row.status === 1"
            type="warning"
            size="small"
            @click="handleUpdateUserStatus(scope.row.id, 0)"
          >
            禁用
          </el-button>
          <el-button
            v-else
            type="success"
            size="small"
            @click="handleUpdateUserStatus(scope.row.id, 1)"
          >
            启用
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDeleteUser(scope.row.id)"
            :disabled="scope.row.role === 1"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!-- 编辑用户对话框 -->
  <el-dialog
    v-model="editDialogVisible"
    title="编辑用户信息"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form
      ref="editFormRef"
      :model="editForm"
      :rules="editFormRules"
      label-width="100px"
      v-loading="editLoading"
    >
      <el-form-item label="用户名">
        <el-input v-model="editForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="editForm.nickname" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          class="avatar-upload"
          :http-request="handleAvatarUpload"
          :before-upload="handleAvatarBeforeUpload"
          :show-file-list="false"
          accept=".jpg,.jpeg,.png,.webp"
          :disabled="avatarUploading || editLoading"
        >
          <div class="avatar-uploader-content" v-loading="avatarUploading">
            <el-avatar v-if="editForm.avatar" :size="60" :src="editForm.avatar"></el-avatar>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </div>
        </el-upload>
        <div class="avatar-upload-actions" v-if="editForm.avatar">
          <el-button link type="danger" @click="handleAvatarRemove">移除头像</el-button>
        </div>
        <div class="el-upload__tip">支持 jpg/png/webp，大小不超过 2MB</div>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="editForm.gender">
          <el-radio :label="0">未知</el-radio>
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="editForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input v-model="editForm.introduction" type="textarea" :rows="3" placeholder="请输入个人简介"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm" :loading="editLoading">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.user-management {
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 20px;
  color: #4a4a4a;
  text-align: center;
}

.search-container {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-container .el-input {
  width: 300px;
}

.search-container .el-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #b3e5fc;
  transition: all 0.3s;
}

.search-container .el-input :deep(.el-input__inner):focus {
  border-color: #4dd0e1;
  box-shadow: 0 0 0 2px rgba(77, 208, 225, 0.2);
}

.el-button {
  border-radius: 8px !important;
  font-weight: bold !important;
  transition: all 0.3s !important;
}

.el-button--primary {
  background: linear-gradient(135deg, #4dd0e1 0%, #26c6da 100%) !important;
  border: none !important;
}

.el-button--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(38, 198, 218, 0.3) !important;
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
}

.el-table :deep(th) {
  background-color: #e1f5fe !important;
  color: #0d47a1;
}

.el-table :deep(.el-table__row) {
  transition: all 0.3s;
}

.el-table :deep(.el-table__row:hover) {
  background-color: #f5f5f5 !important;
  transform: scale(1.01);
}

.el-dialog {
  border-radius: 16px !important;
}

.el-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%);
  border-radius: 16px 16px 0 0 !important;
  padding: 15px 20px;
}

.el-dialog :deep(.el-dialog__title) {
  color: #0d47a1;
  font-weight: bold;
}

.el-form-item :deep(.el-form-item__label) {
  color: #4a4a4a;
  font-weight: bold;
}

.el-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #b3e5fc;
}

.el-input :deep(.el-input__inner):focus {
  border-color: #4dd0e1;
  box-shadow: 0 0 0 2px rgba(77, 208, 225, 0.2);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 12px;
}

.avatar-upload :deep(.el-upload) {
  border: 1px dashed #b3e5fc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
}

.avatar-upload :deep(.el-upload):hover {
  border-color: #4dd0e1;
}

.avatar-uploader-content {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fdff;
}

.avatar-uploader-icon {
  font-size: 24px;
  color: #8c939d;
}

.avatar-upload-actions {
  margin-top: 8px;
}
</style>
