<template>
  <div class="pending-collections-view">
    <GenericMonitorList
      :fetchData="fetchPendingCollections"
      :columnsConfig="pendingCollectionColumns"
    />
  </div>
</template>

<script setup>
import GenericMonitorList from '../../components/GenericMonitorList.vue';
import { getPendingCollections } from '../../api/monitor.js';
import { formatRFC3339 } from '../../utils/format.js';
import { PendingCollectionStatus } from '../../enums.js';

// 适配通用组件的 fetchData prop
const fetchPendingCollections = async (params) => {
  return await getPendingCollections(params);
};

// 定义表格的列，依据 swagger.json
const pendingCollectionColumns = [
  {
    title: '关联ID',
    dataIndex: 'correlation_id',
    key: 'correlation_id',
    minWidth: 300,
  },
  {
    title: '设备ID',
    dataIndex: 'device_id',
    key: 'device_id',
    sorter: true,
    filterType: 'number',
    minWidth: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    filterType: 'select',
    filterOptions: Object.values(PendingCollectionStatus).map(value => ({ text: value, value: value })),
    minWidth: 120,
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    sorter: true,
    filterType: 'dateRange',
    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
    minWidth: 180,
  },
  {
    title: '完成时间',
    dataIndex: 'fulfilled_at',
    key: 'fulfilled_at',
    sorter: true,
    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
    minWidth: 180,
  },
];
</script>

<style scoped>
/* 视图容器样式 */
</style>
