<script setup lang="ts">

import { getUserlogEventApi } from '#/api/core/log';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { inject } from 'vue';
import type { VxeGridListeners } from 'vxe-table';
import { globalState } from '#/store/globalState';
import { $t } from '#/locales';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { VbenFormProps } from '#/adapter/form';
import { Page, useVbenModal } from '@vben/common-ui';
import { assetModal } from '#/component';
import dayjs from 'dayjs';
const state = inject('globalState', globalState);
const [Modal, modalApi] = useVbenModal({
  connectedComponent: assetModal,
  class: 'width:1800px;',

});
const startDate = dayjs().startOf('day');
const endDate = dayjs().endOf('day');
interface RowType {
  Uid: string;
  Event: string;
  Param: string;
  Timestamp: string;
}
const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: 'Uid',
      },
      defaultValue: state.uid,
      fieldName: 'Uid',
      label: 'Uid',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: 'Event',
      },
      defaultValue: state.Event,
      fieldName: 'Event',
      label: '事件类型',
    },
    {
      component: 'DatePicker',
      defaultValue: startDate,
      componentProps: {
        showTime: true,
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
      fieldName: 'StartTime',
      label: '开始时间',
      formItemClass: 'col-start-1',
    },
    {
      component: 'DatePicker',
      defaultValue: endDate,
      componentProps: {
        showTime: true,
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
      fieldName: 'EndTime',
      label: '结束时间',
    }
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
  wrapperClass: 'grid-cols-1 md:grid-cols-5',
}
const gridEvents: VxeGridListeners<RowType> = {
  cellClick: async ({ row }) => {
    console.log(row);
    modalApi.setData({
      StartTime: row.Timestamp,
      EndTime: row.Timestamp,
    });
    modalApi.open();
  },
};
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: {},
  proxyConfig: {
    response: {
      total: "total",
      result: "data"
    },
    ajax: {
      query: async ({ page }, formValues) => {
        let Uid = parseInt(formValues.Uid, 10);
        if (Uid == 0) {
          return []
        }
        state.uid = Uid;
        state.Event = formValues.Event;
        let startTimeUnix = 0;
        let endTimeUnix = 0;
        // formValues.StartTime/EndTime 可能是 string（当 DatePicker 设置了 valueFormat 时）
        // 也可能是 dayjs 对象（未设置 valueFormat 时）
        if (formValues.StartTime) {
          if (typeof formValues.StartTime === 'string') {
            startTimeUnix = dayjs(formValues.StartTime).unix();
          } else if (dayjs.isDayjs(formValues.StartTime)) {
            startTimeUnix = formValues.StartTime.unix();
          } else if (typeof (formValues.StartTime as any).unix === 'function') {
            startTimeUnix = (formValues.StartTime as any).unix();
          } else {
            startTimeUnix = dayjs(formValues.StartTime).unix();
          }
        }
        if (formValues.EndTime) {
          if (typeof formValues.EndTime === 'string') {
            endTimeUnix = dayjs(formValues.EndTime).unix();
          } else if (dayjs.isDayjs(formValues.EndTime)) {
            endTimeUnix = formValues.EndTime.unix();
          } else if (typeof (formValues.EndTime as any).unix === 'function') {
            endTimeUnix = (formValues.EndTime as any).unix();
          } else {
            endTimeUnix = dayjs(formValues.EndTime).unix();
          }
        }
        // 使用计算好的 unix 时间调用接口
        return await getUserlogEventApi({
          Id: Uid,
          Event: formValues.Event,
          StartTime: startTimeUnix,
          EndTime: endTimeUnix,
          CurrentPage: page.currentPage,
          PageSize: page.pageSize,
        });
        return await getUserlogEventApi({
          Id: Uid,
          Event: formValues.Event,
          StartTime: formValues.StartTime.unix(),
          EndTime: formValues.EndTime.unix(),
          CurrentPage: page.currentPage,
          PageSize: page.pageSize,
        });
      },
    },
  },

  rowConfig: {
    isHover: true,
  },
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions, gridEvents });

</script>

<template>
  <div>
    <Page auto-content-height class="h-[800px]">
      <Grid />
    </Page>
    <Modal class="w-[1200px]"> </Modal>
  </div>

</template>
