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

import { useColumns } from './data';

const userStore = useUserStore();
const [Grid] = useVbenVxeGrid({
  formOptions: {
    fieldMappingTime: [['createTime', ['start_time', 'end_time']]],
    schema: [
      {
        component: 'Input',
        label: '用户名',
        fieldName: 'user_name',
        componentProps: {
          placeholder: '请输入用户名',
        },
      },
      {
        component: 'Select',
        label: '日志类型',
        fieldName: 'type',
        componentProps: {
          options: [
            { label: '上线', value: 1 },
            { label: '下线', value: 2 },
            { label: '报警', value: 3 },
          ],
        },
      },
      {
        // 组件需要在 #/adapter.ts内注册，并加上类型
        component: 'DatePicker',
        // 对应组件的参数
        componentProps: {
          placeholder: $t('ui.formRules.selectRequired'),
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
        // 字段名
        fieldName: 'start_time',
        // 界面显示的label
        label: '开始时间',
      },
      {
        component: 'DatePicker',
        componentProps: {
          placeholder: $t('ui.formRules.selectRequired'),
          format: 'YYYY-MM-DD HH:mm:ss',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
        fieldName: 'end_time',
        label: '结束时间',
      },
    ],
    // submitOnChange: true,
  },
  gridOptions: {
    columns: useColumns(),
    // height: 'auto',
    keepSource: true,
    proxyConfig: {
      response: {
        result: 'list',
        total: 'total',
        current: 'currentPage',
      },
      ajax: {
        query: async (
          { page },
          {
            end_time,
            start_time,
            user_name,
            type,
          }: {
            end_time: string;
            start_time: string;
            type: 1 | 2 | 3;
            user_name: string;
          },
        ) => {
          const res = await getAlarmLogList({
            org_id: userStore!.userInfo!.org_id,
            page: page.currentPage,
            page_size: page.pageSize,
            start_time,
            end_time,
            type,
            user_name,
          });
          console.warn('query', res);
          return res;
        },
      },
    },
    rowConfig: {
      keyField: 'id',
    },
    toolbarConfig: {
      custom: true,
      export: false,
      refresh: { code: 'query' },
      search: true,
      zoom: true,
    },
  } as VxeTableGridOptions<SystemUserApi.SystemUser>,
});
</script>
<template>
  <Page auto-content-height>
    <QueryForm />
    <Grid :table-title="$t('log.action.title')" />
  </Page>
</template>
<style scoped></style>
