<script setup lang="ts">
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { AdminLog } from '#/model/admin.user';
import { getAdminLogListApi } from '#/api/core/admin.user';
import type { AdminLogParam } from '#/api/core/admin.user';
import type { VbenFormProps } from '#/adapter/form';
const formOptions: VbenFormProps = {
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Select',
      componentProps: {
        filterOption: true,
        options: [
          { label: 'key', value: 'key' },
          { label: 'English', value: 'English' },
          { label: 'ChineseSimplified', value: 'ChineseSimplified' },
          { label: 'Portuguese', value: 'Portuguese' },
        ],
        placeholder: 'key',
        showSearch: true,
      },
      fieldName: 'SearchField',
      label: '操作：',
    },
  ],
};
const gridOptions: VxeGridProps<AdminLog> = {
  columns: [
    { field: 'admin', title: '用户名', },
    { field: 'action', title: '操作' },
    { field: 'params', title: '参数' },
    { field: 'ip', title: 'IP' },
    {
      field: 'createTime', title: '时间', formatter: ({ cellValue }) => new Date(cellValue * 1000).toLocaleString()
    },
  ],
  height: 'auto',
  pagerConfig: {
    pageSize: 100,
  },
  proxyConfig: {
    response: {
      total: 'total',
      result: 'data',
    },
    ajax: {
      query: async ({ page }) => {
        const req: AdminLogParam = {
          page: page.currentPage,
          pageSize: page.pageSize,
        };
        return await getAdminLogListApi(req);
      },
    },
  },

  rowConfig: {
    isHover: true,
  },
};

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


</script>

<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>
