<template>
  <a-card title="公告管理">
    <a-form layout="inline">
      <a-form-item label="标题"><a-input v-model:value="form.title" /></a-form-item>
      <a-form-item label="内容"><a-input v-model:value="form.content" /></a-form-item>
      <a-button type="primary" @click="create">新增</a-button>
    </a-form>
    <a-table :dataSource="list" :columns="columns" rowKey="id" style="margin-top: 16px">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button type="link" danger @click="remove(record)">删除</a-button>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import api from '../../api'

const list = ref([])
const form = reactive({ title: '', content: '' })
const columns = [
  { title: '标题', dataIndex: 'title' },
  { title: '内容', dataIndex: 'content' },
  { title: '操作', key: 'action' }
]

const load = async () => {
  const res = await api.get('/api/admin/notices')
  if (res.success) list.value = res.data
}

const create = async () => {
  await api.post('/api/admin/notices', form)
  form.title = ''
  form.content = ''
  load()
}

const remove = async (record) => {
  await api.delete(`/api/admin/notices/${record.id}`)
  load()
}

onMounted(load)
</script>
