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

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

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

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

import FormView from '../components/view.vue';
import { useOperateColumns, useSearchSchema } from '../data.config';

const [FormViewModel, formViewApi] = useVbenModal({
  connectedComponent: FormView,
});
const handleView = (data: any) => {
  formViewApi
    .setData({
      baseData: { content: data.message },
    })
    .open();
};
const handleActionClick = async ({
  code,
  row,
}: OnActionClickParams<LogApi.RecordItem>) => {
  switch (code) {
    case 'view': {
      handleView(row);
      break;
    }
  }
};

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

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

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