<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 { getActionLogList } from '#/api';
import { $t } from '#/locales';

import { useColumns } from './data';

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

    rowConfig: {
      keyField: 'ID',
    },
    toolbarConfig: {
      custom: true,
      export: false,
      refresh: { code: 'query' },
      search: true,
      zoom: true,
    },
    // pagerConfig: {
    //   enabled: false,
    // },
  } as VxeTableGridOptions<SystemUserApi.SystemUser>,
});
</script>
<template>
  <Page auto-content-height>
    <!-- <Form /> -->
    <Grid :table-title="$t('log.alarm.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>
