<template>
  <div class="page-card">
    <div style="display:flex; justify-content: space-between; align-items:center;">
      <h3>长者档案</h3>
      <el-button type="primary" @click="showCreate = true">新增长者</el-button>
    </div>
    <el-table :data="elders" stripe>
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column label="性别" width="80">
        <template slot-scope="scope">
          {{ genderLabel(scope.row.gender) }}
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" />
      <el-table-column prop="roomNo" label="房间号" width="100" />
      <el-table-column prop="careLevel" label="护理等级" />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="editElder(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteElder(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-input v-model="form.name"/></el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="选择性别">
            <el-option label="男" value="M" />
            <el-option label="女" value="F" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号"><el-input v-model="form.idCard" @input="syncBirthday('create')"/></el-form-item>
        <el-form-item label="出生日期"><el-date-picker v-model="form.birthday" type="date"/></el-form-item>
        <el-form-item label="房间号"><el-input v-model="form.roomNo"/></el-form-item>
        <el-form-item label="入住日期"><el-date-picker v-model="form.checkInDate" type="date"/></el-form-item>
        <el-form-item label="护理等级">
          <el-select v-model="form.careLevel" placeholder="选择护理等级">
            <el-option label="一级" value="一级" />
            <el-option label="二级" value="二级" />
            <el-option label="三级" value="三级" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="选择状态">
            <el-option label="在住" value="在住" />
            <el-option label="离院" value="离院" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注"><el-input v-model="form.remark"/></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showCreate = false">取消</el-button>
        <el-button type="primary" @click="createElder">创建</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑长者" :visible.sync="showEdit">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="姓名"><el-input v-model="editForm.name"/></el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editForm.gender" placeholder="选择性别">
            <el-option label="男" value="M" />
            <el-option label="女" value="F" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号"><el-input v-model="editForm.idCard" @input="syncBirthday('edit')"/></el-form-item>
        <el-form-item label="出生日期"><el-date-picker v-model="editForm.birthday" type="date"/></el-form-item>
        <el-form-item label="房间号"><el-input v-model="editForm.roomNo"/></el-form-item>
        <el-form-item label="入住日期"><el-date-picker v-model="editForm.checkInDate" type="date"/></el-form-item>
        <el-form-item label="护理等级">
          <el-select v-model="editForm.careLevel" placeholder="选择护理等级">
            <el-option label="一级" value="一级" />
            <el-option label="二级" value="二级" />
            <el-option label="三级" value="三级" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status" placeholder="选择状态">
            <el-option label="在住" value="在住" />
            <el-option label="离院" value="离院" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注"><el-input v-model="editForm.remark"/></el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click="updateElder">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { eldersList, eldersCreate, eldersUpdate, eldersDelete } from "../../api";
import { formatDate } from "../../utils/date";

export default {
  data() {
    return {
      elders: [],
      showCreate: false,
      showEdit: false,
      form: { name: "", gender: "", idCard: "", birthday: "", roomNo: "", checkInDate: "", careLevel: "", status: "", remark: "" },
      editForm: {}
    };
  },
  created() {
    this.load();
  },
  methods: {
    genderLabel(value) {
      if (value === "M") return "男";
      if (value === "F") return "女";
      return value || "-";
    },
    async load() {
      try {
        const res = await eldersList();
        this.elders = res.data.data;
      } catch (e) {
        this.$message.error(e.message || "加载失败");
      }
    },
    async createElder() {
      try {
        const payload = {
          ...this.form,
          birthday: formatDate(this.form.birthday),
          checkInDate: formatDate(this.form.checkInDate)
        };
        await eldersCreate(payload);
        this.showCreate = false;
        this.load();
      } catch (e) {
        this.$message.error(e.message || "创建失败");
      }
    },
    editElder(row) {
      this.editForm = { ...row };
      this.showEdit = true;
    },
    async updateElder() {
      try {
        const payload = {
          ...this.editForm,
          birthday: formatDate(this.editForm.birthday),
          checkInDate: formatDate(this.editForm.checkInDate)
        };
        await eldersUpdate(payload);
        this.showEdit = false;
        this.load();
      } catch (e) {
        this.$message.error(e.message || "更新失败");
      }
    },
    async deleteElder(row) {
      try {
        await eldersDelete(row.id);
        this.load();
      } catch (e) {
        this.$message.error(e.message || "删除失败");
      }
    },
    syncBirthday(type) {
      const target = type === "edit" ? this.editForm : this.form;
      if (!target || !target.idCard) return;
      const id = target.idCard.trim();
      if (id.length === 18) {
        const year = id.substring(6, 10);
        const month = id.substring(10, 12);
        const day = id.substring(12, 14);
        target.birthday = `${year}-${month}-${day}`;
        const genderFlag = parseInt(id.substring(16, 17), 10);
        if (!Number.isNaN(genderFlag)) {
          target.gender = genderFlag % 2 === 0 ? "F" : "M";
        }
      } else if (id.length === 15) {
        const year = `19${id.substring(6, 8)}`;
        const month = id.substring(8, 10);
        const day = id.substring(10, 12);
        target.birthday = `${year}-${month}-${day}`;
        const genderFlag = parseInt(id.substring(14, 15), 10);
        if (!Number.isNaN(genderFlag)) {
          target.gender = genderFlag % 2 === 0 ? "F" : "M";
        }
      }
    }
  }
};
</script>

