<template>
  <div class="page-card">
    <h3>账单管理</h3>
    <div style="display:flex; gap: 12px; margin-bottom: 12px;">
      <el-input v-model="filterElderId" placeholder="长者ID" style="width: 200px;" />
      <el-button type="primary" @click="load">查询</el-button>
      <el-button @click="showCreate = true">新建账单</el-button>
    </div>
    <el-table :data="bills" stripe>
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column label="长者" width="140">
        <template slot-scope="scope">
          {{ elderName(scope.row.elderId) }}
        </template>
      </el-table-column>
      <el-table-column prop="month" label="月份" />
      <el-table-column prop="total" label="金额" />
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="statusTag(scope.row.status)">
            {{ statusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="openEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新建账单" :visible.sync="showCreate">
      <el-form :model="form" label-width="120px">
        <el-form-item label="长者">
          <el-select v-model="form.elderId" placeholder="选择长者">
            <el-option v-for="elder in elders" :key="elder.id" :label="elder.name" :value="elder.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker v-model="form.month" type="month" placeholder="选择月份" />
        </el-form-item>
        <el-form-item label="床位费"><el-input v-model="form.bedFee"/></el-form-item>
        <el-form-item label="护理费"><el-input v-model="form.careFee"/></el-form-item>
        <el-form-item label="餐饮费"><el-input v-model="form.mealFee"/></el-form-item>
        <el-form-item label="其他费用"><el-input v-model="form.otherFee"/></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showCreate = false">取消</el-button>
        <el-button type="primary" @click="create">创建</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改账单" :visible.sync="showEdit">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="长者">
          <el-select v-model="editForm.elderId" placeholder="选择长者">
            <el-option v-for="elder in elders" :key="elder.id" :label="elder.name" :value="elder.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份">
          <el-date-picker v-model="editForm.month" type="month" placeholder="选择月份" />
        </el-form-item>
        <el-form-item label="床位费"><el-input v-model="editForm.bedFee"/></el-form-item>
        <el-form-item label="护理费"><el-input v-model="editForm.careFee"/></el-form-item>
        <el-form-item label="餐饮费"><el-input v-model="editForm.mealFee"/></el-form-item>
        <el-form-item label="其他费用"><el-input v-model="editForm.otherFee"/></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click="update">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { billsList, billsCreate, billsUpdate, billsDelete, eldersList } from "../../api";

export default {
  data() {
    return {
      bills: [],
      elders: [],
      elderMap: {},
      filterElderId: "",
      showCreate: false,
      showEdit: false,
      form: { elderId: "", month: "", bedFee: "", careFee: "", mealFee: "", otherFee: "" },
      editForm: { id: null, elderId: "", month: "", bedFee: "", careFee: "", mealFee: "", otherFee: "" }
    };
  },
  created() {
    this.load();
    this.loadElders();
  },
  methods: {
    async loadElders() {
      try {
        const res = await eldersList();
        this.elders = res.data.data;
        const map = {};
        this.elders.forEach((elder) => {
          map[elder.id] = elder.name;
        });
        this.elderMap = map;
      } catch (e) {
        this.$message.error(e.message || "加载长者失败");
      }
    },
    elderName(id) {
      return this.elderMap[id] || `长者${id}`;
    },
    formatMonth(value) {
      if (!value) return "";
      const d = new Date(value);
      const y = d.getFullYear();
      const m = String(d.getMonth() + 1).padStart(2, "0");
      return `${y}-${m}`;
    },
    statusLabel(status) {
      if (status === "PAID") return "已支付";
      if (status === "UNPAID") return "未支付";
      return status || "-";
    },
    statusTag(status) {
      if (status === "PAID") return "success";
      if (status === "UNPAID") return "warning";
      return "info";
    },
    async load() {
      try {
        const res = await billsList(this.filterElderId || null);
        this.bills = res.data.data;
      } catch (e) {
        this.$message.error(e.message || "加载失败");
      }
    },
    async create() {
      try {
        const payload = { ...this.form, month: this.formatMonth(this.form.month) };
        await billsCreate(payload);
        this.showCreate = false;
        this.load();
      } catch (e) {
        this.$message.error(e.message || "创建失败");
      }
    },
    openEdit(row) {
      this.editForm = {
        id: row.id,
        elderId: row.elderId,
        month: row.month ? new Date(`${row.month}-01`) : "",
        bedFee: row.bedFee,
        careFee: row.careFee,
        mealFee: row.mealFee,
        otherFee: row.otherFee
      };
      this.showEdit = true;
    },
    async update() {
      try {
        const payload = { ...this.editForm, month: this.formatMonth(this.editForm.month) };
        await billsUpdate(payload);
        this.showEdit = false;
        this.load();
      } catch (e) {
        this.$message.error(e.message || "更新失败");
      }
    },
    async remove(row) {
      try {
        await this.$confirm("确认删除该账单？", "提示", { type: "warning" });
        await billsDelete(row.id);
        this.load();
      } catch (e) {
        if (e && e !== "cancel") {
          this.$message.error(e.message || "删除失败");
        }
      }
    }
  }
};
</script>

