<template>
    <a-card title="我的消息">
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="all" tab="全部"></a-tab-pane>
            <a-tab-pane key="money" tab="资金消息" force-render></a-tab-pane>
            <a-tab-pane key="secure" tab="安全消息"></a-tab-pane>
            <a-tab-pane key="active" tab="活动消息"></a-tab-pane>
        </a-tabs>
         <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
        :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
      </a-table>
    </a-card>
</template>
<script lang="ts" setup>
import { ref,onBeforeMount } from 'vue';
import { getMessageList } from '@/apis/home';
const activeKey = ref('1');
const loading = ref(false);
const billData = ref([])
const columns = [
  {
    title: '消息类型',
    dataIndex: 'messageType',
    key: 'messageType',
    width: 200,
  },
  {
    title: '消息内容',
    dataIndex: 'messageContent',
    key: 'messageContent',
    width: 400,
  },
  {
    title: '发送时间',
    dataIndex: 'sendTime',
    key: 'sendTime',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
];
const messageType=ref("")
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`
})
// 表格变化处理
const handleTableChange = () => {}
const getDataList=async()=>{
  loading.value = true
  try {
    // 调用获取消息列表的接口
    const response:any = await getMessageList({
      page_num: pagination.value.current,
      page_size: pagination.value.pageSize, 
      Message:messageType.value
    });
    billData.value = response.data; // 假设返回的数据在response.data.messages中
    pagination.value.total = response.total; // 假设总记录数在response.data.total中
  } catch (error) {
    console.error('获取消息列表失败:', error);
  } finally {
    loading.value = false
  }
}
onBeforeMount(() => {
  getDataList()
})
</script>