<template>
  <a-card title="用户管理">
    <a-table :dataSource="users" :columns="columns" rowKey="id">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-switch :checked="record.enabled" @change="val => updateStatus(record, val)" />
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import api from '../../api'

const users = ref([])
const columns = [
  { title: '用户名', dataIndex: 'username' },
  { title: '角色', dataIndex: 'role' },
  { title: '状态', key: 'status' }
]

const load = async () => {
  const res = await api.get('/api/admin/users')
  if (res.success) users.value = res.data
}

const updateStatus = async (record, val) => {
  await api.put(`/api/admin/users/${record.id}`, { enabled: val })
  load()
}

onMounted(load)
</script>
