<template>
  <div class="p-4">
    <BasicTable @register="register">
    </BasicTable>
  </div>
</template>

<script lang="ts">
import { BasicColumn } from '/@/components/Table/index';
import type { ErrorLogInfo } from '/#/store';
import { watch, ref, nextTick, defineComponent } from 'vue';
import { FormProps } from '/@/components/Table';
import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { useErrorLogStore } from '/@/store/modules/errorLog';
import { fireErrorApi } from '/@/api/demo/error';
import { cloneDeep } from 'lodash-es';
import { Tag } from 'ant-design-vue';
export default defineComponent({
  components: {
    BasicTable,
    TableAction,
    Tag,
  },
  setup() {
    const rowInfo = ref<ErrorLogInfo>();
    const imgList = ref<string[]>([]);

    const { t } = useI18n();
    const errorLogStore = useErrorLogStore();
    const columns: BasicColumn[] = [
      {
        dataIndex: 'nickName',
        title: '姓名',
        width: 100,
      },
      {
        dataIndex: 'userName',
        title: '账号',
        width: 100,
      },
      {
        dataIndex: 'uri',
        title: '请求URL',
        width: 280,
      },
      {
        dataIndex: 'method',
        title: '请求方式',
        width: 80,
        // customRender: ({record}) => {
        //   return <Tag color={'blue'}>{record.method}</Tag>;
        // },
      },
      {
        dataIndex: 'params',
        title: '请求参数',
        width: 200,
      },
      {
        dataIndex: 'ip',
        title: 'IP地址',
        width: 100,
      },
      {
        dataIndex: 'browser',
        title: '浏览器类型',
        width: 200,
      },
      {
        dataIndex: 'createTime',
        title: '操作时间',
        width: 160,
      },
      // {
      //   dataIndex: 'message',
      //   title: t('sys.errorLog.tableColumnMsg'),
      //   width: 300,
      // },
      // {
      //   dataIndex: 'stack',
      //   title: t('sys.errorLog.tableColumnStackMsg'),
      // },
    ];
    const searchForm: Partial<FormProps> = {
      labelWidth: 100,
      schemas: [
        {
          field: 'nickName',
          label: '姓名',
          component: 'Input',
          componentProps: {
            maxLength: 100,
          },
          colProps: {
            xl: 5,
            xxl: 5,
          },
        },
        {
          field: 'userName',
          label: '账号',
          component: 'Input',
          componentProps: {
            maxLength: 100,
          },
          colProps: {
            xl: 5,
            xxl: 5,
          },
        },
        {
          field: 'time',
          label: '操作时间',
          component: 'RangePicker',
          componentProps: {
            maxLength: 100,
            valueFormat: 'YYYY-MM-DD',
            format: 'YYYY-MM-DD',
          },
          colProps: {
            xl: 7,
            xxl: 7,
          },
        },
      ],
    };
    const [register] = useTable({
      api: fireErrorApi,
      title: t('sys.errorLog.tableTitle'),
      columns: columns,
      useSearchForm: true,
      formConfig: searchForm,
      showIndexColumn: false,
      showTableSetting: true,
      rowKey: 'id',
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
       beforeFetch:(T)=>{
        if(T.time){
            T.startTime = T.time[0]
            T.endTime = T.time[1]
          }
       return T
     },
      canResize: true,
    });

    watch(
      () => errorLogStore.getErrorLogInfoList,
      (list) => {
        nextTick(() => {
          // setTableData(cloneDeep(list));
        });
      },
      {
        immediate: true,
      },
    );
    // if (import.meta.env.DEV) {
    //   createMessage.info(t('sys.errorLog.enableMessage'));
    // }
    // 查看详情
    return {
      register,
      rowInfo,
      // registerModal,
      imgList,
      // openModal,
      };
  },
});
</script>
