<template>
  <div class="page">
    <h2 class="page-title">公告管理</h2>
    <div class="panel">
      <div class="inline-form">
        <t-input v-model="query.keyword" placeholder="标题关键词" style="width: 220px" />
        <t-button theme="primary" @click="load">查询</t-button>
        <t-button variant="outline" @click="openCreate">新建公告</t-button>
      </div>
      <t-table :data="list" :columns="columns" row-key="id">
        <template #op="{ row }">
          <div class="table-actions">
            <t-button size="small" variant="text" @click="openEdit(row)">编辑</t-button>
            <t-popconfirm content="确认删除？" @confirm="remove(row.id)">
              <t-button size="small" theme="danger" variant="text">删除</t-button>
            </t-popconfirm>
          </div>
        </template>
      </t-table>
    </div>

    <t-dialog v-model:visible="dialogVisible" :header="dialogTitle" :on-confirm="submit">
      <t-form :data="form">
        <t-form-item label="标题">
          <t-input v-model="form.title" />
        </t-form-item>
        <t-form-item label="内容">
          <t-textarea v-model="form.content" />
        </t-form-item>
        <t-form-item label="状态">
          <t-select v-model="form.status" :options="statusOptions" />
        </t-form-item>
        <t-form-item label="置顶">
          <t-switch v-model="form.isTop" :custom-value="[1, 0]" />
        </t-form-item>
      </t-form>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { api } from '../api';

const query = reactive({ keyword: '' });
const list = ref([] as any[]);
const dialogVisible = ref(false);
const dialogTitle = ref('新建公告');
const editingId = ref<number | null>(null);
const form = reactive({ title: '', content: '', status: 1, isTop: 0 });

const statusOptions = [
  { label: '上架', value: 1 },
  { label: '下架', value: 0 },
];

const columns = [
  { colKey: 'id', title: 'ID', width: 80 },
  { colKey: 'title', title: '标题' },
  { colKey: 'status', title: '状态' },
  { colKey: 'isTop', title: '置顶' },
  { colKey: 'createTime', title: '发布时间' },
  { colKey: 'op', title: '操作', width: 140 },
];

const load = async () => {
  const res = await api.noticesAdmin({ page: 1, size: 20, keyword: query.keyword });
  if (res.code === 0) list.value = res.data.records || [];
};

const openCreate = () => {
  dialogTitle.value = '新建公告';
  editingId.value = null;
  form.title = '';
  form.content = '';
  form.status = 1;
  form.isTop = 0;
  dialogVisible.value = true;
};

const openEdit = (row: any) => {
  dialogTitle.value = '编辑公告';
  editingId.value = row.id;
  form.title = row.title;
  form.content = row.content;
  form.status = row.status ?? 1;
  form.isTop = row.isTop ?? 0;
  dialogVisible.value = true;
};

const submit = async () => {
  const payload = { ...form };
  const res = editingId.value
    ? await api.updateNotice(editingId.value, payload)
    : await api.createNotice(payload);
  if (res.code === 0) {
    MessagePlugin.success('保存成功');
    dialogVisible.value = false;
    load();
  } else {
    MessagePlugin.error(res.message || '保存失败');
  }
};

const remove = async (id: number) => {
  const res = await api.deleteNotice(id);
  if (res.code === 0) {
    MessagePlugin.success('删除成功');
    load();
  } else {
    MessagePlugin.error(res.message || '删除失败');
  }
};

onMounted(load);
</script>
