<template>
  <div class="admin-edit-user-privilege">
    <h2>管理员修改用户权限</h2>
    <form class="edit-form" @submit.prevent="savePrivilege">
      <div class="form-row">
        <label for="uuid">用户UUID：</label>
        <input id="uuid" v-model="uuid" placeholder="请输入用户UUID" required />
      </div>
      <div class="form-row">
        <label for="privilege">权限：</label>
        <select id="privilege" v-model="editPrivilege" required>
          <option value="lv-admin">管理员</option>
          <option value="lv-mod">模组</option>
          <option value="lv-competitor">竞技</option>
          <option value="lv-map">地图</option>
          <option value="lv-user">用户</option>
        </select>
      </div>
      <button type="submit">保存</button>
    </form>
    <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
    <div v-if="successMsg" class="success-msg">{{ successMsg }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { adminChangeUserPrivilege } from '@/api/login'

const uuid = ref('')
const editPrivilege = ref('lv-user')
const errorMsg = ref('')
const successMsg = ref('')

const savePrivilege = async () => {
  if (!uuid.value) return
  errorMsg.value = ''
  successMsg.value = ''
  try {
    await adminChangeUserPrivilege(uuid.value, editPrivilege.value)
    successMsg.value = '权限修改成功！'
  } catch (e) {
    errorMsg.value = e.response?.data?.detail || '权限修改失败'
  }
}
</script>

<style scoped>
.admin-edit-user-privilege {
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
label {
  font-weight: 500;
}
input, select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 1rem;
}
button[type="submit"] {
  margin-top: 10px;
  padding: 10px 0;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
button[type="submit"]:hover {
  background: #1d4ed8;
}
.error-msg {
  color: #e53e3e;
  margin-top: 16px;
}
.success-msg {
  color: #16a34a;
  margin-top: 16px;
}
</style> 