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

import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';

import { h } from 'vue';

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

import { ElTag } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getLogListApi } from '#/api/log';
import { $t } from '#/locales';

import LogDetail from './detail.vue';

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: true,
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: true,
  schema: [
    {
      component: 'Input',
      fieldName: 'method',
      label: '方法名',
      componentProps: {
        placeholder: $t('ui.placeholder.input'),
        allowClear: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'terminal',
      label: '终端',
      componentProps: {
        placeholder: $t('ui.placeholder.input'),
        allowClear: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'account',
      label: '账号',
      componentProps: {
        placeholder: $t('ui.placeholder.input'),
        allowClear: true,
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'createtime',
      label: '生成时间',
      componentProps: {
        type: 'datetime',
        placeholder: '请选择时间',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
  ],
  wrapperClass: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-5',
};

const gridOptions: VxeGridProps<any> = {
  toolbarConfig: {
    custom: true,
    export: true,
    refresh: true,
    zoom: true,
  },
  height: 'auto',
  exportConfig: {},
  pagerConfig: {},
  rowConfig: {
    isHover: true,
  },
  stripe: true,

  proxyConfig: {
    response: {
      result: 'Data',
      total: 'Total',
    },
    ajax: {
      query: async ({ page }, formValues) => {
        return await getLogListApi({
          pageindex: page.currentPage,
          rows: page.pageSize,
          ...formValues,
        });
      },
    },
  },

  columns: [
    { title: '流水号', field: 'id', sortable: true },
    { title: '方法名', field: 'method', sortable: true },
    { title: '终端', field: 'terminal', sortable: true },
    {
      title: '执行时间(ms)',
      field: 'extime',
      sortable: true,
      slots: {
        default: ({ row }) => {
          const time = row.extime;
          let type = 'success';
          if (time > 1000) {
            type = 'danger';
          } else if (time > 500) {
            type = 'warning';
          }
          return h(
            ElTag,
            {
              type: type as any,
              effect: 'light',
              size: 'small',
            },
            () => time,
          );
        },
      },
    },
    { title: 'IP地址', field: 'ip', sortable: true },
    { title: '账号', field: 'account', sortable: true },
    { title: '生成时间', field: 'createtime', sortable: true },
    {
      title: '操作',
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      width: 80,
    },
  ],
};

const gridEvents: VxeGridListeners<any> = {
  cellDblclick: ({ row }) => {
    handleDetail(row);
  },
};

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

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: true,
  closeOnClickModal: false,
  closeOnPressEscape: false,
  connectedComponent: LogDetail,
});

/* 详情 */
function handleDetail(row: any) {
  modalApi.setState({ showCancelButton: false });
  modalApi.setData({ row }).open();
}

function handleFinish() {
  gridApi.reload();
}
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="操作日志列表">
      <template #action="{ row }">
        <el-button
          round
          @click="() => handleDetail(row)"
          :icon="MdiDetail"
          class="!p-2"
        />
      </template>
    </Grid>
    <Modal @finish="handleFinish" />
  </Page>
</template>
