{% extends "../layout.html" %}

{% block title %}药品援助记录{% endblock %}

{% block content %}
<div id="medicineApp">
  <!-- 搜索栏 -->
  <el-card shadow="never" class="mb-4">
    <el-form :inline="true" @submit.prevent="loadList()" class="flex items-center flex-wrap gap-2">
      <el-form-item label="关键词" class="!mb-0">
        <el-input v-model="keyword" placeholder="药品名称/受助人..." clearable style="width:180px;" />
      </el-form-item>
      <el-form-item label="年度" class="!mb-0">
        <el-select v-model="yearFilter" placeholder="全部" clearable style="width:100px;">
          <el-option v-for="y in years" :key="y" :label="y" :value="y"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" class="!mb-0">
        <el-select v-model="statusFilter" placeholder="全部" clearable style="width:110px;">
          <el-option label="已发放" :value="1"></el-option>
          <el-option label="待发放" :value="2"></el-option>
          <el-option label="已取消" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="!mb-0">
        <el-button type="primary" @click="loadList()">搜索</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 列表 -->
  <el-card shadow="never">
    <template #header>
      <el-button type="primary" @click="showAddModal">+ 新增记录</el-button>
    </template>

    <el-table :data="tableData" v-loading="loading" stripe border>
      <el-table-column prop="name" label="药品名称" min-width="200" ></el-table-column>
      <el-table-column prop="person" label="受助人" width="100" ></el-table-column>
      <el-table-column prop="region" label="地区" width="120">
        <template #default="{ row }">${ row.region || '—' }</template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量" width="80" ></el-table-column>
      <el-table-column prop="amount" label="金额 (元)" width="120" align="right">
        <template #default="{ row }">¥ ${ formatMoney(row.amount) }</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="success" size="small">已发放</el-tag>
          <el-tag v-else-if="row.status === 2" type="warning" size="small">待发放</el-tag>
          <el-tag v-else type="info" size="small">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="distribute_date" label="发放日期" width="120">
        <template #default="{ row }">${ row.distribute_date || '—' }</template>
      </el-table-column>
      <el-table-column label="操作" width="140" align="center">
        <template #default="{ row }">
          <el-button type="primary" link @click="editItem(row)">编辑</el-button>
          <el-button type="danger" link @click="deleteItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt-4">
      <el-pagination
        v-model:current-page="pagination.page"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next"
        @current-change="loadList"
      />
    </div>
  </el-card>

  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="560px" destroy-on-close>
    <el-form :model="form" label-width="100px">
      <el-form-item label="药品名称" required>
        <el-input v-model="form.name" placeholder="请输入药品名称" />
      </el-form-item>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="受助人" required>
            <el-input v-model="form.person" placeholder="如：张*三" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地区">
            <el-input v-model="form.region" placeholder="如：北京" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="数量" required>
            <el-input v-model="form.quantity" placeholder="如：1盒" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金额 (元)" required>
            <el-input-number v-model="form.amount" :min="0" :precision="2" style="width:100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select v-model="form.status" style="width:100%;" :teleported="false">
              <el-option label="已发放" :value="1"></el-option>
              <el-option label="待发放" :value="2"></el-option>
              <el-option label="已取消" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发放日期">
            <el-date-picker v-model="form.distribute_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width:100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveItem" :loading="saving">保存</el-button>
    </template>
  </el-dialog>
</div>
{% endblock %}

{% block js %}
<script>
const yearsData = {{ years | dump | safe }};

const { createApp, ref, reactive, onMounted } = Vue;

const app = createApp({
  delimiters: ['${', '}'],
  setup() {
    const keyword = ref('');
    const yearFilter = ref('');
    const statusFilter = ref('');
    const loading = ref(false);
    const tableData = ref([]);
    const pagination = reactive({ page: 1, pageSize: 10, total: 0 });
    const years = ref(yearsData || []);

    // 弹窗
    const dialogVisible = ref(false);
    const dialogTitle = ref('新增记录');
    const saving = ref(false);
    const form = reactive({
      id: null,
      name: '',
      person: '',
      region: '',
      quantity: '1盒',
      amount: 0,
      status: 2,
      distribute_date: '',
      remark: ''
    });

    // 格式化金额
    function formatMoney(n) {
      return Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 2 });
    }

    // 加载列表
    async function loadList(page) {
      if (typeof page === 'number') pagination.page = page;
      loading.value = true;
      try {
        const params = new URLSearchParams({
          page: pagination.page,
          pageSize: pagination.pageSize,
          keyword: keyword.value,
          year: yearFilter.value,
          status: statusFilter.value
        });
        const res = await fetch('/admin/data/medicine/list?' + params).then(r => r.json());
        if (res.code === 0) {
          tableData.value = res.data.data || [];
          pagination.total = res.data.count || 0;
        } else {
          ElementPlus.ElMessage.error(res.msg || '加载失败');
        }
      } finally {
        loading.value = false;
      }
    }

    // 重置筛选
    function resetFilter() {
      keyword.value = '';
      yearFilter.value = '';
      statusFilter.value = '';
      pagination.page = 1;
      loadList();
    }

    // 显示新增弹窗
    function showAddModal() {
      dialogTitle.value = '新增记录';
      Object.assign(form, {
        id: null,
        name: '',
        person: '',
        region: '',
        quantity: '1盒',
        amount: 0,
        status: 2,
        distribute_date: '',
        remark: ''
      });
      dialogVisible.value = true;
    }

    // 编辑
    function editItem(row) {
      dialogTitle.value = '编辑记录';
      Object.assign(form, {
        id: row.id,
        name: row.name,
        person: row.person,
        region: row.region || '',
        quantity: row.quantity || '1盒',
        amount: row.amount || 0,
        status: row.status || 2,
        distribute_date: row.distribute_date || '',
        remark: row.remark || ''
      });
      dialogVisible.value = true;
    }

    // 保存
    async function saveItem() {
      if (!form.name.trim()) {
        ElementPlus.ElMessage.warning('请输入药品名称');
        return;
      }
      if (!form.person.trim()) {
        ElementPlus.ElMessage.warning('请输入受助人');
        return;
      }
      saving.value = true;
      try {
        const url = form.id ? '/admin/data/medicine/edit' : '/admin/data/medicine/add';
        const body = { ...form };
        if (!form.id) delete body.id;

        const res = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body)
        }).then(r => r.json());

        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally {
        saving.value = false;
      }
    }

    // 删除
    async function deleteItem(row) {
      try {
        await ElementPlus.ElMessageBox.confirm('确定要删除该记录吗？', '提示', { type: 'warning' });
        const res = await fetch('/admin/data/medicine/delete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: row.id })
        }).then(r => r.json());

        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    onMounted(() => loadList());

    return {
      keyword, yearFilter, statusFilter, loading, tableData, pagination, years,
      dialogVisible, dialogTitle, saving, form,
      formatMoney, loadList, resetFilter, showAddModal, editItem, saveItem, deleteItem
    };
  }
});

app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
app.mount('#medicineApp');
</script>
{% endblock %}