<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { tableColumns } from './archiveToDoReport-data';

// 模拟数据
const mockData = {
  rows: [
    {
      id: 1,
      station: '油站1',
      certificate: 5,
      filter: 12,
      fireExtinguisher: 8,
      emergencyProtection: 20,
      firstAidKit: 4,
    },
    {
      id: 2,
      station: '油站2',
      certificate: 3,
      filter: 8,
      fireExtinguisher: 6,
      emergencyProtection: 15,
      firstAidKit: 3,
    },
    {
      id: 3,
      station: '油站3',
      certificate: 7,
      filter: 15,
      fireExtinguisher: 10,
      emergencyProtection: 25,
      firstAidKit: 5,
    },
    {
      id: 4,
      station: '油站1',
      certificate: 4,
      filter: 9,
      fireExtinguisher: 7,
      emergencyProtection: 18,
      firstAidKit: 4,
    },
    {
      id: 5,
      station: '油站2',
      certificate: 6,
      filter: 11,
      fireExtinguisher: 9,
      emergencyProtection: 22,
      firstAidKit: 4,
    },
    {
      id: 6,
      station: '油站3',
      certificate: 2,
      filter: 7,
      fireExtinguisher: 5,
      emergencyProtection: 13,
      firstAidKit: 3,
    },
    {
      id: 7,
      station: '油站4',
      certificate: 8,
      filter: 16,
      fireExtinguisher: 12,
      emergencyProtection: 28,
      firstAidKit: 6,
    },
    {
      id: 8,
      station: '油站5',
      certificate: 4,
      filter: 10,
      fireExtinguisher: 8,
      emergencyProtection: 20,
      firstAidKit: 4,
    },
    {
      id: 9,
      station: '油站4',
      certificate: 5,
      filter: 13,
      fireExtinguisher: 10,
      emergencyProtection: 24,
      firstAidKit: 5,
    },
    {
      id: 10,
      station: '油站5',
      certificate: 6,
      filter: 14,
      fireExtinguisher: 11,
      emergencyProtection: 26,
      firstAidKit: 5,
    },
  ],
  total: 10,
};

const gridOptions: VxeGridProps = {
  checkboxConfig: {
    highlight: true,
    reserve: true,
    trigger: 'default',
  },
  columns: tableColumns,
  size: 'medium',
  height: 'auto',
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        // 模拟数据分页
        const start = (page.currentPage - 1) * page.pageSize;
        const end = start + page.pageSize;
        const paginatedRows = mockData.rows.slice(start, end);
        return {
          items: paginatedRows,
          total: mockData.total,
        };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
  id: 'archive-todo-report-index',
};

const [BasicTable, basicTableApi] = useVbenVxeGrid({
  gridOptions,
});

// 查看任务详情
const handleView = (row: any) => {
  // 这里可以添加实际的查看详情逻辑
  console.log('查看详情:', row);
};

// 导出数据
const handleExport = () => {
  // 这里可以添加实际的导出逻辑
  console.log('导出数据');
};
</script>

<template>
  <Page :auto-content-height="true" class="bg-white p-4">
    <!-- 提示语 -->
    <div class="mb-4 text-gray-600">
      <span class="mr-2">提示：</span>
      <span>以下为档案待办事项的详细列表信息</span>
    </div>
    
    <!-- 字段解释 -->
    <div class="border p-4 mb-4 bg-white rounded">
      <p class="font-bold mb-2">列表字段解释：</p>
      <ul class="text-sm">
        <li class="mb-1">证照：已转为年审和换证任务的待处理证照数量</li>
        <li class="mb-1">过滤器：有效期小于7天的数量</li>
        <li class="mb-1">灭火器：有效期小于3个月的数量</li>
        <li class="mb-1">应急防护用品：有效期小于3个月的数量</li>
        <li class="mb-1">急救箱：少于标准数量的药品数量</li>
      </ul>
    </div>
    
    <BasicTable table-title="档案待办列表">
      <template #toolbar-tools>
        <ElSpace>
          <ElButton
            @click="handleExport"
            v-access:code="['system:taskScoringRecord:export']"
          >
            导出
          </ElButton>
        </ElSpace>
      </template>
    </BasicTable>
  </Page>
</template>


