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

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

import { Button, message, Modal } from 'ant-design-vue';

import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
import { LogApi } from '#/api';

import { useDifferenceColumns, useSearchSchema } from '../data.config';

const [Grid, { reload }] = useVbenVxeGrid(
  useTableGridOptions({
    formOptions: {
      fieldMappingTime: [['__date', ['startTime', 'endTime']]],
      schema: useSearchSchema(),
    },
    gridOptions: {
      columns: useDifferenceColumns(),
      proxyConfig: {
        ajax: {
          query: async ({ page }, formValues) => {
            return await LogApi.getDifferencePage({
              pageIndex: page.currentPage,
              pageSize: page.pageSize,
              ...formValues,
            });
          },
        },
      },
    } as VxeTableGridOptions,
  }),
);

const handelClear = () => {
  Modal.confirm({
    iconType: 'info',
    title: '删除提示',
    content: `确定要清空日志记录吗?`,
    cancelText: `关闭`,
    onOk: async () => {
      await LogApi.clearLog('logdifference');
      message.success('数据删除成功');
      reload();
    },
  });
};
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <Button
          class="mr-2"
          type="primary"
          v-access:code="'logDifference:clear'"
          @click="() => handelClear()"
        >
          清空日志
        </Button>
      </template>
    </Grid>
  </Page>
</template>
