<template>
  <div class="invitation-notice-container">
    <Card simple class="jyh-card mt-3">
      <div class="mt-3">
        <d-table
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="noticeTableData"
        >
          <d-column field="content" header="邀请内容" show-overflow-tooltip></d-column>
          <d-column field="createTime" header="邀请时间" width="200" show-overflow-tooltip></d-column>
          <d-column field="createUser" header="邀请人" width="180" show-overflow-tooltip></d-column>
          <d-column header="操作" width="150">
            <template #default="scope">
              <d-button
                variant="text"
                color="primary"
                class="mr-2"
                @click="handleAccept(scope.row, 1)"
              >
                接收
              </d-button>
              <d-button
                variant="text"
                color="primary"
                @click="handleAccept(scope.row, -1)"
              >
                拒绝
              </d-button>
            </template>
          </d-column>
          <template #empty>
            <NoData />
          </template>
        </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 { acceptInvite, getInviteListData } from '@/api/jyh';
import { ref, shallowReactive } from 'vue';
import NoData from "@/components/NoData/NoData.vue";
import { Message } from 'vue-devui';
import dayjs from "dayjs";

const noticeTableData = ref([]);
const pager = shallowReactive({
  total: 0,
  pageIndex: 1,
  pageSize: 10,
  pageSizeOptions: [10, 20, 30, 40, 50],
});
const queryInviteListData = async () => {
  const data = await getInviteListData();
  console.log(data)
  if (!data?.data?.data?.data) {
    pager.total = 0;
    return;
  }
  noticeTableData.value = data.data.data.data.map(item => {
    return {
      ...item,
      content: `尊敬的用户，您好！为更好地整合资源、协同开发，现诚邀您加入组织【${item.name}】。`,
      createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
    }
  });
  pager.total = data.data.data.data.length;
};
queryInviteListData();
const handleAccept = async (row, type) => {
  const data = await acceptInvite({
    groupId: row.groupId,
    status: type,
  });
  if (data?.data?.data?.data) {
    Message({
      type: 'success',
      message: '成功接受',
    });
    queryInviteListData();
  } else {
    Message({
      type: 'error',
      message: '接受失败',
    });
  }
};
</script>

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