<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: 200px" />
        <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.name" /></t-form-item>
        <t-form-item label="规格"><t-input v-model="form.specification" /></t-form-item>
        <t-form-item label="单位"><t-input v-model="form.unit" /></t-form-item>
        <t-form-item label="库存"><t-input v-model="form.stock" /></t-form-item>
        <t-form-item label="状态"><t-select v-model="form.status" :options="statusOptions" /></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 list = ref([] as any[]);
const dialogVisible = ref(false);
const dialogTitle = ref('新增药品');
const editingId = ref<number | null>(null);
const query = reactive({ keyword: '' });
const form = reactive({ name: '', specification: '', unit: '', stock: '', status: 1 });

const statusOptions = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 },
];

const columns = [
  { colKey: 'id', title: 'ID', width: 80 },
  { colKey: 'name', title: '名称' },
  { colKey: 'specification', title: '规格' },
  { colKey: 'unit', title: '单位' },
  { colKey: 'stock', title: '库存' },
  { colKey: 'op', title: '操作', width: 140 },
];

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

const openCreate = () => {
  dialogTitle.value = '新增药品';
  editingId.value = null;
  form.name = '';
  form.specification = '';
  form.unit = '';
  form.stock = '';
  form.status = 1;
  dialogVisible.value = true;
};

const openEdit = (row: any) => {
  dialogTitle.value = '编辑药品';
  editingId.value = row.id;
  form.name = row.name || '';
  form.specification = row.specification || '';
  form.unit = row.unit || '';
  form.stock = row.stock || '';
  form.status = row.status ?? 1;
  dialogVisible.value = true;
};

const submit = async () => {
  const payload = { ...form };
  const res = editingId.value
    ? await api.updateDrug(editingId.value, payload)
    : await api.createDrug(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.deleteDrug(id);
  if (res.code === 0) {
    MessagePlugin.success('删除成功');
    load();
  } else {
    MessagePlugin.error(res.message || '删除失败');
  }
};

onMounted(load);
</script>
