<script setup lang="ts">
import { NFlex, NText, NButton, NDataTable, NAvatar } from 'naive-ui';
import { useMessage } from 'naive-ui';
import type { DataTableColumns } from 'naive-ui';
import { h, ref } from 'vue';

const message = useMessage();

interface Member {
  id: number;
  name: string;
  email: string;
  role: string;
}

const data = ref<Member[]>([
  { id: 1, name: 'godboy', email: 'godboy@example.com', role: '管理员' },
]);

const columns: DataTableColumns<Member> = [
  { title: '姓名', key: 'name' },
  { title: '邮箱', key: 'email' },
  { title: '角色', key: 'role' },
  {
    title: '操作',
    key: 'actions',
    render: (row) =>
      h(
        NButton,
        {
          size: 'small',
          text: true,
          type: 'error',
          onClick: () => message.info(`移除 ${row.name}`),
        },
        { default: () => '移除' },
      ),
  },
];
</script>

<template>
  <NFlex vertical :gap="20">
    <NFlex align="center" justify="space-between">
      <NText tag="h2" style="font-size: 20px; font-weight: 600; margin: 0">成员</NText>
      <NButton type="primary" size="small" @click="message.info('邀请成员')">+ 邀请成员</NButton>
    </NFlex>
    <NDataTable :columns="columns" :data="data" :bordered="false" />
  </NFlex>
</template>
