<script setup lang="ts">
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useRoute } from 'vue-router';
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postTreeModelDeviceDataInfoPage } from '#/api-client';

import { querySchema } from './schema';

defineOptions({
  name: 'DeviceDataBasicTest',
});

const route = useRoute();
const { DeviceType, DeviceId, FocusAddress } = route.query;

// 简单的表单配置
const formOptions: VbenFormProps = {
  schema: querySchema.value,
  initialValues: {
    FocusAddress: FocusAddress as string,
  },
};

// 最基本的列定义
const basicColumns = [
  { type: 'seq', width: 50, title: '序号' },
  { field: 'SystemName', title: '系统名称', width: 150 },
  { field: 'DeviceType', title: '设备类型', width: 150 },
  { field: 'DeviceId', title: '设备ID', width: 150 },
  { field: 'Timestamps', title: '时间戳', width: 200 },
];

// 调试信息
const debugInfo = ref('');

const gridOptions: VxeGridProps<any> = {
  columns: basicColumns,
  height: 'auto',
  pagerConfig: {
    currentPage: 1,
    pageSize: 20,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        debugInfo.value = '开始API调用...';
        console.log('基本测试 - 开始API调用');
        
        try {
          const response = await postTreeModelDeviceDataInfoPage({
            body: {
              ...formValues,
              pageIndex: page.currentPage,
              pageSize: page.pageSize,
              DeviceType,
              DeviceId,
              FocusAddress,
            },
          });
          
          console.log('基本测试 - 完整响应:', response);
          console.log('基本测试 - response.data:', response.data);
          
          debugInfo.value = `API调用成功，数据: ${JSON.stringify(response.data, null, 2)}`;
          
          if (response.data?.items) {
            console.log('基本测试 - items长度:', response.data.items.length);
            if (response.data.items.length > 0) {
              console.log('基本测试 - 第一条数据:', response.data.items[0]);
            }
          }
          
          // 确保返回的数据包含totalCount字段
          const result = {
            items: response.data.items || [],
            totalCount: response.data.totalCount || (response.data.items ? response.data.items.length : 0),
          };
          
          return result;
        } catch (error) {
          console.error('基本测试 - API调用失败:', error);
          debugInfo.value = `API调用失败: ${error}`;
          throw error;
        }
      },
    },
  },
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
</script>

<template>
  <Page auto-content-height>
    <div class="mb-4 p-4 bg-green-100 border border-green-400 rounded">
      <h3 class="text-lg font-bold mb-2">基本测试模式</h3>
      <p>这个页面使用最基本的列定义来测试数据是否能正常显示。</p>
      <div class="mt-2">
        <strong>调试信息:</strong>
        <pre class="mt-1 text-sm bg-gray-100 p-2 rounded">{{ debugInfo }}</pre>
      </div>
    </div>
    <Grid />
  </Page>
</template> 
