<template>
  <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,
    }"
  >
    <template #title="{ row }">
      <t-link hover="color" @click="open(row)">
        {{ row.title }}
      </t-link>
      <t-tag
        v-if="!row.readStatus"
        theme="danger"
        variant="light"
        size="small"
        class="m-l-10px"
        >未读</t-tag
      >
    </template>
    <template #send-time="{ col, row }">
      {{ timestampFilter(row[col.colKey], 'mm') }}
    </template>
  </t-table>
</template>

<script setup name="NoticeList">
import { timestampFilter } from '@/utils/filter';

const columns = [
  {
    colKey: 'title',
    title: '通知标题',
    cell: 'title',
  },
  {
    colKey: 'sendTime',
    title: '发送时间',
    width: 180,
    cell: 'send-time',
  },
];
const { tableData, pagination, onChange } = defineProps([
  'tableData',
  'pagination',
  'onChange',
]);
const emit = defineEmits(['open']);
const open = (row) => {
  emit('open', row);
};
</script>
