<template>
  <div class="blacklist">
    <h2>黑名单管理</h2>
    <div v-if="blacklist.length > 0">
      <ul>
        <li v-for="item in blacklist" :key="item.id">
          {{ item.target }} - {{ item.type }}
          <button @click="removeFromBlacklist(item.id)">移除</button>
        </li>
      </ul>
    </div>
    <div>
      <input v-model="newTarget" placeholder="输入IP或用户名">
      <button @click="addToBlacklist">加入黑名单</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const blacklist = ref([])
const newTarget = ref('')

const fetchBlacklist = async () => {
  const response = await axios.get('/api/admin/blacklist')
  blacklist.value = response.data
}

const addToBlacklist = async () => {
  await axios.post('/api/admin/blacklist', { target: newTarget.value })
  newTarget.value = ''
  await fetchBlacklist()
}

const removeFromBlacklist = async (id) => {
  await axios.delete(`/api/admin/blacklist/${id}`)
  await fetchBlacklist()
}

onMounted(fetchBlacklist)
</script>