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

import { Page } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getLoginLogList } from '#/api';
import { $t } from '#/locales';

import { useColumns } from './data';

const userStore = useUserStore();
const [Grid] = useVbenVxeGrid({
  formOptions: {
    schema: [
      { fieldName: 'user_name', component: 'Input', label: $t('log.userName') },
      {
        fieldName: 'start_time',
        component: 'DatePicker',
        label: $t('log.startTime'),
        componentProps: {
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
      },
      {
        fieldName: 'end_time',
        component: 'DatePicker',
        label: $t('log.endTime'),
        componentProps: {
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
      },
    ],
  },
  gridOptions: {
    columns: useColumns(),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
      response: {
        result: 'list',
        total: 'total',
        current: 'currentPage',
      },
      ajax: {
        query: async (
          { page },
          {
            user_name,
            start_time,
            end_time,
          }: {
            end_time: string;
            start_time: string;
            user_name: string;
          },
        ) => {
          const res = await getLoginLogList({
            org_id: userStore!.userInfo!.org_id,
            page_num: page.currentPage,
            page_size: page.pageSize,
            user_name,
            start_time,
            end_time,
          });
          return res;
        },
      },
    },

    rowConfig: {
      keyField: 'id',
    },
    toolbarConfig: {
      custom: true,
      export: false,
      refresh: { code: 'query' },
      search: true,
      zoom: true,
    },
    // pagerConfig: {
    //   enabled: false,
    // },
  } as VxeTableGridOptions<SystemUserApi.SystemUser>,
});
// function onCreate() {
//   console.warn('formDrawer', formDrawerApi);
//   formDrawerApi.setData({}).open();
// }
</script>
<template>
  <Page auto-content-height>
    <!-- <Form /> -->
    <Grid :table-title="$t('log.action.title')">
      <!-- <template #toolbar-tools>
        <Button type="primary" @click="onCreate">
          <Plus class="size-5" />
          {{ $t('ui.actionTitle.create', [$t('system.user.name')]) }}
        </Button>
      </template> -->
    </Grid>
  </Page>
</template>
<style scoped></style>
