<template>
  <div class="invitation-notice-container">
    <Card simple class="jyh-card mt-3">
      <div class="card-title">邀请通知列表</div>
      <div class="mb-3">
        <d-table
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="noticeTableData"
        >
          <d-column field="content" header="邀请内容"></d-column>
          <d-column field="time" header="邀请时间" width="200"></d-column>
          <d-column field="creator" header="邀请人" width="180"></d-column>
          <d-column header="操作" width="150">
            <template #default="scope">
              <d-button
                variant="text"
                color="primary"
                class="mr-2"
              >
                接收
              </d-button>
              <d-button
                variant="text"
                color="primary"
              >
                拒绝
              </d-button>
            </template>
          </d-column>
        </d-table>
        <div class="invitation-pagination">
          <d-pagination
            style="display: inline-flex;"
            :total="pager.total"
            v-model:pageSize="pager.pageSize"
            v-model:pageIndex="pager.pageIndex"
            :can-view-total="true"
            :can-change-page-size="true"
            :can-jump-page="true"
            :max-items="5"
          />
        </div>
      </div>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowReactive } from 'vue';

const noticeTableData = ref([
  {
    content: '当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！',
    time: '2025-03-15 17:29:30',
    creator: '132456798',
  }
]);
const pager = shallowReactive({
  total: 1,
  pageIndex: 1,
  pageSize: 10,
  pageSizeOptions: [10, 20, 30, 40, 50],
});
</script>

<style lang="scss" scoped>
.invitation-notice-container {
  .invitation-pagination {
    padding: 12px 0;
    text-align: right;
  }
}
</style>