<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { Page, useVbenDrawer } from '@vben/common-ui';

import { Button } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { userApi } from '#/api/permission/user';

import Form from './modules/form.vue';

const formatState = (type: number) => {
  switch (type) {
    case 0: {
      return '正常';
    }
    case 1: {
      return '离职';
    }
    default: {
      return '-';
    }
  }
};

const gridOptions: VxeTableGridOptions = {
  columns: [
    { field: 'name', title: '姓名' },
    { field: 'account', title: '账户名' },
    { field: 'role', title: '角色', formatter: () => '管理员' },
    {
      field: 'state',
      title: '状态',
      formatter: ({ cellValue }) => {
        return formatState(cellValue);
      },
    },
    { field: 'lastTime', title: '最后登录时间', formatter: 'formatDateTime' },
  ],
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    response: {
      result: 'userList.records',
      total: 'userList.total',
      list: 'userList.records',
    },
    ajax: {
      query: async ({ page }, formValues) => {
        return await userApi.getUserList({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});

const [FormDrawer, formDrawerApi] = useVbenDrawer({
  connectedComponent: Form,
  destroyOnClose: true,
});

function onRefresh() {
  gridApi.query();
}
function onCreate() {
  formDrawerApi.setData({}).open();
}
// function onEdit(row: SystemRoleApi.SystemRole) {
//   formDrawerApi.setData(row).open();
// }
</script>

<template>
  <Page auto-content-height>
    <FormDrawer @success="onRefresh" />
    <Grid>
      <template #toolbar-actions>
        <Button type="primary" @click="onCreate()">添加用户</Button>
      </template>
    </Grid>
  </Page>
</template>
