<template>
  <a-table
    :columns="columns"
    :data-source="tableData"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 如果需要自定义列，可以在这里添加 slot -->
  </a-table>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Table, message } from 'ant-design-vue'; // 导入 Table 和 message 组件
import axios from 'axios'; // 用于 HTTP 请求
import { localStg } from '@/utils/storage';

// 定义表格列
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: 'Facility Code',
    dataIndex: 'facilityCode',
    key: 'facilityCode',
  },
  {
    title: 'Facility Type',
    dataIndex: 'facilityType',
    key: 'facilityType',
  },
  {
    title: 'Creator Name',
    dataIndex: 'creatorName',
    key: 'creatorName',
  },
  {
    title: 'Assignee Name',
    dataIndex: 'assigneeName',
    key: 'assigneeName',
  },
  {
    title: 'Description',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: 'Create Time',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: 'Complete Time',
    dataIndex: 'completeTime',
    key: 'completeTime',
  },
  {
    title: 'Cost',
    dataIndex: 'cost',
    key: 'cost',
  },
];

// 状态变量
const tableData = ref([]); // 表格数据源，来自 API 的 data.content
const pagination = ref({
  current: 1, // 当前页（前端从 1 开始）
  pageSize: 10, // 每页大小
  total: 0, // 总记录数
  showSizeChanger: true, // 是否显示每页大小切换
  showQuickJumper: true, // 是否显示快速跳转
});

// 发起 API 请求的函数
const fetchData = async (page = 1, size = 10) => {
  try {
    const token = localStg.get('token'); // 替换为你的 token 键

    const response = await axios.get('http://localhost:8080/api/work-orders/my-orders', {
      params: {
        page: page - 1, // 后端 pageNumber 从 0 开始，前端从 1 开始，所以减 1
        size: size,
      },
      headers: {
        Authorization: `Bearer ${token}`, // 添加 Authorization 头部
      },
    });

    if (response.data.success) {
      tableData.value = response.data.data.content; // 更新数据源
      pagination.value.total = response.data.data.totalElements; // 更新总记录数
      pagination.value.current = response.data.data.number + 1; // 更新当前页
      pagination.value.pageSize = response.data.data.size; // 更新每页大小
    } else {
      message.error(response.data.errorMsg || '请求失败');
    }
  } catch (error) {
    message.error('网络错误或服务器异常');
    console.error(error);
  }
};

// 处理表格变化（分页变化时调用）
const handleTableChange = (pagination) => {
  fetchData(pagination.current, pagination.pageSize);
};

// 组件挂载时加载数据
onMounted(() => {
  fetchData(); // 初始加载第一页数据
});
</script>

<style scoped>
/* 可选：添加一些样式 */
.a-table {
  margin-top: 20px;
}
</style>