<template>
  <div class="user-management">
    <el-card class="user-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <span class="title">用户列表</span>
            <el-tag class="user-count" type="info" effect="plain">
              共 {{ total }} 条
            </el-tag>
          </div>
          <div class="header-right">
            <el-input
              v-model="searchQuery"
              placeholder="搜索用户..."
              class="search-input"
              clearable
              @clear="handleSearch">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>
      
      <el-table 
        v-loading="loading"
        :data="filteredUsers" 
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
        border>
        <el-table-column prop="username" label="用户名" width="150" />
        <el-table-column prop="nickname" label="昵称" width="150" />
        <el-table-column prop="lastLoginIP" label="最后登录IP" width="140" />
        <el-table-column prop="lastLoginTime" label="最后登录时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.lastLoginTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="mask" label="权限" width="120">
          <template #default="scope">
            <el-tag :type="getMaskType(scope.row.mask)">
              {{ getMaskLabel(scope.row.mask) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button 
              link
              type="primary"
              @click="handleUpdateMask(scope.row)"
              :disabled="scope.row.mask === 2">
              <el-icon><Edit /></el-icon>修改权限
            </el-button>
            <el-button 
              link
              type="primary"
              @click="handleUpdateNickname(scope.row)"
              :disabled="scope.row.mask === 2">
              <el-icon><EditPen /></el-icon>修改昵称
            </el-button>
            <el-button 
              link
              type="warning"
              @click="handleResetPassword(scope.row)"
              :disabled="scope.row.mask === 2">
              <el-icon><Key /></el-icon>重置密码
            </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="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 修改权限对话框 -->
    <el-dialog
      v-model="maskDialogVisible"
      title="修改用户权限"
      width="400px">
      <el-form :model="maskForm" label-width="80px">
        <el-form-item label="权限级别">
          <el-select v-model="maskForm.newMask">
            <el-option :value="0" label="普通用户" />
            <el-option :value="1" label="管理员" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="maskDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdateMask" :loading="updating">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加重置密码对话框 -->
    <el-dialog
      v-model="resetPasswordDialogVisible"
      title="重置用户密码"
      width="400px">
      <el-form 
        ref="resetPasswordFormRef"
        :model="resetPasswordForm"
        :rules="resetPasswordRules"
        label-width="80px">
        <el-form-item label="新密码" prop="newPassword">
          <el-input 
            v-model="resetPasswordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input 
            v-model="resetPasswordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请再次输入新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitResetPassword" :loading="updating">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加修改昵称对话框 -->
    <el-dialog
      v-model="nicknameDialogVisible"
      title="修改用户昵称"
      width="400px">
      <el-form 
        ref="nicknameFormRef"
        :model="nicknameForm"
        :rules="nicknameRules"
        label-width="80px">
        <el-form-item label="新昵称" prop="newNickname">
          <el-input 
            v-model="nicknameForm.newNickname"
            placeholder="请输入新昵称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="nicknameDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdateNickname" :loading="updating">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, EditPen, Key } from '@element-plus/icons-vue'
import { UserAPI } from '../api/user'

const loading = ref(false)
const updating = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const users = ref([])
const searchQuery = ref('')

// 权限对话框相关
const maskDialogVisible = ref(false)
const currentUser = ref(null)
const maskForm = ref({
  newMask: 0
})

// 重置密码相关
const resetPasswordDialogVisible = ref(false)
const resetPasswordFormRef = ref(null)
const resetPasswordForm = ref({
  newPassword: '',
  confirmPassword: ''
})

// 修改昵称相关
const nicknameDialogVisible = ref(false)
const nicknameFormRef = ref(null)
const nicknameForm = ref({
  newNickname: ''
})

const nicknameRules = {
  newNickname: [
    { required: true, message: '请输入新昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ]
}

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  } else {
    if (resetPasswordForm.value.confirmPassword !== '') {
      resetPasswordFormRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else if (value !== resetPasswordForm.value.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const resetPasswordRules = {
  newPassword: [
    { validator: validatePass, trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { validator: validatePass2, trigger: 'blur' }
  ]
}

// 过滤用户列表
const filteredUsers = computed(() => {
  if (!searchQuery.value) return users.value
  
  const query = searchQuery.value.toLowerCase()
  return users.value.filter(user => {
    return (
      user.username?.toLowerCase().includes(query) ||
      user.nickname?.toLowerCase().includes(query) ||
      user.lastLoginIP?.includes(query)
    )
  })
})

// 获取用户列表
const fetchUsers = async () => {
  loading.value = true
  try {
    const response = await UserAPI.getUserList({
      page: currentPage.value,
      pageSize: pageSize.value
    })
    
    if (response.data) {
      users.value = response.data.data || []
      total.value = response.data.total || 0
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  console.log('Searching for:', searchQuery.value)
}

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

// 处理每页数量变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchUsers()
}

// 格式化时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleString()
}

// 获取权限标签类型
const getMaskType = (mask) => {
  switch (mask) {
    case 2:
      return 'danger'
    case 1:
      return 'warning'
    default:
      return 'info'
  }
}

// 获取权限标签文本
const getMaskLabel = (mask) => {
  switch (mask) {
    case 2:
      return '超级管理员'
    case 1:
      return '管理员'
    default:
      return '普通用户'
  }
}

// 处理修改权限
const handleUpdateMask = (user) => {
  currentUser.value = user
  maskForm.value.newMask = user.mask
  maskDialogVisible.value = true
}

// 提交权限修改
const submitUpdateMask = async () => {
  if (!currentUser.value) return
  
  updating.value = true
  try {
    const response = await UserAPI.updateUserMask(
      currentUser.value.userId,
      maskForm.value.newMask
    )
    
    if (response.retcode === 0) {
      ElMessage.success('权限修改成功')
      maskDialogVisible.value = false
      fetchUsers()
    }
  } catch (error) {
    console.error('修改权限失败:', error)
  } finally {
    updating.value = false
  }
}

// 处理重置密码
const handleResetPassword = (user) => {
  currentUser.value = user
  resetPasswordForm.value = {
    newPassword: '',
    confirmPassword: ''
  }
  resetPasswordDialogVisible.value = true
}

// 提交重置密码
const submitResetPassword = async () => {
  if (!resetPasswordFormRef.value || !currentUser.value) return
  
  await resetPasswordFormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm(
        `确定要重置用户 ${currentUser.value.nickname}(${currentUser.value.username}) 的密码吗？`,
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        updating.value = true
        try {
          const response = await UserAPI.resetPassword(
            currentUser.value.userId,
            resetPasswordForm.value.newPassword
          )
          if (response.retcode === 0) {
            ElMessage.success('密码重置成功')
            resetPasswordDialogVisible.value = false
          }
        } catch (error) {
          console.error('重置密码失败:', error)
        } finally {
          updating.value = false
        }
      }).catch(() => {
        // 用户取消操作
      })
    }
  })
}

// 处理修改昵称
const handleUpdateNickname = (user) => {
  currentUser.value = user
  nicknameForm.value.newNickname = user.nickname
  nicknameDialogVisible.value = true
}

// 提交昵称修改
const submitUpdateNickname = async () => {
  if (!nicknameFormRef.value || !currentUser.value) return
  
  await nicknameFormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm(
        `确定要修改用户 ${currentUser.value.username} 的昵称吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ).then(async () => {
        updating.value = true
        try {
          const response = await UserAPI.updateUserNickname(
            currentUser.value.userId,
            nicknameForm.value.newNickname
          )
          if (response.retcode === 0) {
            ElMessage.success('昵称修改成功')
            nicknameDialogVisible.value = false
            fetchUsers()  // 刷新用户列表
          }
        } catch (error) {
          console.error('修改昵称失败:', error)
        } finally {
          updating.value = false
        }
      }).catch(() => {
        // 用户取消操作
      })
    }
  })
}

// 初始化
onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.user-card {
  background: #fff;
  border-radius: 4px;
}

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

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

.title {
  font-size: 16px;
  font-weight: 500;
  margin-right: 12px;
}

.user-count {
  font-size: 13px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-input {
  width: 240px;
}

:deep(.el-button) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-table) {
  margin-top: 20px;
}

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

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style> 