<template>
    <Table url="/api/v1/messages/notices" noMargin>
        <template #search="{ query }">
            <MoreItem :label="$t('select.startTime')">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.startTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </MoreItem>
            <MoreItem :label="$t('select.endTime')">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.endTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </MoreItem>
            <MoreItem :label="$t('table.hasRead')">
                <a-select v-model="query.isRead" allowClear :placeholder="$t('input.placeholder')">
                    <a-select-option :value="1">{{ $t('table.read') }}</a-select-option>
                    <a-select-option :value="0">{{ $t('table.unread') }}</a-select-option>
                </a-select>
            </MoreItem>
        </template>

        <a-table-column :title="$t('title')" data-index="noticeTitle" />
        <a-table-column :title="$t('content')" data-index="noticeContent" />
        <a-table-column :title="$t('table.createTime')" data-index="createTime" />
        <a-table-column :title="$t('sender')" data-index="noticeSenderName" />
        <a-table-column :title="$t('recipient')" data-index="noticeReceiverName" />
        <a-table-column :title="$t('user.read')" data-index="isReadName" />
        <a-table-column :title="$t('user.readTime')" data-index="readTime" />
    </Table>
</template>

<script>
import MoreItem from '@/components/table/more_item.vue';
import Table from '@/components/table/table.vue';

export default {
    components: { MoreItem, Table },
};
</script>