<script lang="ts" setup>
/**
 * 错误日志列表（日志审计）
 */
import { Page, useVbenModal } from '@vben/common-ui';

import { Tag } from 'ant-design-vue';

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

import DetailModal from './components/detail-modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

defineOptions({ name: 'ErrorLog' });

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
const [DetailModalComp, detailModalApi] = useVbenModal({
  connectedComponent: DetailModal,
});

function openDetail(row: any) {
  detailModalApi.setData({ id: Number(row?.id || 0), values: row });
  detailModalApi.open();
}

function preview(content: unknown) {
  try {
    const s = typeof content === 'string' ? content : JSON.stringify(content);
    return s.length > 120 ? `${s.slice(0, 120)}…` : s;
  } catch {
    return '';
  }
}
</script>

<template>
  <Page auto-content-height title="错误日志">
    <DetailModalComp />
    <Grid>
      <template #type="{ row }">
        <Tag :color="Number(row.type) === 1 ? 'orange' : 'blue'">
          {{ row.type_txt || row.type }}
        </Tag>
      </template>
      <template #content="{ row }">
        <span class="text-xs text-gray-600">{{ preview(row.content) }}</span>
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            { label: '详情', type: 'link', size: 'small', onClick: () => openDetail(row) },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
