<script setup lang="ts">
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { Button, Card, Space } from 'ant-design-vue';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { UserInfo } from '#/model/admin.user';
import { getAdminListApi } from '#/api/core/admin.user';
import { useVbenModal } from '@vben/common-ui';
import addUserModal from './addUser.vue';

const gridOptions: VxeGridProps<UserInfo> = {
  columns: [
    { field: 'username', title: '用户名', },
    // { field: 'phone', title: '手机号' },
    { field: 'role', title: '角色' },
    { field: 'group', title: '用户组' },
    { field: 'remark', title: '备注' },
  ],
  height: 'auto',
  pagerConfig: {},
  proxyConfig: {
    response: {
      total: 'total',
      result: 'data',
    },
    ajax: {
      query: async () => {
        return await getAdminListApi();
      },
    },
  },

  rowConfig: {
    isHover: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({ gridOptions });
const [addUserM, addUserApi] = useVbenModal({
  connectedComponent: addUserModal,
  onClosed: async () => {
    addUserApi.close();
    GridApi.reload();
  },
});
const addAdmin = () => {
  addUserApi.open();
};
</script>

<template>
  <Page auto-content-height class="h-[1200px]">
    <addUserM class="w-[50%]" />
    <Card class="mb-5" title="用户操作">
      <Space>
        <Button @click="addAdmin">新增</Button>
        <Button> 删除 </Button>
      </Space>
    </Card>
    <Grid />
  </Page>
</template>
