<script lang="ts" setup>
import { Page, useVbenModal } from '@vben/common-ui';

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { LogApi } from '#/api';
import { TableAction } from '#/components/table-action';

import FormView from '../components/view.vue';
import { gridOperateOptions, searchFormOptions } from '../data.config';

const [FormViewModel, formViewApi] = useVbenModal({
  connectedComponent: FormView,
});

const [Grid, { reload }] = useVbenVxeGrid({
  formOptions: searchFormOptions,
  gridOptions: gridOperateOptions,
});

const handelClear = () => {
  Modal.confirm({
    iconType: 'info',
    title: '删除提示',
    content: `确定要清空日志记录吗?`,
    cancelText: `关闭`,
    onOk: async () => {
      await LogApi.clearLog('logOperate');
      message.success('数据删除成功');
      reload();
    },
  });
};
const handleView = (data: any) => {
  formViewApi.setData({
    baseData: { content: data.message },
  });
  formViewApi.open();
};
</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>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '详情',
              type: 'text',
              onClick: handleView.bind(null, row),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
