<template>
  <div>
    <div class="flex flex-col h-full">
      <SearchForm
        :fields="fields"
        :params="params"
        :search="search"
      ></SearchForm>
      <div class="flex-1 page-wrap">
        <t-table
          size="small"
          row-key="id"
          :columns="columns"
          :data="tableData"
          bordered
          :pagination="{
            defaultCurrent: 1,
            defaultPageSize: 10,
            onChange,
            showJumper: true,
            showPageSize: false,
            total: pagination.total,
            current: pagination.pageNumber,
          }"
          v-loading="tableLoading"
        >
          <template #create-time="{ col, row }">
            {{ timestampFilter(row[col.colKey]) }}
          </template>
        </t-table>
      </div>
    </div>
  </div>
</template>

<script setup name="LogManage">
import { ref, reactive, computed } from 'vue';
import { omit } from 'lodash';
import { logListApi } from '@/api/system';
import useFetchTable from '@/hooks/useFetchTable';
import { timestampFilter } from '@/utils/filter';

const fields = ref([
  {
    prop: 'createTime',
    label: '时间范围',
    type: 'daterange',
    labelWidth: 70,
    colSpan: 12,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },
  {
    prop: 'content',
    label: '关键字',
    labelWidth: 70,
    colSpan: 6,
    attrs: {
      placeholder: '内容关键字模糊查询',
      clearable: true,
    },
  },
  {
    type: 'buttons',
    colSpan: 2,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
]);
const params = reactive({
  createTime: [],
  content: '',
});
const computedParams = computed(() => {
  let data = omit(params, ['createTime']);
  data.startTime = params.createTime[0];
  data.endTime = params.createTime[1];
  return data;
});

const columns = [
  { colKey: 'createTime', title: '发布时间', cell: 'create-time', width: 180 },
  { colKey: 'content', title: '内容' },
];
const {
  loading: tableLoading,
  pagination,
  tableData,
  search,
  onChange,
} = useFetchTable(logListApi, {
  params: computedParams,
});
</script>
