<script setup lang="ts">

import { getUserlogEventApi } from '#/api/core/log';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { inject } from 'vue';
import { globalState } from '#/store/globalState';
import { $t } from '#/locales';
import type { VxeGridProps } from '#/adapter/vxe-table';
import {useVbenModal } from '@vben/common-ui';
const state = inject('globalState', globalState);


interface RowType {
  Uid: string;
  Event: string;
  Param: string;
  Timestamp: string;
}
const [Modal, modalApi] = useVbenModal({});

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'Uid', title: 'Uid' },
    { field: 'Event', title: '事件类型', formatter: ({ cellValue }) => $t('page.log.event.' + `${cellValue}`) || cellValue },
    { field: 'Label', title: 'Label'},
    { field: 'Param', title: '参数' },
    { field: 'Timestamp', title: '时间', formatter: ({ cellValue }) => new Date(cellValue*1000).toLocaleString()},
  ],
  stripe: true,
  height: 'auto',
  pagerConfig: {
    enabled:true
  },
  proxyConfig: {
    response: {
        total: "total",
        result: "data"
    },
    ajax: {
      query: async () => {
        return await getUserlogEventApi({
          Id: state.uid,
          Event: '',
          StartTime: modalApi.getData()?.StartTime || "2025-03-17T16:00:00.000Z",
          EndTime: modalApi.getData()?.EndTime || "2025-03-17T16:00:00.000Z",
          CurrentPage: 1,
          PageSize: 100,
        });
      },
    },
  },
  
  rowConfig: {
    isHover: true,
  },
};

const [Grid] = useVbenVxeGrid({gridOptions });
</script>

<template>
  <Modal>
    <Grid style="height: 500px;" />
  </Modal>
</template>
