<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>
    <div style="margin: 12px 0;">
      <el-select v-model="role" placeholder="角色" @change="loadUsers">
        <el-option label="全部" value=""></el-option>
        <el-option label="管理员" value="ADMIN"></el-option>
        <el-option label="护工" value="NURSE"></el-option>
        <el-option label="家属" value="FAMILY"></el-option>
      </el-select>
    </div>
    <el-table :data="users" stripe>
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column label="角色" width="100">
        <template slot-scope="scope">
          <el-tag :type="roleTag(scope.row.role)">
            {{ roleLabel(scope.row.role) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
          <el-button size="mini" @click="resetPwd(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新建用户" :visible.sync="showCreate">
      <el-form :model="createForm" label-width="120px">
        <el-form-item label="账号"><el-input v-model="createForm.username"/></el-form-item>
        <el-form-item label="密码"><el-input v-model="createForm.password" type="password"/></el-form-item>
        <el-form-item label="姓名"><el-input v-model="createForm.name"/></el-form-item>
        <el-form-item label="手机号"><el-input v-model="createForm.phone"/></el-form-item>
        <el-form-item label="角色">
          <el-select v-model="createForm.role">
            <el-option label="管理员" value="ADMIN"/>
            <el-option label="护工" value="NURSE"/>
            <el-option label="家属" value="FAMILY"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showCreate = false">取消</el-button>
        <el-button type="primary" @click="createUser">创建</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-input v-model="editForm.phone"/></el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status">
            <el-option label="启用" :value="1"/>
            <el-option label="禁用" :value="0"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { adminUsers, adminCreateUser, adminUpdateUser, adminResetPassword } from "../../api";

export default {
  data() {
    return {
      role: "",
      users: [],
      showCreate: false,
      showEdit: false,
      createForm: { username: "", password: "", name: "", phone: "", role: "NURSE" },
      editForm: { id: null, name: "", phone: "", status: 1 }
    };
  },
  created() {
    this.loadUsers();
  },
  methods: {
    roleLabel(role) {
      if (role === "ADMIN") return "管理员";
      if (role === "NURSE") return "护工";
      if (role === "FAMILY") return "家属";
      return role || "-";
    },
    roleTag(role) {
      if (role === "ADMIN") return "danger";
      if (role === "NURSE") return "success";
      if (role === "FAMILY") return "info";
      return "info";
    },
    async loadUsers() {
      try {
        const res = await adminUsers(this.role || null);
        this.users = res.data.data;
      } catch (e) {
        this.$message.error(e.message || "加载失败");
      }
    },
    async createUser() {
      try {
        await adminCreateUser(this.createForm);
        this.showCreate = false;
        this.loadUsers();
      } catch (e) {
        this.$message.error(e.message || "创建失败");
      }
    },
    editUser(row) {
      this.editForm = { id: row.id, name: row.name, phone: row.phone, status: row.status };
      this.showEdit = true;
    },
    async updateUser() {
      try {
        await adminUpdateUser(this.editForm);
        this.showEdit = false;
        this.loadUsers();
      } catch (e) {
        this.$message.error(e.message || "更新失败");
      }
    },
    async resetPwd(row) {
      try {
        await adminResetPassword(row.id, "123456");
        this.$message.success("已重置为123456");
      } catch (e) {
        this.$message.error(e.message || "重置失败");
      }
    }
  }
};
</script>


