<template>
  <div class="page">
    <h2 class="page-title">账号管理</h2>
    <div class="panel">
      <div class="inline-form">
        <t-select v-model="query.role" :options="roleOptions" placeholder="角色" style="width: 160px" />
        <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 #role="{ row }">
          {{ getRoleText(row.role) }}
        </template>
        <template #status="{ row }">
          {{ getStatusText(row.status) }}
        </template>
        <template #op="{ row }">
          <div class="table-actions">
            <t-button size="small" variant="text" @click="toggleStatus(row)">
              {{ row.status === 1 ? '禁用' : '启用' }}
            </t-button>
            <t-button size="small" variant="text" @click="openReset(row)">重置密码</t-button>
          </div>
        </template>
      </t-table>
    </div>

    <t-dialog v-model:visible="dialogVisible" header="新增账号" :on-confirm="submitCreate">
      <t-form :data="form">
        <t-form-item label="用户名"><t-input v-model="form.username" /></t-form-item>
        <t-form-item label="密码"><t-input v-model="form.password" type="password" /></t-form-item>
        <t-form-item label="角色"><t-select v-model="form.role" :options="roleOptions" /></t-form-item>
      </t-form>
    </t-dialog>

    <t-dialog v-model:visible="resetVisible" header="重置密码" :on-confirm="submitReset">
      <t-form :data="resetForm">
        <t-form-item label="新密码"><t-input v-model="resetForm.password" type="password" /></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 resetVisible = ref(false);
const resetId = ref<number | null>(null);
const query = reactive({ role: '' });
const form = reactive({ username: '', password: '', role: 'DOCTOR' });
const resetForm = reactive({ password: '' });

const roleOptions = [
  { label: '管理员', value: 'ADMIN' },
  { label: '医生', value: 'DOCTOR' },
  { label: '顾客', value: 'CUSTOMER' },
];

const getRoleText = (role: string) => {
  const map: Record<string, string> = {
    ADMIN: '管理员',
    DOCTOR: '医生',
    CUSTOMER: '顾客',
  };
  return map[role] || role || '-';
};

const getStatusText = (status: number) => {
  const map: Record<number, string> = {
    0: '禁用',
    1: '启用',
  };
  return map[status] ?? '-';
};

const columns = [
  { colKey: 'id', title: 'ID', width: 80 },
  { colKey: 'username', title: '用户名' },
  { colKey: 'role', title: '角色' },
  { colKey: 'status', title: '状态' },
  { colKey: 'op', title: '操作', width: 160 },
];

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

const openCreate = () => {
  form.username = '';
  form.password = '';
  form.role = 'DOCTOR';
  dialogVisible.value = true;
};

const submitCreate = async () => {
  const res = await api.createUser({ ...form, status: 1 });
  if (res.code === 0) {
    MessagePlugin.success('创建成功');
    dialogVisible.value = false;
    load();
  } else {
    MessagePlugin.error(res.message || '创建失败');
  }
};

const toggleStatus = async (row: any) => {
  const next = row.status === 1 ? 0 : 1;
  const res = await api.updateUserStatus(row.id, next);
  if (res.code === 0) {
    MessagePlugin.success('状态已更新');
    load();
  } else {
    MessagePlugin.error(res.message || '更新失败');
  }
};

const openReset = (row: any) => {
  resetId.value = row.id;
  resetForm.password = '';
  resetVisible.value = true;
};

const submitReset = async () => {
  if (!resetId.value) return;
  const res = await api.resetUserPassword(resetId.value, resetForm.password);
  if (res.code === 0) {
    MessagePlugin.success('密码已重置');
    resetVisible.value = false;
  } else {
    MessagePlugin.error(res.message || '重置失败');
  }
};

onMounted(load);
</script>
