<template>
  <div class="device-command-log-view">
    <GenericMonitorList
        :fetchData="fetchDeviceCommandLogs"
        :columnsConfig="deviceCommandLogColumns"
    />
  </div>
</template>

<script setup>
import GenericMonitorList from '../../components/GenericMonitorList.vue';
import {getDeviceCommandLogs} from '../../api/monitor.js';
import {formatRFC3339} from '../../utils/format.js'; // 导入全局格式化函数

// 适配通用组件的 fetchData prop
const fetchDeviceCommandLogs = async (params) => {
  // 调用真实的 API 函数
  // getDeviceCommandLogs 需要返回一个 { list: [], total: 0 } 格式的对象
  return await getDeviceCommandLogs(params);
};

// 定义表格的列
const deviceCommandLogColumns = [
  {
    title: '设备ID',
    dataIndex: 'device_id',
    key: 'device_id',
    sorter: true,
    filterType: 'number', // 设置筛选类型为数字
    minWidth: 100, // 设置最小宽度
  },
  {
    title: '消息ID',
    dataIndex: 'message_id',
    key: 'message_id',
    // 后端不支持此字段筛选，暂时移除
    // filterType: 'text', 
    minWidth: 300, // UUID较长，设置较宽的最小宽度
  },
  {
    title: '发送时间',
    dataIndex: 'sent_at',
    key: 'sent_at',
    sorter: true,
    filterType: 'dateRange', // 设置筛选类型为日期范围
    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
    minWidth: 180, // 设置最小宽度
  },
  {
    title: '接收成功',
    dataIndex: 'received_success',
    key: 'received_success',
    filterType: 'boolean', // 设置筛选类型为布尔值
    formatter: (row, column, cellValue) => (cellValue ? '是' : '否'),
    minWidth: 100, // 设置最小宽度
  },
  {
    title: '确认时间',
    dataIndex: 'acknowledged_at',
    key: 'acknowledged_at',
    sorter: true,
    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
    minWidth: 180, // 设置最小宽度
  },
];
</script>

<style scoped>
.device-command-log-view {
  /* 视图容器样式 */
}
</style>
